The summary of the september

Posted 2020-08-10

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;
}