資料結構
網路連線
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何利用 CSS 在列表中將圖片作為列表專案標記新增進去？
CSS，即級聯樣式表的縮寫，是一種結構簡單的語言，可以更輕鬆地呈現網頁。藉助 CSS 就可以對網頁應用樣式。在本文中，我們將瞭解如何利用 CSS 將圖片作為列表中列表專案的標記新增進去。
方法
我們將利用列表樣式影像屬性來完成這項任務。利用列表樣式影像屬性，使用者可以將圖片設定為列表中列表專案的標記。
語法
list-style-image: none | url | initial | inherit;
示例
步驟 1 − 首先，我們將定義 HTML 程式碼。
<!DOCTYPE html>
<html>
<head>
<title>How to add an image as the list-item marker in a list using CSS?</title>
</head>
<body>
<h4>How to add an image as the list-item marker in a list using CSS?</h4>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
步驟 2 − 現在，我們將新增 CSS 邏輯。
<style>
ul{
list-style-image: url("https://tutorialspoint.tw/images/logo.png");
padding-left: 350px;
}
</style>
以下是完整程式碼 −
<!DOCTYPE html>
<html>
<head>
<title>How to add an image as the list-item marker in a list using CSS?</title>
<style>
ul {
list-style-image: url("https://tutorialspoint.tw/images/logo.png");
padding-left: 350px;
}
</style>
</head>
<body>
<h4>How to add an image as the list-item marker in a list using CSS?</h4>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何藉助 CSS 中的列表樣式影像屬性，將圖片作為列表中列表專案的標記。
更新時間： 2023-03-30
996 次瀏覽
廣告