练习之京东轮播图（并不轮播哈哈哈）

一、代码：

<style>
        .img-list{
            position: relative;
        }

     .img-list{
         height: 470px;
         width: 590px;
         margin: 100px auto;
     }
     .img-list li{
         position: absolute;
     }
     .img-list li:nth-child(2){
         z-index: 1;
     }

     .pointer a{
         width: 10px;
         height: 10px;
         background-color: rgba(0, 0, 0, .3);
         float: left;
        border-radius: 50%;
        border: 3px solid transparent;
        background-clip: content-box;
        }

     .pointer a:hover{
        border: 3px rgba(0, 0, 0, .5) solid;
        background-color:#fff ;
     }

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


    </style>
</head>
<body>
    <ul class="img-list">
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图3.png">
            </a>
        </li>
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图2.png">
            </a>
        </li>
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图3.png">
            </a>
        </li>
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图2.png">
            </a>
        </li>
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图3.png">
            </a>
        </li>
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图2.png">
            </a>
        </li>
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图3.png">
            </a>
        </li>
        <li>
            <a href="javascript:;">
            <img src="C:\data\计算机学习\index3.html\02.CSS\图片\轮播图2.png">
            </a>
        </li>

    <div class="pointer">
        <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>
        <a href="javascript:;"></a>
    </div>


    </ul>
</body>
</html>
 
二、反思
　　一开始没有思路，看了讲解才知道可以通过 position：absolute 来使这些图片摞在一起；
　　a 不是块元素，这个不能忘qwq；
　　当边框设置为 transparent 时，而不想让背景色透过边框显示时可以使用
　　　　background-clip: content-box ;  
 
 
posted @ 2022-03-31 21:05  故渊ccx  阅读(84)  评论(0)    收藏  举报