盤點HTML中常見的Ul Ol 列表和常見的列表標記圖標
作者： IT共享者
CSS列表屬性作用如下：設置不同的列表項標記為有序列表。設置不同的列表項標記為無序列表。設置列表項標記為圖像。
一、概念
CSS列表屬性作用如下：設置不同的列表項標記為有序列表。設置不同的列表項標記為無序列表。設置列表項標記為圖像。
二、什么是種類型的列表?
種類型的列表：
- ul無序列表 - 列表項標記用特殊圖形(如小黑點、小方框等)
- ol有序列表 - 列表項的標記有數(shù)字或字母。
使用CSS，可以列出進一步的樣式，并可用圖像作列表項標記。
三、常見的ul ol列表項標記
list-style-type屬性指定列表項標記的類型是：
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- ul.a {
- list-style-type: circle;
- }
- ul.b {
- list-style-type: square;
- }
- ol.c {
- list-style-type: upper-roman;
- }
- ol.d {
- list-style-type: lower-alpha;
- }
- </style>
- </head>
- <body>
- <p>Example of unordered lists:</p>
- <ul class="a">
- <li>語文</li>
- <li>數(shù)學</li>
- <li>英語</li>
- </ul>
- <ul class="b">
- <li>語文</li>
- <li>數(shù)學</li>
- <li>英語</li>
- </ul>
- <p>Example of ordered lists:</p>
- <ol class="c">
- <li>語文</li>
- <li>數(shù)學</li>
- <li>英語</li>
- </ol>
- <ol class="d">
- <li>語文</li>
- <li>數(shù)學</li>
- <li>英語</li>
- </ol>
- </body>
- </html>
四、ul ol列表項標記的圖像瀏覽器兼容性解決方案
要指定列表項標記的圖像，使用列表樣式圖像屬性list-style-image。
在所有的瀏覽器，下面的例子會顯示圖像標記：
- ul
- {
- list-style-type: none;
- padding: 0px;
- margin: 0px;
- }
- ul li
- {
- background-image: url(sqpurple.gif);
- background-repeat: no-repeat;
- background-position: 0px 5px;
- padding-left: 14px;
- }
代碼解析
- ul:
- 設置列表樣式類型為沒有刪除列表項標記
- 設置填充和邊距0px(瀏覽器兼容性)
- ul中所有l(wèi)i:
- 設置圖像的URL，并設置它只顯示一次(無重復)
- 您需要的定位圖像位置(左0px和上下5px)
- 用padding-left屬性吧文本置于列表中
五、拓展
ul ol列表縮寫屬性
在單個屬性中可以指定所有的列表屬性。這就是所謂的縮寫屬性。
為列表使用縮寫屬性，列表樣式屬性設置如下：
- ul
- {
- list-style: square url("sqpurple.gif");
- }
如果使用縮寫屬性值的順序是：
①list-style-type 。②list-style-position。 ③list-style-image。
如果上述值丟失一個，其余仍在指定的順序，就沒關系。
六、總結
本文基于HTML基礎，本文主要介紹了HTML常見的ul ol 列表、常見的列表標記圖標。對于瀏覽器兼容列表圖像的問題，提供了一系列的解決方案，最后擴展相關知識，優(yōu)化代碼，希望能夠幫助你學習。
本文轉載自微信公眾號「IT共享者」，可以通過以下二維碼關注。轉載本文請聯(lián)系IT共享者公眾號。
責任編輯：武曉燕
來源：
IT共享者
