尚硅谷html练习-京东的轮廓图

最新推荐文章于 2022-12-19 17:51:21 发布

小付学前端

最新推荐文章于 2022-12-19 17:51:21 发布

阅读量128

点赞数

分类专栏：练习题文章标签：前端 css html5 html css3

本文链接：https://blog.csdn.net/weixin_58264104/article/details/125774870

版权

练习题专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript创建图片轮播效果的方法，通过绝对定位和z-index实现导航点的切换。教程详细展示了如何设置图片容器、li元素的样式，以及如何使用伪类pointer控制导航点的高亮显示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        /* 设置图片的容器 */
     .img-list{
        width: 590px;
        height: 470px;
        margin: 100px auto;

/*        为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位而不是相对于初始包含块（html）去定位 */

        position: relative;
     }
     /* 设置li */
     .img-list li{
        position: absolute;
     }
     /* 通过修改元素的层级来显示指定的图片 */
     
     .img-list li:nth-child(4){
        z-index: 1;
     }
     /* 设置导航点的样式 */
     .pointer{
        position: absolute;
        z-index: 9999;
        bottom: 20px;
        left: 40px;
     }
     .pointer a{
        /* 设置元素向左浮动 */
        /* display: block; */
        float: left;
        width: 10px;
        height: 10px;
        margin: 0px 2px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .6);
        border: 2px solid rgba(255, 0, 0, .6);
        /* 将背景颜色值设置到内容区，边框和内边距不在有背景颜色 */
        background-clip: content-box;
        border: 2px solid transparent;
     }
     .pointer a.active,
     .pointer a:hover{
        background-color: #fff;
        border: 2px solid rgba(255, 0, 0, .6);
     }

    </style>
</head>
<body>
    <ul class="img-list">
         <li>
            <a href="javascript:;"><img src="./img/05/1.webp" alt=""></a>
         </li>
         <li>
            <a href="javascript:;"><img src="./img/05/2.webp" alt=""></a>
         </li>
         <li>
            <a href="javascript:;"><img src="./img/05/3.jpg" alt=""></a>
         </li>
         <li>
            <a href="javascript:;"><img src="./img/05/4.jpg" alt=""></a>
         </li>
         <li>
            <a href="javascript:;"><img src="./img/05/5.jpg" alt=""></a>
         </li>
         <li>
            <a href="javascript:;"><img src="./img/05/6.jpg" alt=""></a>
         </li>
         <li>
            <a href="javascript:;"><img src="./img/05/7.jpg" alt=""></a>
         </li>
         <li>
            <a href="javascript:;"><img src="./img/05/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>
</html>