如何使用 CSS 设置列表样式?

77次阅读
没有评论

在CSS中,可以使用list-style属性设置列表样式,该属性有三个子属性:list-style-type、list-style-image和list-style-position。

  1. list-style-type属性用于设置列表项的标志类型,常见的类型有:
  • disc:默认类型,实心圆点
  • circle:空心圆点
  • square:实心方块
  • decimal:数字
  • lower-alpha:小写字母
  • upper-alpha:大写字母
  • lower-roman:小写罗马数字
  • upper-roman:大写罗马数字

示例代码:

ul {
list-style-type: circle; /* 设置为空心圆点 */
}
ol {
list-style-type: lower-alpha; /* 设置为小写字母 */
}
  1. list-style-image属性用于设置自定义标志,可以将一个图片作为标志。示例代码:
ul {
list-style-image: url('list-image.png'); /* 使用图片作为标志 */
}
  1. list-style-position属性用于设置标志的位置,有两个选项:
  • inside:标志在文本内部,即标志和文本在同一行
  • outside:标志在文本外部,即标志和文本分别在两行

示例代码:

ul {
list-style-position: inside; /* 标志在文本内部 */
}

举个例子,假设我们要将一个无序列表的标志改为实心方块,并将标志放在文本内部,代码如下:

ul {
list-style-type: square;
list-style-position: inside;
}

 

正文完
 
评论(没有评论)