博納網(wǎng)絡在前面的網(wǎng)站制作技巧文章中，對如何網(wǎng)站制作前端的網(wǎng)頁鏈接、鼠標指針等方法做過操作案例介紹，今天深圳網(wǎng)站制作公司就網(wǎng)站設計師怎樣在制作過程中設計列表樣式逐步進行講解。一個好的網(wǎng)站設計離不開前期專業(yè)規(guī)劃，這其中尤其以網(wǎng)站整體布局為重?，F(xiàn)在博納網(wǎng)絡網(wǎng)頁前端設計師就列表樣式做了如下區(qū)分與操作案例：
網(wǎng)站設計制作時如何在在網(wǎng)頁中設計列表樣式
列表在生活中隨處可見，在網(wǎng)頁中也是如此。大多數(shù)網(wǎng)頁都包含形式多樣的列表，如新聞列表、導航列表或分類列表等。頁面制作人員為了能使網(wǎng)頁的HTML結構更加符合語義，會選用不同的標簽將列表信息表現(xiàn)在網(wǎng)頁中。HTML提供了項目列表的基本功能，包括順序列表的<ol>標簽和無順序列表的<ul>標簽等。當引入CSS后，項目列表被賦予了很多新的表現(xiàn)形式。本章主要圍繞項目列表的基本CSS屬性進行介紹，同時結合網(wǎng)頁設計中經(jīng)常應用的列表結構欄目，配合CSS進行多樣化樣式設計。
【網(wǎng)站制作列表樣式注意重點】
◆ 設計列表信息
◆ 用CSS設置項目列表符號
◆ CSS控制項目列表橫豎的方法
◆ 綜合運用項目列表進行網(wǎng)頁中的菜單設計
◆ 設計圖文混排的列表欄目
◆ 設計列表結構的導航欄目
（1.）設計列表信息在現(xiàn)實生活中每個人都會接觸到各式各樣的列表信息，去超市購物前會羅列一張購物清單，購物完畢結賬時需要排隊等候，結賬完畢會收到結賬清單。諸如此類的情況出現(xiàn)，我們都可以將其視為列表。購物清單是列表，排隊等候的人群是列表，結賬清單還是列表，如此之多的列表出現(xiàn)在大家的身邊，你是否注意到了呢。網(wǎng)絡生活近似于現(xiàn)實生活，在現(xiàn)實生活中隨處可見的列表，在網(wǎng)頁中也是可以看到的。例如，當我們在網(wǎng)絡中購物時，會選擇很多東西放入購物車中，那么在購物車中看到的物品列表；網(wǎng)購完畢付賬后看到的購物清單列表等。網(wǎng)頁中的列表并非都是顯而易見的，例如，網(wǎng)站的導航其實也是列表，用戶在某個站點中排名也是列表。這么多的列表是不是讓你感覺有點暈眩了？不用擔心，在分析各個列表在網(wǎng)站如何運用之前，先了解一下HTML中的3種列表模式：無序列表（ul）、有序列表（ol）和自定義列表（dl）。
（2）無序列表無序列表就是沒有次序的列表，列表項目不分先后。以生活中去超市購物為例，不會考慮先買什么再買什么，而是看到所需物品就直接放到購物車中。<ul>標簽表示無序列表的集合，并且<ul>標簽中一定是緊跟<li>標簽才是正確的寫法。
<ul>
<li>無序列表中的其中一條內容</li>
<li>無序列表中的其中一條內容</li>
</ul>
HTML對標簽有著相對嚴格的要求，每個標簽都必須關閉，而且每個標簽之間的嵌套要正確，尤其是列表的結構。下面羅列幾種在HTML中無序列表的錯誤嵌套方法。
◆錯誤一：<ul>標簽和<li>標簽之間插入了其他的標簽。
<ul>
<li>無序列表中的其中一條內容</li>
<li>無序列表中的其中一條內容</li>
<div>錯誤的無序列表嵌套結構</div>
</ul>
◆錯誤二：多層<ul>標簽嵌套時的錯誤。
錯誤三：<li>標簽未關閉。
以上幾種錯誤的寫法糾正后，應該以如下形式書寫。
◆錯誤一的糾正，將<div>標簽放到<ul>標簽的外面，或者刪除。
<ul>
<li>無序列表中的其中一條內容</li>
<li>無序列表中的其中一條內容</li>
</ul>
<div>將該標簽內容移出<ul>標簽的嵌套，或者刪除</div>
◆錯誤二的糾正，多層ul無序列表標簽嵌套時，應該將<ul>標簽放在<li>標簽之間。
◆錯誤三的糾正，關閉<li>標簽即可。
無序列表可以分為一級無序列表和多級無序列表，一級無序列表在瀏覽器中解析后，會在列表<li>標簽前面添加一個小黑點的修飾符，而多級無序列表則會根據(jù)級數(shù)而改變列表前面的修飾符。一級無序列表，在無任何樣式修飾的瀏覽器默認解析時顯示效果。如下圖4-1所示
<ul>
<li>一級無序列表的瀏覽器默認解析后的頁面效果</li>
<li>一級無序列表的瀏覽器默認解析后的頁面效果</li>
</ul>
多級無序列表，在無任何樣式修飾的瀏覽器默認解析時顯示效果，
如圖4-2所示。
多級無序列表的默認解析效果通過效果圖可以發(fā)現(xiàn)無序列表在隨著其所包含的列表級數(shù)的增加而逐漸縮進，并且隨著列表級數(shù)的增加而改變不同的修飾符。瀏覽器在解析無序列表時，會不斷地對不同級別的無序列表進行縮進顯示，但修飾符卻只有3種。如果3層嵌套都無法滿足網(wǎng)頁中所需要使用的無序列表時，讀者就應該反思這個頁面中的列表嵌套是否過多了。合理地使用HTML標簽才能讓頁面的結構更加清晰，相對地更符合語義。不過不用擔心，如果網(wǎng)頁中實在需要更多層嵌套，并且是不同的修飾符時，還是可以利用CSS樣式來修改其修飾符的。好了，關于網(wǎng)站制作前端設計布局對于錯誤列表樣式的介紹今天就到這里，明天我們會繼續(xù)就網(wǎng)站制作時對于列表樣式的幾種正確處理方式做介紹。深圳博納網(wǎng)絡專業(yè)網(wǎng)站設計編輯整理。
