溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS中list-style屬性的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
list-style是可以設置在列表中的各個項目的開頭的標記的屬性，標記除了實心圓或實心方塊的符號，也可以指定數字和字母等，當然也可以是圖像
通過設置list-style屬性，可以自動在列表項的前面顯示不同的標記，列表標記的設置有list-style-type和list-style-image兩個屬性。
list-style-type：將記號和字母設置為列表項標記。
list-style-image：將圖像設置為列表項標記。
list-style-type
list-style-type的形式如下
list-style-type：指定的符號值;
在lis-style - type上連續顯示●或■等符號或者1 , 2 , 3…a，b，c…等按照順序顯示的數字和字母等。
設置符號時
list-style-type: square;
如果輸入上述代碼，可以在開頭顯示實心方塊的符號。
如果輸入square部分的disc則顯示實心圓符號，如果輸入circle的話，會顯示空心圓符號。
設置連續的數字或字母時
list-style-type: decimal;
如果輸入上述代碼的話，從列表的最開始按1 , 2 , 3…順序顯示。
在decimal的部分輸入lower-alpha的情況下，會以小寫字母順序排序，輸入upper-alpha，以大寫字母順序排序，還有其他的順序排序，像是羅馬數字以及希臘字母排序。
list-style-image
list-style-image的形式如下
list-style-image : url("圖像路徑");首先將需要用到的圖像文件上傳到服務器上，輸入圖像的路徑被指定為標記。
圖像的路徑可以是絕對路徑也可以是相對路徑。
list-style-type和list-style-image在同時設定的情況下，lis-style-image是優先的。
下面我們來看具體的示例
代碼如下
HTML代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul class="list1"> <li>列表項目1</li> <li>列表項目2</li> <li>列表項目3</li> <li>列表項目4</li> <li>列表項目5</li> </ul> </body> </html>
我們首先來設置list-style-type屬性
設置符號
CSS代碼
.list1 {
list-style-type : circle;
}在瀏覽器上顯示效果如下：列表前有空心圓
設置連續的數字或字母
CSS代碼
.list1 {
list-style-type : lower-alpha;
}運行效果如下所示：列表前面按小寫字母順序排列
我們下面就來使用list-style-image屬性
HTML代碼與上述相同
CSS代碼如下所示
.list1 {
list-style-image : url("img/d.jpg");
}運行效果如下所示：列表前面有一個圖像
以上是CSS中list-style屬性的使用方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
