居中导航 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>布局-居中导航</title>
    <style type="text/css">
    ul{
        text-align: center; /* text-align 只对行级元素起效果*/
        height: 30px;
        line-height: 30px;
        background-color: #f00;
    }

    li,a{
        display: inline-block;
        width: 80px;
        height: 100%;
    }
    li{
        margin: 0 5px; 
        list-style: none;
    }
    a,a:hover,li.cur a{
        color: #fff;
        text-decoration: none;
    }
    a:hover,li.cur a{
        background-color: #c00;
    }
    </style>
</head>
<body>
<ul>
    <li><a href="#">推荐</a></li>
    <li><a href="#">歌单</a></li>
    <li><a href="#">打牌DJ</a></li>
    <li><a href="#">歌手</a></li>
    <li><a href="#">新碟上架</a></li>
</ul>
</body>
</html>

image

posted @ 2016-11-01 16:30  刘江龙  阅读(250)  评论(0)  编辑  收藏  举报