前端基础CSS轮播点

佳美不ERROR

于 2022-09-22 16:57:24 发布

阅读量107

点赞数

分类专栏： web实践案例前端 javaweb 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_57780589/article/details/126994725

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

web实践案例

13 篇文章 1 订阅

订阅专栏

javaweb

13 篇文章 0 订阅

订阅专栏

li小圆点

案例分析

案例分析


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记颜色单词别打错了-->

    <style>
    *{
padding:0;
margin:0;
}

    a{
    text-decoration:none;
    color:#fff;
    }
    .tb-promo{
    position:relative;
    margin:80px 43%;
    }
     .tb-promo img{
        width:140px;
        height:125px;
        }
        .promo-nav{
        position:absolute;
        bottom:10px;
        left:50%;
        bottom:15px;
        margin-left:-35px;
        width:70px;
        height:13px;
        background:rgba(255,255,255,.3);
        border-radius:7px;
        }
        li{
        list-style:none;
        }
        .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="921/1.jpg">
    <ul class="promo-nav">
        <li></li>
        <li class="selected"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>
</body>
</html>