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 #c5c6c4;

              border-bottom:1px solid #c5c6c4;

              border-left:1px solid #c5c6c4;

       }

       #category h1{

              margin:0px;

              padding:4px;

              font-size:12px;

              font-weight:bold;

              border-top:1px solid #c5c6c4;

              background-color:#f4f4f4;

       }

       #category h2{

              margin:0px;

              padding:4px;

              font-size:12px;

              font-weight:normal;

       }

上述的代碼有不少重複的地方，可以再優化

       #category {

              width:100px;

              border-right:1px solid #c5c6c4;

              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 #c4c5c6;

              background-color:#f4f4f4;

       }

       #category h2{

              font-weight:normal;

       }