24.6.3 欄目頁設計與實現

欄目相當於一個目錄，集中了所有詳細內容的名稱，便於訪問者能一眼看出每個詳細內容的概要。同時，對於上下相鄰的兩個欄目，可通過其編號的奇偶性來定義不同的背景色。

對於每個內容，都使用二級標題的形式來展示，大標題是文章的標題，使用粗體顯示，小標題是副標題，不使用粗體。

欄目頁使用列表的方式將法律法規、新聞活動信息等相同的內容列出，同時每個內容元素帶上a鏈接，以便用戶點擊時可以訪問詳細內容。其實現代碼如下。

---

<ul>
    <li>
      <a href="news02.html">
        <dt>
          <hgroup>
            <h1>落實群教實踐活動，積極開展打非行動</h1>
            <h2>區安監局直管科堅持群眾路線教育實踐活動，創新安全監管模式</h2>
          </hgroup>
        </dt>
      </a>
    </li>
    <li>
      <a href="news124.html">
        <dd>
          <p><img src="img/15image002.jpg"></p>
        </dd>
        <dt>
          <hgroup>
            <h1>省安全生產示範縣命名授牌暨市最佳安監人員命名儀式舉行</h1>
            <h2>正值全國安全生產月活動如火如荼開展的重要時刻，6月16日上午，在</h2>
          </hgroup>
        </dt>
      </a>
    </li>
</ul>
  

---

相應的樣式控制代碼如下。

---

.list_ul li{
    overflow:hidden;
    background:#f2f3f7;
}
.list_ul li:nth-of-type(2n){
    background:#e5e8ef;
}
.list_ul li:nth-of-type(2n) dd>p:before{
    background:#e5e8ef;
}
.list_ul li a{display:block;}
.list_ul li a>*{
    color:#707070;
    height:60px;
    vertical-align: middle;
}
.list_ul li dd p{
    position:relative;
    width:100px;
    height:60px;
    overflow:hidden;
    text-align:center;

}
.list_ul li dd img{
    width:100%;
    min-height:100%;
}
.list_ul li hgroup>*{
    text-indent:10px;
    line-height:20px;
    font-size:14px;
    font-weight:100;
    overflow: hidden;
    height: 20px;
    padding-right: 10px;
}
.list_ul li hgroup>h2{
    font-size:12px;
    color:#909090;
}
  

---

法律法規及最新動態兩個欄目的最終實現效果如圖24-25所示。

圖24-25　欄目頁效果