标签：
part01
上周做的一个八一硬汉h5页面重构（http://acts.qidian.com/2016/5683655/）
——新技能get之——z-index
防止图片撑得很厉害的办法就是不要懒，背景和一些图标或者包着文字的装饰边框要分开切！
例如这一页的排版布局我的实现代码如下：
html:
1 <section class="swiper-slide com-page page2"> 2 <p class="img03"><img src="./images/bigcar.png"></p> 3 <div class="text-box"> 4 <div class="text"> 5 <img src="./images/kuang.png" class="kuang"> 6 <p class="p01">九章锦</p> 7 <p class="p02">作者：光环嘟</p> 8 <p class="p02">推荐人：阿汤哥</p> 9 <b class="read readleft"><a target="_blank" href="http://www.qdmm.com/MMWeb/1003462735.aspx"><img src="./images/read02.png" /></a></b> 10 <p class="p03 swiper-no-swiping">保家卫国的硬汉：仍述 起点《九章锦》 推选理由： 少年英姿，八百铁骑，横扫西域八千里； 弱冠封侯，临危受命，单枪匹马卫家国。 初识仍述，长眉凤目，相貌清秀，一副公子哥模样，谁能想到，十七岁率八百将士，横扫西域三十六国的冠军候 ，竟是他！ 北境之王率巨象阵，大破万岁军，兵临菀陵城下，眼看山河破碎，生灵涂炭，朝中竟无人敢迎战！还是仍述，危 急关头，挺身而出，即使一去不复返也再所不惜！铁血丹心，国之利器，冠军候仍述，堪称保家卫国的硬汉！ 起点昵称：野兔窟主</p> 11 </div> 12 </div> 13 <div class="text-box second-box"> 14 <p class="img04"><img src="./images/robot.png" class="robot"></p> 15 <div class="text second-text"> 16 <img src="./images/kuang.png" class="kuang2"> 17 <p class="p01">傲世九重天</p> 18 <p class="p02">作者：风凌天下</p> 19 <p class="p02">推荐人：看不清的风景</p> 20 <b class="read readleft"><a target="_blank" href="http://www.qidian.com/Book/1952707.aspx"><img src="./images/read02.png"/></a></b> 21 <p class="p03 swiper-no-swiping">保家卫国的硬汉：紫霄，起点《傲世九重天》，风凌大大当过兵，所以书里处处有热血，紫霄天帝为阻域外天魔不退一步，哪怕无外援，也拼到最后一人。宁将此身作尘埃，不使天魔过紫霄。起点昵称，苍柳浅吟</p> 22 </div> 23 </div> 24 </section>
.next { position: absolute; bottom: 0.2rem; left: 50%; width: 18%; margin-left: -9%; } .com-page .text-box { padding: 1rem 1rem 0rem 1.1rem; color: #e5e5e5; position: absolute; z-index: 1; } .com-page .second-box { padding-top: 1.3rem !important; position: absolute; bottom: 0.2rem; z-index: 0; }
.com-page {
position: relative;
overflow: hidden;
background: url(../images/page06.jpg) no-repeat 0 top;
background-size: cover;
z-index: 1;
}
标签：
原文地址：http://www.cnblogs.com/popeyesailorman/p/5909214.html
