2.3 創(chuàng)建列表

列表形式在網(wǎng)頁(yè)設(shè)計(jì)中占有比較大的比例，它的特點(diǎn)是顯示信息非常整齊直觀，便于用戶理解。在本節(jié)中將向讀者介紹HTML中用于創(chuàng)建項(xiàng)目列表、編號(hào)列表和定義列表的相關(guān)標(biāo)簽。

2.3.1 使用<ul>標(biāo)簽創(chuàng)建項(xiàng)目列表

項(xiàng)目列表又稱(chēng)為無(wú)序列表，就是列表結(jié)構(gòu)中的列表項(xiàng)沒(méi)有先后順序的列表形式。不少網(wǎng)頁(yè)應(yīng)用中的列表均采用項(xiàng)目列表。

項(xiàng)目列表標(biāo)簽采用<ul></ul>標(biāo)簽，每一個(gè)列表項(xiàng)被包含在<li></li>標(biāo)簽內(nèi)，所有的列表項(xiàng)被包含在<ul></ul>標(biāo)簽內(nèi)。

項(xiàng)目列表的語(yǔ)法格式如下。

<ul>
   <li>列表項(xiàng)一</li>
   <li>列表項(xiàng)二</li>
   <li>列表項(xiàng)三</li>
   <li>列表項(xiàng)四</li>
   <li>列表項(xiàng)五</li>
</ul>

01 執(zhí)行“文件>打開(kāi)”命令，打開(kāi)頁(yè)面“源文件\第2章\2-3-1.html”，效果如圖2-41所示，將鼠標(biāo)光標(biāo)移至名為news的div中，將多余的文字刪除，并輸入相應(yīng)的文字，如圖2-42所示。

圖2-41　打開(kāi)頁(yè)面

圖2-42　輸入文字

02 切換到網(wǎng)頁(yè)HTML代碼中，為剛輸入的內(nèi)容添加相應(yīng)的項(xiàng)目列表標(biāo)簽，如圖2-43所示。保存頁(yè)面，在瀏覽器中預(yù)覽頁(yè)面，可以看到網(wǎng)頁(yè)中項(xiàng)目列表的效果，如圖2-44所示。

圖2-43　添加項(xiàng)目列表標(biāo)簽

圖2-44　預(yù)覽項(xiàng)目列表默認(rèn)效果

2.3.2 使用<ol>標(biāo)簽創(chuàng)建編號(hào)列表

編號(hào)列表又稱(chēng)有序列表，就是列表結(jié)構(gòu)中的列表項(xiàng)有先后順序的列表形式，從上到下可以有不同的序列編號(hào)，如1、2、3……或者a、b、c……。

編號(hào)列表采用標(biāo)簽<ol></ol>，每一個(gè)列表項(xiàng)被包含在<li></li>標(biāo)簽內(nèi)，所有的列表項(xiàng)被包含在<ol></ol>標(biāo)簽內(nèi)。使用編號(hào)列表可以讓列表項(xiàng)按照明確的順序排列。

編號(hào)列表的語(yǔ)法規(guī)則如下。

<ol>
   <li>列表項(xiàng)一</li>
   <li>列表項(xiàng)二</li>
   <li>列表項(xiàng)三</li>
   <li>列表項(xiàng)四</li>
   <li>列表項(xiàng)五</li>
</ol>

01 執(zhí)行“文件>打開(kāi)”命令，打開(kāi)頁(yè)面“源文件\第2章\2-3-2.html”，效果如圖2-45所示，將鼠標(biāo)光標(biāo)移至名為box的div中，將多余的文字刪除，并輸入相應(yīng)的文字，如圖2-46所示。

圖2-45　打開(kāi)頁(yè)面

圖2-46　輸入文字

02 切換到代碼視圖中，為剛輸入的內(nèi)容添加相應(yīng)的編號(hào)列表標(biāo)簽，如圖2-47所示。保存頁(yè)面，在瀏覽器中預(yù)覽頁(yè)面，可以看到網(wǎng)頁(yè)中編號(hào)列表的默認(rèn)效果，如圖2-48所示。

圖2-47　添加編號(hào)列表標(biāo)簽

圖2-48　預(yù)覽編號(hào)列表默認(rèn)效果

2.3.3 使用<dl>標(biāo)簽創(chuàng)建定義列表

列表的另外一種形式是定義列表，定義列表形式特別，用法也特別，定義列表中每個(gè)標(biāo)簽都是成對(duì)出現(xiàn)的，它在網(wǎng)頁(yè)布局中的應(yīng)用也是非常廣泛的。

定義列表由<dl>、<dt>和<dd>3個(gè)標(biāo)簽組成，<dt>和<dd>標(biāo)簽包含在<dl>標(biāo)簽內(nèi)，不同的是標(biāo)簽<dt></dt>定義的是標(biāo)題，而標(biāo)簽<dd></dd>定義的是內(nèi)容。

定義列表的語(yǔ)法規(guī)則如下。

<dl>
   <dt></dt>
   <dd></dd>
   …
</dl>

01 執(zhí)行“文件>打開(kāi)”命令，打開(kāi)頁(yè)面“源文件\第2章\2-3-3.html”，效果如圖2-49所示，將鼠標(biāo)光標(biāo)移至名為news的div中，將多余的文字刪除，并輸入相應(yīng)的文字，如圖2-50所示。

圖2-49　打開(kāi)頁(yè)面

圖2-50　輸入文字

02 切換到代碼視圖中，可以看到該部分內(nèi)容的HTML代碼，如圖2-51所示。在頁(yè)面中將<div id="news"></div>標(biāo)簽之間相應(yīng)的段落標(biāo)簽刪除，添加定義列表標(biāo)簽<dl>、<dt>和<dd>，如圖2-52所示。

圖2-51　HTML代碼

圖2-52　添加定義列表標(biāo)簽

03 因?yàn)?lt;dl>、<dt>和<dd>標(biāo)簽的默認(rèn)效果并不能滿足這里制作的效果，需要定義相應(yīng)的CSS樣式對(duì)其進(jìn)行控制，如圖2-53所示。保存頁(yè)面，在瀏覽器中預(yù)覽頁(yè)面，可以看到網(wǎng)頁(yè)中定義列表的效果，如圖2-54所示。

圖2-53　CSS樣式代碼

圖2-54　預(yù)覽定義列表效果