HTML&CSS基础-导航条

　　　　　　　　　　　　　HTML&CSS基础-导航条

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

 

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>导航条</title>
        
        <style type="text/css">
            /**
             *     清除默认样式
             */
            *{
                margin: 0;
                padding: 0;
            }
            
            /**
             *     设置ul
             */
            .nav{
                /*去除项目符号*/
                list-style: none;
                
                /*未ul设置一个背景颜色*/
                background-color: blue;
                
                /**
                 *     设置宽度
                 *     在IE6中，如果未元素指定了一个宽度，这会默认开启haslayout
                 */
                width: 1000px;
                
                /*设置元素居中*/
                margin: 50px auto;
                
                /*解决子元素浮动后高度塌陷问题*/
                overflow: hidden;
                
            }
            
            .nav li{
                /*设置li元素向左浮动*/
                float: left;
                /*未li元素指定宽度*/
                width: 12.5%;
            }
            
            .nav a{
                /*将内联元素转换为块元素*/
                display: block;
                /*未a指定一个宽度是父元素li的100%*/
                width: 100%;
                /*设置文字居中*/
                text-align: center;
                /*设置一个上下内边距*/
                padding: 5px 0;
                /*去除下划线*/
                text-decoration: none;
                /*设置字体*/
                font-family: "curlz mt","华文彩云","arial", "微软雅黑";
                /*设置字体颜色*/
                color: white;
                /*设置加粗*/
                font-weight: bold;
            }
            
            .nav a:hover{
                background-color: red;
            }
        </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>

 

二.浏览器打开以上代码渲染结果

 

posted @ 2017-12-06 21:18  尹正杰  阅读(438)  评论(0)  编辑  收藏  举报