导航栏的平均分配+border-radius

导航栏的平均分配+border-radius****

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{
                height: 48px;
                display: flex;
            }
            div[class^=item]{
                flex: 1;
            }
            .num{
                width: 24px;
                height: 24px;
                color: #000;
                background-color:#fff;
                border-radius:50%;
                text-align:center;
                margin:12px auto;
            }
            .item1{background-color:#E7000A;}
            .item2{background-color:#F29900;}
            .item3{background-color:#FDF100;}
            .item4{background-color:#029A43;}
            .item5{background-color:#0268BC;}
            .item6{background-color:#601289;}

        </style>
    </head>
    <body>
        <div class="container">
        <div class="item1"><div class="num">1</div></div>
        <div class="item2"><div class="num">2</div></div>
        <div class="item3"><div class="num">3</div></div>
        <div class="item4"><div class="num">4</div></div>
        <div class="item5"><div class="num">5</div></div>
        <div class="item6"><div class="num">6</div></div>
        </div>
    </body>
</html>

利用border-radius制作圆角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用border-radius制作圆</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
       
    </head>
    <body>
        <div class="circle">
            1
        </div>
    </body>
</html>
posted @ 2026-07-07 08:59  碰一下猫猫头  阅读(8)  评论(0)    收藏  举报