css中定义项目符号

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中定义项目符号是网页排版的重要部分,可以让网页更加美观,易读。CSS中通过list-style-type属性定义项目符号,可以取以下值:ul { list-style-type: disc; /

CSS中定义项目符号是网页排版的重要部分,可以让网页更加美观,易读。

CSS中通过list-style-type属性定义项目符号,可以取以下值:

ul {
  list-style-type: disc; /* 实心圆点 */
  list-style-type: circle; /* 空心圆点 */
  list-style-type: square; /* 实心方块 */
  list-style-type: decimal; /* 十进制数字,如1、2、3 */
  list-style-type: decimal-leading-zero; /* 带前导0的十进制数字,如01、02、03 */
  list-style-type: lower-roman; /* 小写罗马数字,如i、ii、iii */
  list-style-type: upper-roman; /* 大写罗马数字,如I、II、III */
  list-style-type: lower-alpha; /* 小写字母,如a、b、c */
  list-style-type: upper-alpha; /* 大写字母,如A、B、C */
} 

除了上述取值外,还可以使用list-style-image属性定义自定义的项目符号。该属性值为图片的URL,图片可以是png、gif、jpg等格式。

ul {
  list-style-image: url('bullet.png');
} 

如果希望项目符号缩进一段距离,可以使用list-style-position属性。该属性取值为insideoutside,决定项目符号是否在文本内容之外。默认为outside

ul {
  list-style-position: inside;
} 

上述属性可以单独定义,也可以一起定义:

ul {
  list-style: disc inside url('bullet.png');
} 

以上就是CSS中定义项目符号的方法,希望对您有所帮助。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中定义项目符号

粉丝

0

关注

0

收藏

0

已有0次打赏