<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航条练习</title>
        <link rel="stylesheet" type="text/css" href="css/清除默认样式.css"/>
        <link rel="stylesheet" type="text/css" href="css/导航条的练习.css"/>
    </head>
    <body>
        <div class="box1">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">联系</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </body>
</html>

清除默认样式.css

*{
    margin: 0;
    padding: 0;
}

导航条的练习.css

.box1{
    margin: 20px auto;
    overflow: hidden;
    /* 
        在IE6中,如果为元素指定了一个宽度,则会默认开启hasLayout
     */
    width: 1000px;
    background-color: #5E96EF;
}

.box1 ul{
    overflow: hidden;
    list-style-type: none;
}

.box1 ul li{
    line-height: 30px;
    text-align: center;
    float: left;
    width: 25%;
}

.box1 ul li a{
    height: 30px;
    text-decoration: none;
    display: block;
    color: white;
    font-weight: bold;
}

a:hover{
    background-color: #DC1400;
}

效果

posted on 2021-07-01 14:58 leiyanting 阅读(94) 评论(0) 收藏举报

刷新页面返回顶部