纵向导航
纵向导航可以采用列表标签，这里采用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;
}
页:
[1]