W3school导航条 CSS 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        /*设置nav的大小*/
        .nav{
            width:1205px;
            height:48px;
            background-color:rgb(232,231,227);
            margin:100px auto;
        }
        .nav li{
            list-style:none;
        }
        /*设置li*/
        .nav li{
            float:left;
            height:100%;
            line-height:48px;/*文字垂直居中*/

        }
        .nav a{
            text-decoration: none;
            color:#777;
            font-size:18px;
            display:block;
            padding:0 39px;
        }
        .nav a:hover{
            background-color:  #3f3f3f;
            color:#E8E7E3;
        }
    </style>
</head>

<body>
    <!--创建导航条结构-->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>

    </ul>
</body>
</html>

 

posted @ 2020-04-27 16:26  军临天下jyj  阅读(121)  评论(0)    收藏  举报