CSS中list-style屬性如何使用
- 不言原創
- 2018-12-10 11:34:056442瀏覽
list-style是可以設定在清單中的各個項目的開頭的標記的屬性，標記除了實心圓或實心方塊的符號，也可以指定數字和字母等，當然也可以是圖片，本篇文章就來跟大家介紹關於list-style屬性的用法。
透過設定list-style屬性，可以自動在清單項目的前面顯示不同的標記，清單標記的設定有CSS中list-style屬性如何使用和list- style-image兩個屬性。
CSS中list-style屬性如何使用：將記號和字母設定為清單項目標記。
CSS中list-style屬性如何使用：將圖像設定為清單項目標記。
CSS中list-style屬性如何使用
CSS中list-style屬性如何使用的形式如下
CSS中list-style屬性如何使用：指定的符号值;
在lis-style - type上連續顯示●或■等符號或1 , 2 , 3…a，b，c…等依序顯示的數字和字母等。
設定符號時
CSS中list-style屬性如何使用: square;
如果輸入上述程式碼，可以在開頭顯示實心方塊的符號。
如果輸入square部分的disc則顯示實心圓符號，如果輸入circle的話，會顯示空心圓符號。
設定連續的數字或字母時
CSS中list-style屬性如何使用: decimal;
如果輸入上述代碼的話，從列表的最開始按1 , 2 , 3…順序顯示。
在decimal的部分輸入lower-alpha的情況下，會以小寫字母順序排序，輸入upper-alpha，以大寫字母順序排序，還有其他的順序排序，像是羅馬數字以及希臘字母排序。
CSS中list-style屬性如何使用
CSS中list-style屬性如何使用的形式如下
CSS中list-style屬性如何使用 : url("图像路径");首先將需要用到的圖片檔案上傳到伺服器上，輸入影像的路徑被指定為標記。
影像的路徑可以是絕對路徑也可以是相對路徑。
CSS中list-style屬性如何使用和CSS中list-style屬性如何使用在同時設定的情況下，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>
#我們先來設定CSS中list-style屬性如何使用屬性
設定符號
CSS程式碼
.list1 {
CSS中list-style屬性如何使用 : circle;
}在瀏覽器上顯示效果如下：清單前有空心圓
設定連續的數字或字母
CSS代碼
.list1 {
CSS中list-style屬性如何使用 : lower-alpha;
}運行效果如下所示：列表前面按小寫字母順序排列
我們下面就來使用CSS中list-style屬性如何使用屬性
HTML程式碼與上述相同
CSS程式碼如下所示
.list1 {
CSS中list-style屬性如何使用 : url("img/d.jpg");
}運行效果如下所示：列表前面有一個圖像
以上是CSS中list-style屬性如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！