在 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>
輸出
這會產生以下輸出 −
廣告