HTML+CSS入门之网页设计中列表标记如何自定义样式-职坐标

HTML+CSS入门之网页设计中列表标记如何自定义样式

沉沙 2019-04-11 来源：阅读 1137 评论 0

摘要：本篇文章探讨了HTML+CSS入门之网页设计中列表标记如何自定义样式，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML+CSS入门之网页设计中列表标记<lu>如何自定义样式，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

HTML+CSS入门之网页设计中列表标记如何自定义样式

在CSS设计中，我们经常会用到列表，比如在导航栏。
而一般的列表出来后，总会在每一行的前边有一个小黑点。
如何个性化这个黑点呢？下边给出操作步骤

CSS中有一个list-style属性，可以对列表的样式进行控制，语法如下：

list-style:list-style-image || list-style-position || list-style-type

其中有三个参数：list-style-image 、 list-style-position 、 list-style-type

list-style-image ：这个是替代列表前的小圆点的。可以替代为没有 none 或者 url(图像地址)

list-style-position：当列表前有标记时（默认为小圆点），确定他的位置是突出到文字之前还是不突出，可以设置为 inside 或者 outside。

list-style-type：是系统默认的列表前标记的符号样式，以下给出参数列表

disc : 　CSS1　实心圆circle : 　CSS1　空心圆square : 　CSS1　实心方块decimal : 　CSS1　阿拉伯数字lower-roman : 　CSS1　小写罗马数字upper-roman : 　CSS1　大写罗马数字lower-alpha : 　CSS1　小写英文字母upper-alpha : 　CSS1　大写英文字母none : 　CSS1　不使用项目符号armenian : 　CSS2　传统的亚美尼亚数字cjk-ideographic : 　CSS2　浅白的表意数字georgian : 　CSS2　传统的乔治数字lower-greek : 　CSS2　基本的希腊小写字母hebrew : 　CSS2　传统的希伯莱数字hiragana : 　CSS2　日文平假名字符hiragana-iroha : 　CSS2　日文平假名序号katakana : 　CSS2　日文片假名字符katakana-iroha : 　CSS2　日文片假名序号lower-latin : 　CSS2　小写拉丁字母upper-latin : 　CSS2　大写拉丁字母

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！

web程序设计 web前端技术雷达 web前端知识体系

本文由 @沉沙发布于职坐标。未经许可，禁止转载。