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