纵向导航

纵向导航

可以采用列表标签，这里采用DIV+H1+H2的方式制作纵向导航，利用标签本身的性质，可以很好的区分一级分类和二级分类。

BODY部分

<div id="category">

<h1>CSS</h1>

    <h2>CSS入门</h2>

         <h2>CSS进阶</h2>

         <h2>CSS高级技巧</h2>

<h1>WebUI</h1>

    <h2>理论知识</h2>

         <h2>实战应用</h2>

         <h2>高级技巧</h2>

<h1>DOM</h1>

    <h2>DOM入门</h2>

         <h2>DOM应用</h2>

         <h2>DOM与浏览器</h2>

<h1>XHTML</h1>

    <h2>XHTML参考手则</h2>

         <h2>XHTML论坛</h2>

</div>

CSS部分

#category {

width:100px;;

border-color:#c5c6c4;

border-style:solid;

border-width:0px 1px 1px 1px;

}

#category h1,#category h2 { /*这里只是采用H1H2来区分类别，所以要对其样式根据需要改进*/

margin:0px;      /*消除默认的H1H2的外边距*/

padding:4px;

font-size:12px;

}

#category h1 {

border-top:1px solid #c5c6c4;

background-color:#f4f4f4;

}

#category h2 {

font-weight:normal;

}