CSS导航条 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            /*margin: 0;*/
            background-color: dodgerblue;
            width:1000px;
            margin: 50px auto;
            list-style-type: none;
            overflow: auto;
        }
        /* 一律使用后代选择器，不要直接用标签选择器，会影响到其他标签*/
        .nav li{
            line-height: 30px;
            width: 250px;
            float: left;
            text-align: center;
        }
        /*此处是设置连接的属性*/
        .nav a{
            color: white;
            font-weight: bold;
            text-decoration: none;
            width: 100%;
            display: block; /*a是内联元素，只占其本身大小，需转换成块元素，整体显示为连接*/
        }
       .nav a:hover{
            background-color: mediumvioletred;

        }
    </style>
</head>
<body>

    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">关于</a></li>
    </ul>

</body>
</html>

 

posted @ 2019-08-24 15:02  Coding_Changes_LIfe  阅读(137)  评论(0)    收藏  举报