資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究如何使用CSS建立沒有專案符號的無序列表？
有序或無序列表都會分別帶有數字或專案符號。這是使用 list-style-type 屬性設定的網頁列表樣式。讓我們看看如何建立沒有專案符號的無序列表。
建立無序列表
使用 <ul> 元素建立無序列表 −
<ul> <li>Tiger</li> <li>Giraffe</li> <li>Lion</li> <li>Panther</li> <li>Jaguar</li> </ul>
設定列表樣式並刪除專案符號
將 list-style-type 屬性設為 none 可從無序列表中刪除專案符號 −
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 18px;
font-weight: bold;
}
示例
若要使用 CSS 建立沒有專案符號的無序列表，程式碼如下 −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Remove bullets from ul example</h1>
<ul>
<li>Tiger</li>
<li>Giraffe</li>
<li>Lion</li>
<li>Panther</li>
<li>Jaguar</li>
</ul>
</body>
</html>
在列表中用影像替換專案符號
在列表中使用 list-style-image 可將影像設為列表項標記專案符號的位置。若要將影像設為標記的位置，請對 list-style 屬性使用 url()。我們已設定一個專案符號影像 −
ul {
list-style: url("https://tutorialspoint.tw/images/clipart/bullet/bullet2.gif");
}
示例
讓我們看看示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: url("https://tutorialspoint.tw/images/clipart/bullet/bullet2.gif");
}
</style>
</head>
<body>
<h1>Sports</h1>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
</ul>
</body>
</html>
更新於： 14-Dec-2023
521 次瀏覽
廣告