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

時間 2019-12-13

標籤 WEB基礎 html css 基礎入門列表及其樣式欄目 HTML 简体版

原文原文鏈接

前面

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

列表在文檔編輯中也是十分常見的，咱們能夠結合word裏的列表來對比學習HTML的列表元素。在word中有符號列表、編號列表、多級列表。在HTML中也提供了三種類型的列表，分別是無序列表、有序列表和定義列表。無序列表沒有前後順序之分，相似word中的符號列表，有序列表用數字或字母做爲順序，相似word中的編號列表，注意：定義列表是不一樣於word中的多級列表。簡單說來，定義列表項可分爲上下兩部分，上面列出一個項目，下面是該項目的詳細內容。html

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

列表標籤及樣式

無序列表服務器

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

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
……
</ul>

有序列表學習

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

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
……
</ol>

定義列表spa

定義列表以<dl>標籤開始，</dl>標籤結束，中間插入的每一個列表項都分爲兩個部分，<dt> </dt>裏面添加項目名稱，<dd> </dd>裏面添加項目內容或描述。定義列表語法格式以下：3d

<dl>
    <dt>項目名稱</dt>
    <dd>項目內容</dd>
    ……
</dl>

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

示例代碼

<!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>