HTML之CSS列表&lt;二&gt;

SS列表屬性作用有三類，這章介紹列表項標記為圖像。

列表項標記為圖像

（1）編輯代碼

打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

例子解釋：

ul:設置列表類型為沒有列表項標記設置填充和邊距0px（瀏覽器兼容性）
ul中所有li:設置圖像的URL，并設置它只顯示一次（無重復）您需要的定位圖像位置（左0px和上下5px）用padding-left屬性把文本置于列表中。

列表 -簡寫屬性

在單個屬性中可以指定所有的列表屬性。這就是所謂的簡寫屬性。

為列表使用簡寫屬性，列表樣式屬性設置如下：

（1）編輯代碼

打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

所有的CSS列表屬性

SS列表屬性作用如下：

設置不同的列表項標記為有序列表

同的列表項標記為無序列表

設置列表項標記為圖像

列表

在HTML中，有兩種類型的列表：

無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）

有序列表 - 列表項的標記有數字或字母

使用CSS，可以列出進一步的樣式，并可用圖像作列表項標記。

不同的列表項標記

list-style-type屬性指定列表項標記的類型是：

無序列表

（1）編輯代碼

打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

、HTML與XHTML的區別

（1）在XHTML 中標簽名稱必須小寫，在HTML 中標簽名稱既可以小寫也可以大寫；

（2）在XHTML 中標簽必須封閉，在HTML中標簽可以不成對出現；

（3）在XHTML 中標簽必須嚴格嵌套，HTML對標簽嵌套沒有嚴格規定；

（4）在XHTML 中屬性名稱必須小寫，在HTML 中也一樣；

（5）在XHTML 中標簽必須用雙引號引起來，HTML中可以不用；

二、特殊符號

表示空格；
"表示雙引號；
&表示&符號；
>表示大于號>；
<表示小于號<；
&copy?表示版權符號?；

三、列表的使用

（1）無序列表

無序列表是一個項目列表，使用項目符號標記無序列表的項目，無序列表也就是沒有順序的列表；
無序列表的type屬性取值有三種，分別是circle（圓圈）、disc（實心圓點）、square（方塊）；

# 打印實心圓點的無序列表

<body>
 <ul type="disc">
 <li>第一</li>
 <li>第二</li>
 <li>第三</li>
 </ul>
</body>

（2）有序列表

有序列表也是由一個個列表項組成，列表想既可以使用數字標記，也可以使用字母標記；
有序列表的type屬性取值有5中，分別是1（數字）、i（小寫羅馬字母）、I（大寫羅馬字母）、a（小寫字母）、A（大寫字母）；

# 打印數字排序的有序列表

<body>
 <ol type="1">
 <li>我最愛椰奶</li>
 <li>第二愛可樂</li>
 <li>第三愛橙汁</li>
 </ol>
</body>

（3）定義列表

定義列表是當無序列表和有序列表都不適合時，通過自定義列表來完成自定義展示，所以定義列表不僅僅是一個項目列表，而是項目和注釋的組合；

<body>
 <dl>
 <dt>春曉</dt>
 <dd>春眠不覺曉，處處聞啼鳥</dd>
 <dd>夜來風雨聲，花落知多少</dd>
 </dl>
</body>

四、表格的使用

（1）表格的基本結構

單元格：表格的最小單位，一個或多個單元格縱橫排列組成了表格；
行：一個或多個單元格橫向堆疊形成了行；
列：一個或多個單元格縱向堆疊形成了列；

<table>
 <tr>
 <td>第一行第一列</td> 
 <td>第一行第二列</td> 
 <td>第一行第三列</td> 
 </tr>
 <tr>
 <td>第二行第一列</td> 
 <td>第二行第二列</td> 
 <td>第二行第三列</td> 
 </tr>
</table>

（2）表格的對齊方式

align屬性：left表示水平居左、center表示水平居中、right表示水平居右；
valign屬性：top表示垂直置頂、middle表示垂直居中、bottom表示垂直靠底；

（3）表格的其他屬性

th：一種特殊的單元格，加粗并居中；
caption：表格標題；
cellspacing：規定單元格之間的空間；
cellpadding：規定單元邊沿與其內容之間的空白；
colspan：表格跨列；
rowspan：表格跨行；

在線咨詢

上一篇：16.HTML 表單提交
下一篇：龍芯3A5000評測國產自主指令集架構實戰

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML之CSS列表&amp;lt;二&amp;gt;

列表項標記為圖像

列表 -簡寫屬性

所有的CSS列表屬性

不同的列表項標記

無序列表

您的項目需求

HTML之CSS列表<二>