天猫导航栏 - 爱码网

<!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>