导航条 2015-03-03 15:42 by 抹布, ... 阅读, ... 评论, 收藏, 编辑 在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>