挑战复杂布局
搞定H5手机版里风格多样的列表可不是啥轻松活儿。比起单调排列的两列结构，七扭八歪的图文组合列表就显得有点棘手了。今天咱们就来聊聊怎么做出五花八门的布局，让你的页面既炫酷又实用！
HTML结构设计
对于这种复杂的图片+文字混搭列表的设计，首先得看HTML的结构怎样才能既合理又灵活。确定好后端能顺利输出之后，把所有产品都弄成同一个样子就显得特别关键了。所以，写HTML代码的时候要确保每项产品信息都是一致的，同时也别忘了尽量少加class标签简化结构~
SASS样式处理
在给样式打磨的时候，为了让咱们的网站能在安卓4.4以下以及一些国产移不动设备上表现正常，就得忍痛放下那些新的CSS魔法工具calc、vh、vw之类的，还是用老法子搞定布局。好在有个叫做SASS的预处理器，帮我们井然有序地管理样式码，给开发加个速
list 4
-
热售
苹果iPhone6s
A1700
￥4679.00
-
苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s
A1700
￥4679.00
-
苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s
A1700
￥4679.00
-
苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s
A1700
￥4679.00
-
苹果iPhone6s
A1700
￥4679.00
-
苹果iPhone6s
A1700
￥4679.00
定位布局应用
定位布局很厉害！它能帮你把东西摆得整整齐齐，看得舒服。特别是做手机软件开发时，这个就更管用了！
CSS选择器nth-child
.list_4 {
margin-top: 0.8rem;background:#fff;border-top: 1px solid #ddd;
ul {@extend .cf;}
li {
background:#fff;outline: 1px solid #ddd;
&:nth-child(-n+3) {
width: 50%;height: 0;position: relative;
a {display: block;position: absolute;left: 0;top: 0;height: 0;width: 100%;}
.goods_photo {display: block;position: absolute;right:0.5rem;}
.goods_title,.goods_info,.goods_price {z-index: 2;width: 60%;}
}
&:nth-child(1) {
float: left;padding-bottom: 55%;
a {padding-bottom: 110%;}
.goods_photo {width: 50%;bottom: 5%;}
.goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.6rem;}
.goods_words {margin-top: 1.6rem;}
}
&:nth-child(n+2):nth-child(-n+3) {
float: right;padding-bottom: 27.5%;
a {padding-bottom: 55%;}
.goods_photo {height: 70%;top: 15%;}
.goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.2rem;}
.goods_title {margin-top: 1.6rem;}
}
&:nth-child(n+4) {
width: 33.3%;float: left;
a {display: block;padding: 1rem;}
.goods_photo {width: 70%;max-width: 15rem;margin: 0.5rem auto 0;display: block;}
}
}
}
// 全站范围内用到的图文基本样式
.goods_words {
display:inline-block;
padding:0.3rem 0.5rem;border-radius: 0.3rem;background:#f60;color:#fff;font-size: 1.2rem;margin-bottom: 0.5rem;
}
.goods_title,.goods_price,.goods_info {
display: block;position: relative;
@include ts(); // 引用文字描白边代码片
@include online(1.8rem); // 引用文字超出一行省略号代码片
}
.goods_title {color:#000;font-size: 1.2rem;}
.goods_info {color:#999;font-size: 1.2rem;}
.goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}
说起nth-child这个选择器，它就是CSS里面的佼佼者，咱处理复杂列表样式就得靠它了。运用得当的话，就能随心所欲地操控元素的样式，让页面展现得更加细腻。
总结与思考
这一节我们主要说的是怎么搞定那些让人头疼的移动设备上的H5开发问题，也就是图文混在一起的复杂列表。掌握好CSS里面的那些小把戏，像元素高度宽度挂钩啊、定位布局，还有那神秘的nth-child选择器什么的，你就会发现这些难题变得很轻松就能解决！当然，遇到兼容性的问题也别怕，毕竟我们还有老办法——用CSS解决。而且，活学活用，每次做好一个东西别忘了回顾一下自己有哪些不足之处，这样才会有所提高
在手机软件开发这行里，不断学习新技能就显得特别重要。就算有些浏览器没办法兼容最新的功能，咱们也得用现有的知识和技巧解决问题。希望看了这篇文章，能给你点思路，并且能在实际工作中用到！
评论0