CSS水平导航条1——XHTML+CSS导航条

实际效果

使用代码：

使用本导航条代码，你需要制作一张如下的小图片，然后让其水平平铺座位导航条的背景。

HTML：

<ul>
	<li class="first selected"><a href="../../../index.html">Home</a></li>
	<li><a href="../../../about/index.html">About</a></li>
	<li><a href="../../xhtml.html">XHTML</a></li>
	<li><a href="../../css.html">CSS</a></li>
	<li><a href="http://bbs.blueidea.com/index.php">Blueidea</a></li>
	<li><a href="http://www.alistapart.com/">ALA</a></li>
</ul>

CSS：

CSS中值得注意的是以下几点：

1. 让ul 里的 li 浮动到左侧。ul也要浮动。a的浮动是为了修复IE/MAC的bug。
2. a的left top背景是分割线。其中.first a 没有背景。

#clear { clear:both;}
         ul {
         margin: 0;
         padding: 0;
         float: left;
         width: 720px;
         background: #FAA819 url(images/mainNavBg.gif) repeat-x;
         list-style: none;
         text-transform: uppercase;
         }
ul li {
         float: left;
         }
       
ul a {
         padding: 0 2em;
         line-height: 2.1em;
         background: url(images/mainNavBorder.gif) repeat-y left top;
         text-decoration: none;
         color: #fff;
         float: left;
         display: block;
         }
       
ul a:hover {
         color: #333;
         }
       
ul .first a {
         background: none;
         }

返回XHTML+CSS导航条教程