CSS网站元素设计-纵向导航

使用纵向导航的目的主要是让用户方便找到网站中的文章，应该有一个二级分类及其下属的内容。

如下代码所示

<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;        }