天猫导航栏

最新推荐文章于 2022-09-05 18:31:53 发布

weixin_30628801

最新推荐文章于 2022-09-05 18:31:53 发布

阅读量272

点赞数

原文链接：http://www.cnblogs.com/gxywb/p/10093628.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                color: #424242;
                font-family: arial;
            }
            a{
                text-decoration: none;
            }
            .nav::after{
                content: "";
                display: block;
                clear: both;
            }
            .nav{
                list-style: none;
            }
            .nav .list-item{
                float: left;
                margin: 0 10px;
                height: 30px;
                line-height: 30px;
                
            }
            .nav .list-item a{
                padding: 0 5px;
                color: #f40;
                font-weight: bold;
                height: 30px;
                display: inline-block;
                border-radius: 15px;
            }
            .nav .list-item a:hover{
                background: #f40;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li class="list-item"><a href="#">天猫</a></li>
            <li class="list-item"><a href="#">聚划算</a></li>
            <li class="list-item"><a href="#">天猫超市</a></li>
        </ul>
    </body>
</html>