XHTML+CSS常规应用教程——XHTML+CSS导航条(Div+CSS导航条制作教程)
如何用XHTML和CSS制作一款导航条呢？希望这个教程可以帮助你回答这个问题。
制作CSS导航条前的热身
在阅读本教程之前，您应该已经掌握了基础的HTML/XHTML和CSS。
由于大多数站点导航条所列出的几个条目都是并列的关系，因此我们通常使用一个无序列表ul来作为导航条的代码。因此如何给ul定义基本的样式也就成了制作导航条的重要基础。下面就让我们来看一个定义了简单样式的无序列表。
垂直导航条
普通的列表，稍加一些简单的样式就可以做成垂直的导航条。
- CSS垂直导航条1——(消除了图片下载延迟。但是宽度和高度都固定，因为受背景图片的限制)[1]
- CSS垂直导航条2(宽度可更改并且高度自适应)
- CSS垂直导航条3(没有图片，宽度可更改，高度自适应)[2]
- CSS垂直导航条4(没有图片，宽度可更改，高度自适应)[2]
水平导航条
参考资料
- 《精通CSS》
- CSS Design: Taming Lists——http://www.alistapart.com/articles/taminglists/ (CSS设计：驯服列表)
- Accessible Image-Tab Rollovers——http://www.simplebits.com/ (可访问的图片标签式切换导航条)
以下部分尚未整理
XHTML+CSS导航条实例（摘自DynamicDrive.com）
这里收集了一些导航条以及代码，阅读这些代码就可以大概了解XHTML+CSS导航条的制作方法。