自訂清單項目符號list-style-image詳解
- 云罗郡主轉載
- 2018-11-12 16:19:444949瀏覽
本篇文章帶給大家的內容是關於自訂清單項目符號list-style-image詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、list-style-image屬性
不管是有序列表，或是無序列表，都有它們自己的列表項符號。但是預設的列表項符號都比較醜，那如果我們想自訂列表項符號，那該怎麼實現呢？
在CSS中，我們可以使用list-style-image屬性來自訂清單項目符號。
語法：
list-style-image:url(图像地址);
說明：
圖片位址可以是相對位址，也可以是絕對位址。 【推薦閱讀：html中相對定位與絕對定位】
範例：
我們把下面這個小圖示自訂為列表項符號：
例如：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-image属性</title>
<style type="text/css">
ul{list-style-image:url("https://img.php.cn/upload/9-3-1.png");}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>效果如下：
以上就是對自訂清單項符號list-style-image詳解的全部介紹，如果您想了解更多有關Html5教程，請關注PHP中文網。
以上是自訂清單項目符號list-style-image詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：lvyestudy.com。如有侵權，請聯絡admin@php.cn刪除