訂閱
糾錯(cuò)
加入自媒體

什么是種類型的列表?常見的ul ol列表項(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(chǎn) {                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>
       <o(jì)l class="c">            <li>語文</li>            <li>數(shù)學(xué)</li>            <li>英語</li>        </ol>
       <o(jì)l 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)。對于瀏覽器兼容列表圖像的問題,提供了一系列的解決方案,最后擴(kuò)展相關(guān)知識,優(yōu)化代碼,希望能夠幫助你學(xué)習(xí)。


聲明: 本文由入駐維科號的作者撰寫,觀點(diǎn)僅代表作者本人,不代表OFweek立場。如有侵權(quán)或其他問題,請聯(lián)系舉報(bào)。

發(fā)表評論

0條評論,0人參與

請輸入評論內(nèi)容...

請輸入評論/評論長度6~500個(gè)字

您提交的評論過于頻繁,請輸入驗(yàn)證碼繼續(xù)

  • 看不清,點(diǎn)擊換一張  刷新

暫無評論

暫無評論

人工智能 獵頭職位 更多
掃碼關(guān)注公眾號
OFweek人工智能網(wǎng)
獲取更多精彩內(nèi)容
文章糾錯(cuò)
x
*文字標(biāo)題:
*糾錯(cuò)內(nèi)容:
聯(lián)系郵箱:
*驗(yàn) 證 碼:

粵公網(wǎng)安備 44030502002758號