实训转换学习日记第四天

可分为三部分

第一部分下载界面

下载界面可分为三部分，第一部分可以使用三个a标签，在CSS里用background-imge属性设置一个图像，使用background-position截取，在用overflow：hidden这个属性防止图片超出隐藏。

第二部分是右上角两个小图标

分为两个小部分，上面的直接引用，下面的图标需要修改宽高使图片等比例缩小，然后调整图标位置

第三部分是右侧固定悬浮栏分为上中下三部分，上面的图片，中间的二维码和下面的标题

，把图片先引进去，用background-repeat：no-repeat这个属性使这个图片不重复，用position：fixed属性让这个盒子固定

然后给大盒子里的小盒子一个相对定位，然后使用position:fixed实现滑动固定

 HTML：

    <section id="suspension">
        <div class="daji"></div>
        <ul class="content">
             <li><img src="img/wzry_qrcode.jpg" alt="" width="107" height="107"></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
        </ul>
    </section>

CSS:

/* 悬浮 */
#suspension{
    width: 260px;
    height: 494px;
    background-image: url(../img/r_navBg.png);
    background-repeat: no-repeat;
    /*固定定位  */
    position: fixed;
    /* 它的值越大，说明它的层级越高 */
    z-index: 10;
    top: 50%;
    margin-top: -150px;
    right: 0;
}
#suspension .daji{
    width: 165px;
    height: 145px;
    background-image: url(../img/r_dj.png);
    background-repeat: no-repeat;
    /* 相对定位 */
    position: absolute;
    top: 30px;
    left: 85px;
}
#suspension  .content{
    width: 118px;
    height: 290px;
    position: absolute;
    top: 160px;
    left: 85px;
}
#suspension  .content li{
    width: 118px;
    background-image: url(../img/r_all2022.png);
    margin-bottom: 2px;
    list-style: none;
}
#suspension  .content li:nth-child(1){
    padding-top: 2px;
    height: 132px;
    background-position: -243px 0px;
}
#suspension  .content li:nth-child(1) img{
    display: block;
    margin: 0 auto;
}
#suspension  .content li:nth-child(2) {
    height: 39px;
    background-position: -243px -133px;
}
#suspension .content li:nth-child(3) {
    height: 39px;
    background-position: -122px -120px;
}
#suspension  .content li:nth-child(4) {
    height: 39px;
    background-position: -122px -160px;
}
#suspension  .content li:nth-child(5) {
    height: 39px;
    background-position: -120px 0px;
}