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>

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

相关阅读:
Web 2.0网站命名的7个建议
 梦猪课堂视频系列
 计算机英文术语完全介绍
 PPT高手的思路
 在线RSS阅读器大比拼
 【百度现有服务】
转载VFW编程实例（详）
实现MFC扩展DLL中导出类和对话框 (转)
Windows下编译 OpenSceneGraph（转）
OSG静态编译 (转)
原文地址：https://www.cnblogs.com/yinzhengjie/p/7994919.html