导航条练习 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航条练习</title>
        <style type="text/css">
            /*清除默认样式*/
            *{
                margin: 0;
                padding: 0;
            }
            /*设置ul*/
            .nav{
                list-style: none;
                /*设置宽度*/
                /*
                    IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
                */
                width: 1000px;
                /*ul设置背景*/
                background-color: #6495ED;
                /*设置元素居中*/
                margin: 50px auto;
                /*解决高度塌陷*/
                overflow: hidden;
                
                
            }
            .nav li{
                /*设置li向左浮动*/
                float: left;
                
                width: 12.5%;
                
            }
            .nav a{
                /*先将a转换为块元素*/
                display: inline-block;
                /*为a设置宽度*/
                /* width: 250px; */
                width: 100%;
                /*设置文字居中*/
                text-align: center;
                /*设置上下内边距*/
                padding: 5px 0;
                /*取消下划线*/
                text-decoration: none;
                /*设置字体颜色*/
                color: white;
                /*设置加粗*/
                font-weight: bold;
                /*设置字体*/
                font-family: 微软雅黑;
                
            }
            /*设置鼠标移入效果*/
            .nav a:hover{
                background-color: #cc0000;
            }
            
            
            
        </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>
            
        </ul>
    </body>
</html>

IE6中如果为元素指定一个宽度，则会默认开启hasLayout

posted @ 2021-07-05 15:42  2237774566  阅读(36)  评论(0)    收藏  举报