使用纵向导航的目的主要是让用户方便找到网站中的文章,应该有一个二级分类及其下属的内容。
如下代码所示
<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> |
这里采用的标签是div +h1 + h2的形式。
CSS代码中
#category { width:100px; border-right:1px solid #c 5c 6c 4; border-bottom:1px solid #c 5c 6c 4; border-left:1px solid #c 5c 6c 4; } #category h1{ margin:0px; padding:4px; font-size:12px; font-weight:bold; border-top:1px solid #c 5c 6c 4; background-color:#f 4f 4f 4; } #category h2{ margin:0px; padding:4px; font-size:12px; font-weight:normal; } |
上述的代码有不少重复的地方,可以再优化
#category { width:100px; border-right:1px solid #c 5c 6c 4; border-style:solid; border-width:0px 1px 1px 1px; } #category h1 ,#category h2{ margin:0px; padding:4px; font-size:12px; } #category h1{ border-top:1px solid #c 4c 5c 6; background-color:#f 4f 4f 4; } #category h2{ font-weight:normal; } |