三.banner部分的制作

一.banner部分制作分析

　　1.banner部分主要存放的是一张图片

　　2.图片的中下部位有一个选项列表

二.代码的实现

　　1.HTML代码

<div class="banner">
        <ul>
            <li><img src="./images/banner.png" alt="" class="banimg"></li>
        </ul>
        <ol class="banner-list">
            <li></li>
            <li class="disc"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

　　　　具体实现(由于此次项目使纯页面,不实现轮播效果,也不实现选项的点击效果)

　　　　　　图片使用有序列表ul嵌套img标签的方式来实现,后期可以添加多张图片实现轮播效果

　　　　　　然后图片选项我们使用无序列表实现,第二个选项是一个实心圆点,单独设置

　　2.CSS代码

.banner{
    position: relative;
    top: 10px;
}
.banimg{
    width: 100%;
}
.banner-list{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.banner-list li{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    float: left;
    margin-left: 10px;
}
.disc{
    background-color: #ffffff;
}

　　　　①可以看到为banner部分设置相对定位,因为之后需要给图片选项设置位置

　　　　②为图片设置一个100%的宽度,因为这里图片左右是填满浏览器的,不需要设置高度,防止图片拉伸变形

　　　　③图片列表设置绝对定位absolute,距离底边20px,距离左边50%,因为这里会将列表的左边作为标准计算,会向右偏移,所以我们还需要设置transform,是图片选项向左偏移自身的50%,这样就可以居中显示了

　　　　④图片选项小圆点的实现

　　　　　　固定宽高后,设置圆角50%,这样可以使正方形变成圆形

　　　　　　设置边框为1px宽度,颜色为白色的实线

　　　　　　设置左浮动变为横向列表

　　　　　　设置左外边距为10px,使图片选项分开

　　　　　　最后将第二个实心圆点背景色设置为白色