用CSS樣式列表
列表是許多網頁中非常重要的一部分。
CSS可以使用多個屬性來設置樣式。
list-style-type
用於設置列表要使用的預定義標記:
li {
list-style-type: square;
}
我們有很多可能的值,您可以在這裡看到https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type並附有外觀示例。一些最受歡迎的是disc
,circle
,square
和none
。
list-style-image
當預定義的標記不合適時,用於將自定義圖像用作標記:
li {
list-style-image: url(list-image.png);
}
list-style-position
讓您添加標記outside
(默認)或inside
列表內容中的內容,在頁面流中而不是在頁面流之外
li {
list-style-position: inside;
}
這list-style
簡寫屬性使我們可以在同一行中指定所有這些屬性:
li {
list-style: url(list-image.png) inside;
}
免費下載我的CSS手冊
更多CSS教程:
- Flexbox指南
- CSS網格教程
- CSS變量(自定義屬性)
- PostCSS簡介
- CSS保證金屬性
- 如何使用CSS將元素居中
- CSS系統字體
- 如何使用樣式打印HTML
- CSS過渡入門指南
- CSS動畫教程
- CSS簡介
- CSS指南
- 如何使用PurgeCSS和PostCSS設置Tailwind
- 尾風備忘單
- 如何使用CSS連續旋轉圖像
- 使用CSS使表響應
- 如何通過二等分來調試CSS
- CSS選擇器
- CSS級聯
- CSS特異性
- CSS屬性選擇器
- CSS顏色
- CSS單位
- CSS url()
- CSS排版
- CSS Box模型
- CSS位置屬性
- CSS媒體查詢和響應式設計
- CSS功能查詢
- CSS轉換
- 如何使用CSS設置列表樣式
- CSS供應商前綴
- CSS繼承
- CSS偽類
- CSS偽元素
- 用CSS樣式化HTML表
- CSS Display屬性
- CSS calc()函數
- CSS邊框
- 使用@import導入CSS文件
- CSS錯誤處理
- CSS過濾器
- CSS Box大小
- CSS背景
- CSS註釋
- CSS字體
- CSS填充
- CSS float屬性和清除
- CSS規範化
- CSS z-index屬性
- 如何使用CSS禁用文本選擇
- 如何使用CSS將項目放在其容器的底部
- 如何使用CSS反轉顏色
- CSS中的響應式前置標籤
- 自適應YouTube視頻嵌入
- 響應式設計的良好CSS斷點值是多少?
- 如何在Flexbox中對齊中心