在 CSS 中使用圖片作為列表標記


CSS list-style-image 屬性用於設定影像作為列表項的標記。

語法

CSS list-style-image 屬性的語法如下 −

Selector {
   list-style-image: /*value*/
}

示例

以下示例說明了 CSS list-style-image 的屬性 −

 線上示例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   width: 150px;
   list-style-image: url("https://tutorialspoint.tw/images/Servlets.png");
   background: goldenrod;
}
li {
   text-align: center;
   background: lavenderblush;
   margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Servlets</h2>
<ul>
<li>Client Request</li>
<li>Server Response</li>
<li>Cookies Handling</li>
<li>Session Tracking</li>
</ul>
</body>
</html>

輸出

這會產生以下輸出 −

示例

 線上示例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   margin-left: 20px;
   list-style-image: url("https://tutorialspoint.tw/images/hibernate.png");
}
li {
   font-size: 1.3em;
   text-align: center;
   background: burlywood;
   margin: 3px;
}
</style>
</head>
<body>
<h2>Hibernate Tutorial</h2>
<ul>
<li>Sessions</li>
<li>Persistent Class</li>
<li>Mapping Files</li>
<li>Mapping Types</li>
<li>Annotations</li>
</ul>
</body>
</html>

輸出

這會產生以下輸出 −

更新時間: 06-01-2020

754 次瀏覽

開啟你的 職業生涯

完成該課程,獲得認證

開始
廣告