CSS网页布局入门教程：纵向导航菜单

纵向导航菜单也是网站 利用中的一种主要 模式，所谓纵向导航菜单是指 搁置在网页左侧或右侧的从上至下罗列的一种导航 模式 。先看一下 动机吧！
 

如图所示的 动机，我们先看一下代码 构造：

<div id="nav">
    <h1>CSS</h1>
        <h2><a href="#">css入门</a></h2>
        <h2><a href="#">css进阶</a></h2>
        <h2><a href="#">css高级</a></h2>
    <h1>webUI</h1>
        <h2><a href="#"> 实际 常识</a></h2>
        <h2><a href="#">实战 利用</a></h2>
        <h2><a href="#">高级技巧</a></h2>
    <h1>DOM</h1>
        <h2><a href="#">DOM入门</a></h2>
        <h2><a href="#">DOM 利用</a></h2>
        <h2><a href="#">DOM与阅读器</a></h2>
    <h1>XHTML</h1>
        <h2><a href="#">参考手册</a></h2>
        <h2><a href="#"> 交换论坛</a></h2>
</div>

从以上 可以看出，这次的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:0px 1px 1px 1px;}
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; text-decoration:none;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

本css代码 部分采纳了简化写法，假如哪句意思看不懂，您 可以在Dreamweaver中 打开 取舍编辑 款式表即可查看具体是哪一项了，相信 通过这样几次练习，这些代码您已经能 彻底看懂了， 注明您离高手又近了一步了 。

大家可能已经 留神到了，#nav的边框本例中只设置了左右下和一像素，而没有上，而在h1的 款式里设置了上部的上像素？这是为何呢？由于h1的 款式上部都有一条横线，假如nav上部再有一条横线的话成长两条了， 后果显示出来便是两像素的高度了 。