8.2 列表的常見應用

列表在網頁中的應用很廣泛，如導航條、菜單欄。下面舉一些案例來介紹。

8.2.1 使用列表實現縱向菜單

列表默認狀態(tài)就是縱向排列的，所以實現縱向菜單很簡單，這里只需要使用定位屬性，把列表定位到相應的位置便可以實現縱向菜單布局。

【例8-4】（實例文件：ch08\Chap8.4.html）列表實現縱向菜單。

相關的代碼實例請參考Chap8.4.html文件，在IE瀏覽器中運行的結果如圖8-6所示。

圖8-6 縱向菜單

8.2.2 使用列表實現新聞列表

用列表實現新聞列表是普遍存在的，因為用列表實現起來很方便，不需要大的布局改動便可以實現。

【例8-5】（實例文件：ch08\Chap8.5.html）列表實現新聞列表。

相關的代碼實例請參考Chap8.5.html文件，在IE瀏覽器中運行的結果如圖8-7所示。

圖8-7 列表實現新聞列表

8.2.3 使用列表實現圖片的排列

使用list-style-image屬性，可以將列表前面的項目符號替換為任意的圖片。代碼如下：

      list-style-image: url(a);

其中a表示圖片的路徑。

【例8-6】（實例文件：ch08\Chap8.6.html）列表實現圖片的排列。

相關的代碼實例請參考Chap8.6.html文件，在IE瀏覽器中運行的結果如圖8-8所示。

圖8-8 列表實現圖片的排列