• CSS样式:轮播图


    <!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>
        
        <style>
            .img-list{
                width: 590px;
                height: 470px;
                margin: 300px auto;
                position: relative;
                list-style: none;
                overflow: hidden;
                
            }
            为ul开启相对定位,目的使
            .img-list li{
                list-style: none;
                position: absolute ;
            }
            /* 通过修改元素的层级来显示指定的图片 */
            .img-list li:nth-child(2){
                z-index: 1;
            }
            /* z-index:可点击 */
            .pointer{
                position: absolute;
                z-index: 9999;
                bottom: 20px;
                left: 60px;
            }
            .pointer a{
                float: left;
                width: 10px;
                height: 10px;
                margin: 0 2px;
                margin-left: 5px;
                border-radius: 50%;
                background-color: rgba(255,255,255, .3);
                /* 将背景颜色设置到内容区,边框和内边距不再有背景颜色 */
                background-clip: content-box;
                border: 2px solid transparent;
            }
            .pointer a.active,
            .pointer a:hover{
                background-color: #fff;
                border: 2px solid rgba(255, 0, 0, .2);
            }
            
        </style>
    </head>
    <body>
        <ul class="img-list">
            <li><a href="javascriot:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\q (1).jpg" alt=""></a></li>
            <li><a href="javascriot:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\q (2).jpg" alt=""></a></li>
            <li><a href="javascriot:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\q (3).jpg" alt=""></a></li>
            <li><a href="javascriot:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\q (4).jpg" alt=""></a></li>
            <li><a href="javascriot:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\q (5).jpg" alt=""></a></li>
            <li><a href="javascriot:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\q (6).jpg" alt=""></a></li>
            <li><a href="javascriot:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\q.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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77

    在这里插入图片描述

  • 相关阅读:
    华为云云耀云服务器L实例评测 |云服务器性能评测
    AD画板时,元器件跑到屏幕左下角,看不见啦,咋办?
    界面控件DevExpress WPF(v23.2)下半年发展路线图
    2022年ACM暑假集训个人排位赛(1)A-F题解
    ucontext 上下文
    Linux权限管理
    计数排序(超详细)
    记于2022.7.21
    C/C++ Qt 标准Dialog对话框组件应用
    传统社区如何进行数字化转型?快鲸智慧社区解决方案为你支招
  • 原文地址:https://blog.csdn.net/m0_62491934/article/details/125590420