淘宝轮播图

我就是我 2023-07-03 08:29 26阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>淘宝轮播图</title>
        <style>
            *{
        
                margin: 0;
                padding: 0;
            }
            li{
        
                list-style: none;
            }
            .tb-promo{
        
                /* 子绝父相 */
                position: relative;
                height: 280px;
                width: 520px;
                background-color: pink;
                /* 盒子居中对齐 */
                margin: 100px auto;
            }
            /* 强制规定图片的大小和盒子的大小相同 */
            .tb-promo img{
        
                width: 520px;
                height: 280px;
            }
            .prev,
            .next{
        
                /* 箭头是压住盒子的 所以？浮动？不容易做--不占有位置所以用绝对定位 */
                position: absolute;
                top:50%;
                margin-top: -15px;
                /* 加了绝对定位的盒子可以直接设置高度和宽度 */
                width: 20px;
                height: 30px;
                background:rgba(0,0,0,.3);
                /* 文字水平居中，垂直居中 */
                text-align: center;
                line-height: 30px;
                color: #fff;
                /* 去掉下划线 */
                text-decoration: none;
            }
            .prev{
        
                left:0;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
            }
            .next{
        
                right: 0;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
            }
            .promo-nav{
        
                /* 绝对定位 */
                position: absolute;
                bottom: 15px;
                left:50%;
                margin-left: -35px;
                width: 70px;
                height: 13px;
                background-color: rgba(255,255,255,.3);
                border-radius: 7px;
            }
            .promo-nav li{
        
                float: left;
                width: 8px;
                height: 8px;
                background-color: #fff;
                border-radius: 50%;
                margin: 3px;
            }
            .promo-nav .selected{
        
                background-color: #ff5000;
            }
        </style>
    </head>
    <body>
        <div class="tb-promo">
            
            <img src="images/tb.jpg" alt="">
            
            <a href="#" class="prev"><</a>
            
            <a href="#" class="next">></a>
            
            <ul class="promo-nav">
                <li class="selected"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205133236239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3,size_16,color_FFFFFF,t_70