图文列表制作
在手机上做HTML5编程时，我们经常用到方阵图片列表，尤其是在购物软件里。这一篇文章，我要告诉大家怎么做出一个简单的双排图文字典，还有怎么让这个图文字典在手机上看起来舒服。
双列图文列表布局
双列图文列表就是图片加上名字和价钱这种，逛商店经常看到。在手机上，因为屏幕大小不同，得会自动排版哈。我来教大家一种特简单的双列布局方法哈。
咱们手机上做双列布局麻烦点，得考虑到屏幕大小的差异！所以，搞移动应用的时候，用响应式设计就成了必须的事，这样不管啥设备都能准确显示。
HTML代码结构
下面是一个简单的双列图文列表的HTML代码结构示例：
html 商品名称 ¥ 100.00
给每个元素加个 class 类名就能轻松控制它们的样子，还能让所有元素在代码里看起来井然有序，对于我们来说真的很有用！这样还能大大提升我们代码的易读性和重复利用性。
CSS样式设置
SASS语法让我们轻松地定义变量和实行嵌套规则，以此简化样式表编辑过程。就像这样：
“`scss
$item-width: 50%;
.item {
width:$item-width;
float: left;
.img {
width: 100%;
边框也得这样设置：在底部增加百分之百的空间，这样，你的图片就是正方的。
list 2
换个背景图像，换成product.jpg这个图片。
background-size: cover;
}
.info {
padding: 10px;
.name {
font-size: 16px;
color:#333;
.list_2 {
ul {
@extend .cf; // 引用清理浮动代码片,看不懂请看本人scss相关教程
li {
width: 50%;float: left;padding: 1rem 0;
outline: 1px solid #ddd; // 使用 outline 模拟边框 (outline不占据盒子模型)
background: #fff; // 使用白色背景颜色,防止 outline 重叠造成 2px 线条
a { display: block;
text-decoration: none; // 去除默认下划线
} .goods_title,.goods_price {
padding: 0 1rem; // 加上左右内填充,防止文字和边框粘结
text-align: center;
} .goods_photo {
width: 60%;margin: .5rem auto;display: block;
}
}
}
}// 全站范围内用到的图文基本样式.goods_title,.goods_price {
display: block;position: relative;
@include ts(); // 引用文字描白边代码片
@include online(1.8rem); // 引用文字超出一行省略号代码片}
.goods_title {color:#000;font-size: 1.2rem;}
.goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}
}
.price {
font-size: 14px;
color:#f60;
}
搞定这些设置后，每样东西都变成两栏排好队，加上正方形图画助阵，炫酷！
注意事项与优化
-记住，手机上的编程，左、右边框别用 border 的方式弄，容易出问题，就直接用 outline模拟呗！
在用outline画边框时，记得跟背景色搭配好，别让边框变成只有2像素那么粗！
-用CSS3的text-shadow就能让字有个边框，这样就更好看了，也更容易阅读！
如果你需要把超出的部分用省略号表示出来，就可以试试CSS3的ellipsis属性或JavaScript~
用SASS学点css语法！这样写起代码来就方便多了，而且还能保证代码的质量~所以说在做项目时，尽量用SASS进行样式管理。
小结
这节课咱们学着做了个双图两文的小列表，主要弄懂了这么几个知识点：
别用border做手机开发的左右边框！
在用outline模拟框边时，记得看下背景色搭得如何，别搞砸咯。
CSS3中的text-shadow就是让字体好看点儿，有个边框。
4.实现文字超出显示省略号的方法。
5. SASS语法的学习和应用。
咱们可以通过学和用，把H5的各种表格搞得飞快，所以不管设备多小都能适应。接着，让我们再找找其他好玩儿的H5开发小窍门！
评论0