訂閱
糾錯
加入自媒體

什么是種類型的列表?常見的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)化代碼,希望能夠幫助你學習。


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

發(fā)表評論

0條評論,0人參與

請輸入評論內容...

請輸入評論/評論長度6~500個字

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

暫無評論

暫無評論

人工智能 獵頭職位 更多
掃碼關注公眾號
OFweek人工智能網
獲取更多精彩內容
文章糾錯
x
*文字標題:
*糾錯內容:
聯(lián)系郵箱:
*驗 證 碼:

粵公網安備 44030502002758號