CSS
 
  
  
  
  
css入门
 
  
  
  
  
css进阶
 
  
  
  
  
css高级
 
  
  
  
  
webUI
 
  
  
  
  
理论知识
 
  
  
  
  
实战应用
 
  
  
  
  
高级技巧
 
  
  
  
  
DOM
 
  
  
  
  
DOM入门
 
  
  
  
  
DOM应用
 
  
  
  
  
DOM与浏览器
 
  
  
  
  
XHTML
 
  
  
  
  
参考手册
 
  
  
  
  
交流论坛
 
  
  
  
  

 从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。

这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的标题，h2来做二级分类下面的细节内容。在XHTML的讲法意义中，h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义，直接使用h1,h2来表示层级关系，相对于在标签中加入id或class来做层级的标记更为简单和直观，在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计：

 
 
 
 
  
  
  
  
#nav{width:100px;border-color:#c5c6c4;  
  
  
  
  
border-style:solid;border-width:0px1px1px1px;}  
  
  
  
  
#navh1{margin:0px;padding:4px;font-size:12px;  
  
  
  
  
font-weight:bold;font-family:Verdana;  
  
  
  
  
border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}  
  
  
  
  
#navh2{margin:0px;padding:4px;  
  
  
  
  
font-size:12px;font-family:Verdana;font-weight:normal;}  
  
  
  
  
#navh2a{color:#666666;text-decoration:none;}  
  
  
  
  
#navh2a:hover{color:#999999;text-decoration:underline;}  
  
  
  
  
 
 
 
 

 此实现CSS纵向导航菜单的CSS代码部分采用了简化写法，如果哪句意思看不懂，您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了，相信经过这样几次练习，这些代码您已经能完全看懂了，说明您离高手又近了一步了。

大家可能已经注意到了，#nav的边框本例中只设置了左右下和一像素，而没有上，而在h1的样式里设置了上部的上像素？这是为什么呢？因为h1的样式上部都有一条横线，如果nav上部再有一条横线的话成长两条了，结果显示出来就是两像素的高度了。#p#

完整代码如下：

 
 
 
 
  
  
  
  
  
  
  
  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
CSS
 
  
  
  
  
css入门
 
  
  
  
  
css进阶
 
  
  
  
  
css高级
 
  
  
  
  
webUI
 
  
  
  
  
理论知识
 
  
  
  
  
实战应用
 
  
  
  
  
高级技巧
 
  
  
  
  
DOM
 
  
  
  
  
DOM入门
 
  
  
  
  
DOM应用
 
  
  
  
  
DOM与浏览器
 
  
  
  
  
XHTML
 
  
  
  
  
参考手册
 
  
  
  
  
交流论坛