資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在HTML中建立影像專案符號
概述
在HTML中，我們可以建立兩種型別的列表：有序列表和無序列表。有序列表使用編號、字母或羅馬數字，而無序列表使用點作為專案符號。有時我們需要將這些專案符號更改為影像。這可以使用層疊樣式表 (CSS) 的 `list-style-image` 屬性來實現。透過使用任何影像URL或影像地址，我們可以將其設定為 `list-style-image` 屬性的值，該值將顯示在列表項之前的專案符號。
語法
CSS樣式屬性中使用的語法如下：
list-style-image: url();
演算法
步驟1 − 在文字編輯器中建立一個包含HTML基本結構的HTML檔案。
步驟2 − 建立一個HTML `ol`容器來建立列表項。
<ol></ol>
步驟3 − 使用`li`標籤在`ol`標籤中新增列表項。
<ol> <li>Penetration Testing</li> <li>Blackbox testing</li> <li>Whitebox testing</li> <li>Computer System Security</li> </ol>
步驟4 − 現在透過將`style`標籤新增到HTML的`head`標籤中來建立內部CSS。
步驟5 − 現在使用`list-style-image`屬性設定`ol`標籤的樣式，併為其設定URL值。
ol {
list-style-image: url("https://tutorialspoint.tw/static/images/cyber-security.svg");
}
步驟6 − 影像作為專案符號已成功建立。
示例
在這個示例中，我們使用有序列表建立了一個列表項，並使用列表樣式影像來製作影像專案符號。
<html>
<head>
<title>image as bullet</title>
<style>
ol {
list-style-image: url("https://tutorialspoint.tw/static/images/cyber-security.svg");
}
</style>
</head>
<body>
<h3>Image list items</h3>
<ol>
<li>Penetration Testing</li>
<li>Blackbox testing</li>
<li>Whitebox testing</li>
<li>Computer System Security</li>
</ol>
</body>
</html>
演算法
步驟1 − 在文字編輯器中建立一個包含HTML基本結構的HTML檔案。
步驟2 − 現在建立一個HTML無序列表`ul`容器來建立列表項。
<ul></ul>
步驟3 − 使用`li`標籤在`ul`標籤中新增列表項。
<ul> <li>Penetration Testing</li> <li>Blackbox testing</li> <li>Whitebox testing</li> <li>Computer System Security</li> </ul>
步驟4 − 現在透過將`style`標籤新增到HTML的`head`標籤中來建立內部CSS。
步驟5 − 現在使用`list-style-image`屬性設定`ul`標籤的樣式，併為其設定URL值。
ul {
list-style-image: url("https://tutorialspoint.tw/static/images/cyber-security.svg");
}
步驟6 − 影像作為專案符號已成功建立。
示例
在這個示例中，我們使用無序列表（<ul>）建立了列表項，並使用列表樣式影像來製作影像專案符號。
<html>
<head>
<title>image as bullet ul</title>
<style>
ul {
list-style-image: url("https://tutorialspoint.tw/static/images/cyber-security.svg");
}
</style>
</head>
<body>
<h3>Image list items ul</h3>
<ul>
<li>Penetration Testing</li>
<li>Blackbox testing</li>
<li>Whitebox testing</li>
<li>Computer System Security</li>
</ul>
</body>
</html>
下圖顯示了上述示例的輸出，如下圖所示，列表項的專案符號用紅色矩形標記。您可以看到，專案符號不是普通的點或字母，而是使用CSS屬性匯入的影像。
結論
如上例所示，我們使用了有序列表，我們也可以使用無序列表在專案符號中新增影像。這些影像將替換預設專案符號列表中的專案符號。這些專案符號影像可以改善使用者介面。您應該只選擇png圖示影像或任何較小的影像，如果您要使用帶有背景或較大的影像，它會使介面難看。
2K+ 次瀏覽
