css3基础巩固 - 简易导航栏(附详细注释)

DOCTYPE html>


    
    demo
    
    


	/* 清除内外边距 */
    *{
        padding:0px;/*内边距:0*/
        margin:0px;/*外边距:0*/
    }

    /* header大盒子 */
    header{
        width:1000px;/*宽度*/
        margin:40px auto;/*上下:40|左右:auto*/
    }

    /* nav导航 */
    nav{
        width:1000px;/*宽度*/
        height:40px;/*高度*/
        background:#000000;/*背景颜色*/
        border-radius:5px;/*圆角边框*/
    }

    /* nav>li导航栏 */
    nav>ul>li{
        width:70px;/*宽度*/
        height:40px;/*高度*/
        float:left;/*左浮动*/
        text-align:center;/*居中对齐*/
        line-height:40px;/*行高(与高度相同|实现中部居中对齐)*/
        list-style:none;/*清除默认项目符号*/
    }

    /* a超链接样式 */
    nav>ul>li>a{
        text-decoration:none;/*清除默认下划线*/
        color:#FFFFFF;/*字体颜色*/
        font-size:14px;/*字体大小*/
    }

    /* a链接悬停样式 */
    nav>ul>li>a:hover{
        font-weight:bold;/*加粗*/
    }
    





    
        
            首页
            新闻
            热点
            体育
            游戏
            直播
            娱乐
            彩票