什么是種類型的列表?常見的ul ol列表項標記是什么?
一、概念
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)化代碼,希望能夠幫助你學習。
請輸入評論內容...
請輸入評論/評論長度6~500個字
最新活動更多
-
即日-11.13立即報名>>> 【在線會議】多物理場仿真助跑新能源汽車
-
11月28日立即報名>>> 2024工程師系列—工業(yè)電子技術在線會議
-
12月19日立即報名>> 【線下會議】OFweek 2024(第九屆)物聯(lián)網產業(yè)大會
-
即日-12.26火熱報名中>> OFweek2024中國智造CIO在線峰會
-
即日-2025.8.1立即下載>> 《2024智能制造產業(yè)高端化、智能化、綠色化發(fā)展藍皮書》
-
精彩回顧立即查看>> 【限時免費下載】TE暖通空調系統(tǒng)高效可靠的組件解決方案
推薦專題
- 高級軟件工程師 廣東省/深圳市
- 自動化高級工程師 廣東省/深圳市
- 光器件研發(fā)工程師 福建省/福州市
- 銷售總監(jiān)(光器件) 北京市/海淀區(qū)
- 激光器高級銷售經理 上海市/虹口區(qū)
- 光器件物理工程師 北京市/海淀區(qū)
- 激光研發(fā)工程師 北京市/昌平區(qū)
- 技術專家 廣東省/江門市
- 封裝工程師 北京市/海淀區(qū)
- 結構工程師 廣東省/深圳市