制作5--京东滚动图（html/css）

效果图：

制作思路：
[html]
1.8个图片可点击跳转，用ul>li8>a>img
2.8个圆点用div>a8
[css]
3.ul设置居中margin，如果不设置宽和高，默认100%的宽（设置overflow隐藏框外面的图片）
4.li设置绝对定位，让其重叠
5.针对某个图片设置:nth-child(4)的z-index属性，使其层级在最上面
6.a设置宽高、圆形、边距、背景颜色（透明）、左浮动（内联元素脱离文档流就变成块元素，所以不会设置display:block）
将背景颜色值设置到内容区background-clip，这样边框和内边距不再有背景颜色，设置边框透明transparent
7.div设置层级9999、绝对定位（包含块是ul，给ul设置相对定位）、left、bottom
8.设置鼠标移入，圆点白色且边框透明的效果

img-list.html

<body>
    <ul class="img-list">
        <li><a href="javascript:;"><img src="../img/1.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="../img/2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="../img/3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="../img/4.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="../img/5.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="../img/6.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="../img/7.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="../img/8.jpg" alt=""></a></li>
        <div class="pointer">
            <a class="active" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
</body>

style.css

<style>
    /* 设置图片的容器 */
    .img-list {
        width: 590px;
        height: 470px;
        margin: 0 auto;
        /* 为ui开启相对定位，目的使ul中的pointer相对于ul定位而不是相对于初始包含块 */
        position: relative;
        overflow: hidden;
    }

    .img-list li {
        position: absolute;
    }

    /*  通过修改元素的层级来显示指定的图片 */
    .img-list li:nth-child(4) {
        z-index: 1;
    }

    .pointer {
        position: absolute;
        z-index: 9999;
        bottom: 20px;
        left: 20px;
    }

    /* 设置导航点的样式 */
    .pointer a {
        /* 内联元素脱离文档流就变成块元素了 */
        /* display: block; */
        width: 10px;
        height: 10px;
        background-color: rgba(255, 355, 255, .3);
        float: left;
        border-radius: 50%;
        margin-left: 8px;
        /* 将背景颜色值设置到内容区，边框和内边距不再有背景颜色 */
        background-clip: content-box;
        border: 2px solid transparent;
    }

    .pointer a.active,
    .pointer a:hover {
        background-color: #fff;
        border: 2px solid rgba(255, 255, 255, .3);
    }
</style>
posted @ 2020-10-12 16:57  悦颜悦色，柠月清风  阅读(318)  评论(0)    收藏  举报