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 索尼