首页 > 代码库 > The summary of the september

The summary of the september

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>
View Code
.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;}

 

The summary of the september