【WEB基礎】HTML & CSS 基礎入門（4）列表及其樣式

青衫煙雨客發表於2019-05-23
WebHTMLCSS

前面

網頁中漂亮的導航、整齊規範的文章標題列表和圖片列表等等。這些都是離不開HTML裡一個重要的元素----列表，在HTML中有無序列表、有序列表和定義列表三種型別。其中，無序列表應用最為廣泛，下面，我們一塊認識一下HTML列表。

列表在文件編輯中也是十分常見的，我們可以結合word裡的列表來對比學習HTML的列表元素。在word中有符號列表、編號列表、多級列表。在HTML中也提供了三種型別的列表，分別是無序列表、有序列表和定義列表。無序列表沒有先後順序之分，類似word中的符號列表，有序列表用數字或字母作為順序，類似word中的編號列表，注意：定義列表是不同於word中的多級列表。簡單說來，定義列表項可分為上下兩部分，上面列出一個專案，下面是該專案的詳細內容。

來個圖看下列表是個啥樣子！

列表標籤及樣式

無序列表

無序列表以<ul>標籤開始，</ul>標籤結束，中間插入若干列表項，列表項以<li>標籤開始，</li>標籤結束。語法格式如下：

<ul>
    <li>專案1</li>
    <li>專案2</li>
    <li>專案3</li>
……
</ul>

有序列表

有序列表以<ol>標籤開始，</ol>標籤結束，中間插入若干列表項，列表項以<li>標籤開始，</li>標籤結束。語法格式如下：

<ol>
    <li>專案1</li>
    <li>專案2</li>
    <li>專案3</li>
……
</ol>

定義列表

定義列表以<dl>標籤開始，</dl>標籤結束，中間插入的每個列表項都分為兩個部分，<dt> </dt>裡面新增專案名稱，<dd> </dd>裡面新增專案內容或描述。定義列表語法格式如下：

<dl>
    <dt>專案名稱</dt>
    <dd>專案內容</dd>
    ……
</dl>

無序列表和有序列表的列表項前面都有標記，無序列表的專案前是符號（實心圓、空心圓或實心正方形），有序列表的專案前是編號（可以是數字、字母或羅馬數字）。我們有兩種方式來設定列表項前的符號型別，一種是直接在HTML的列表標籤中設定type屬性，另一種是用CSS的方式，設定CSS屬性list-style-type。有了CSS，在HTML中設定type屬性已經被拋棄了，推薦使用CSS屬性list-style-type來設定列表項的標記型別。

示例程式碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        p{
            font-family:微軟雅黑;
            font-size:14pt;
            color:red;
            background-color:gray;
        }
        ol{ /*設定有序列表的編號為小寫羅馬數字*/
            list-style-type:lower-roman;
        }
    </style>
</head>
<body>
    <p>WEB開發教程（無序列表）</p>
    <!--利用type屬性設定無序列表專案符號為實心正方形-->
    <ul type="square"><!--這種方式已拋棄，建議使用CSS屬性list-style-type-->
        <li>HTML&CSS</li>
        <li>JavaScript</li>
        <li>ASP.NET</li>
    </ul>
    <p>B/S三層結構（有序列表）</p>
    <ol><!--已在CSS中用list-style-type屬性設定列表項編號為小寫羅馬數字-->
        <li>介面展示層</li>
        <li>業務邏輯層</li>
        <li>資料操縱層</li>
    </ol>
    <p>B/S與C/S（定義列表）</p>
    <dl>
        <dt>B/S模式</dt>
        <dd>瀏覽器/伺服器模式，只要安裝一個瀏覽器。</dd>
        <dt>C/S模式</dt>
        <dd>客戶端/伺服器模式，需要安裝客戶端軟體。</dd>
    </dl>
</body>
</html>

效果如下圖所示：

注：這三類列表中，無序列表使用最為廣泛，常用於導航、文章標題列表、圖片列表等有規律列表類內容的排版佈局。在CSS屬性list-style-type中，還可以設定值為none，表示去除列表項前的符號。

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        ul{
             list-style-type:none; /*取消專案符號*/
        }
    </style>
</head>
<body>
    <p>電子產品</p>
    <ul>
        <li>顯示器</li>
        <li>印表機</li>
        <li>投影儀</li>
        <li>掃描器</li>
    </ul>
</body>
</html>

效果如下圖所示：

------------------END

相關文章