CSS 項目符號及編號
網頁設計 Web Design 常會使用無序列表 <ul> 和有序列表 <ol> 來呈現列舉的文案內容，例如商品特色、服務項目等。列表開頭的每個項目都會有一個項目符號或編號，用來區分不同的項目，也增加可讀性和美觀性。項目符號和編號的樣式是可以通過 CSS 來自定義，可以使用 list-style-type 屬性來指定不同的符號或編號類型可以增加更多的個性和創意。
如果項目符號 CSS list-style 定義式符號，其優先順序要比 list-style-type 高，段落縮排效果首先觀察元素 <ul> 及 <li> 預設的邊界值 margin 及 padding 是否符合需求，進一步調整以符合網頁中版面的設計。
CSS Customize List Style 自訂標號圖示
在網頁格式中客製化為 UL LI 項目清單前面加入圖示的各種 CSS 層疊樣式表顯示列表開頭自訂功能。
list-style:none;
list-style-type: none; /*沒有標誌，不使用編號*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
使用數字編號
list-style-type: decimal; /*阿拉伯數字*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: decimal-leading-zero; /*阿拉伯數字(十進制前置零)*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
自訂標號圖示
list-style-type: disc; /*實心圓形符號*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: circle; /*空心圓形符號*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: square; /*實心方形符號*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
使用英文字母
list-style-type: lower-alpha; /*小寫英文字母*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: upper-alpha; /*大寫英文字母*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: '# '; /*自定使用字元符*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: '\1F56A'; /*十六進位 Unicode 符號*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-image: url(images/tick.png); /*圖片式符號亦可使用 SVG 格式*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-image: linear-gradient(0deg, #ffe9d4, #cc6600); /*漸層符號*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
使用羅馬數字
list-style-type: lower-roman; /*小寫羅馬數字*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: upper-roman; /*大寫羅馬數字*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
使用特定文化格式
list-style-type: thai; /*泰語*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: lower-greek; /*希臘語*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: armenian; /*亞美尼亞*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: bengali; /*孟加拉*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: georgian; /*格魯吉亞語*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: kannada; /*卡納達語*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: oriya; /*奧里亞*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: devanagari; /*梵文*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-position 列表位置
CSS 指定列表的位置(預設值) outside 凸排在主容器的外面。inside 縮排項目清單中的符號於格內的位置。
list-style: decimal outside; /*縮寫方式*/list-style-type: decimal;
list-style-position: outside; /*凸排(預設值)*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼
list-style-type: decimal;
list-style-position: inside; /*縮排(符號於格內的位置內容再接在其後)*/- Canon 佳能相機
- FUJI 富士相機
- Nikon 尼康相機
- OLYMPUS 相機
- Panasonic 相機
- SONY 索尼