码迷,mamicode.com
首页 > 其他好文 > 详细

居中导航

时间:2016-11-01 16:45:00      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:ref   block   png   list   doc   class   元素   doctype   idt   

<!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>

技术分享

居中导航

标签:ref   block   png   list   doc   class   元素   doctype   idt   

原文地址:http://www.cnblogs.com/qq-757617012/p/6019929.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!