代码改变世界

导航条

2015-03-03 15:42  抹布  阅读(401)  评论(2)    收藏  举报

在a的css设置高光的样式 

  • float:left - 使用 float 来把块元素滑向彼此。
  • display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
body{ padding:0; margin:0;}
ul{list-style-type: none;}
a{ text-decoration:none;}
.maincontent {padding: 0 px;margin-right: 10px;margin-left: 10px; background:#000;}
.maincontent .nav{ color:#fff; height:30px; background:#000;}
.maincontent .nav ul {margin: 0px; line-height:30px ; display:block;}
.maincontent .nav ul li{float: left; line-height:30px; }
.maincontent .nav ul li a{ color:#fff;  padding:0 30px; line-height:30px; display:block; cursor:pointer;}
.maincontent .nav ul li a:hover {color:#F03; background:#fff;}
</style>
</head>

<body>
<div class="maincontent">
    <div class="nav">
      <ul>
        <li><a href="">首页</a></li>
        <li><a h>首页</a></li>
        <li><a>首页</a></li>
        <li><a>首页</a></li>
        <li><a>首页</a></li>
        <li><a>首页</a></li>
      </ul>
    </div>
</div>
</body>
</html>