[分享]Css中对列表的样式

Css中对列表的样式有很多种，可以通过样式来美化列表的展现效果。以下是对常用的几种列表样式进行介绍。 ul { liststyletype: disc; / 实心圆点 / liststyletype:...

Css中对列表的样式有很多种，可以通过样式来美化列表的展现效果。以下是对常用的几种列表样式进行介绍。

 ul {
    list-style-type: disc;  /* 实心圆点 */
    list-style-type: circle;  /* 空心圆点 */
    list-style-type: square;  /* 实心正方形 */
    list-style-type: none;  /* 不显示符号 */
  } 

上述样式中，对于有符号的列表，可以通过设置不同的list-style-type来修改符号的样式。分别是实心圆点、空心圆点、实心正方形和不显示符号。也可以通过list-style-image属性来自定义列表的符号，如下：

 ul {
    list-style-image: url('image.png'); /* 使用自定义图片作为符号 */
  } 

另外，还可以对数字列表进行美化，如下：

 ol {
    list-style-type: decimal;  /* 数字列表 */
  }
  ol li { 
    margin-left: 20px;  /* 控制锦囊左侧的距离  */
  }
  ol li:before {
    content: ""; /* before伪元素生成标签前的内容 */ 
    display: inline-block; /* 生成的标签必须是行内元素或者行内块元素 */
    width: 16px; /* 需要占用16px */
    height: 16px; /* 占用16px */
    margin-right: 10px; /* 控制锦囊和数字之间的距离 */
    background: #ff3300; /* 背景颜色 */
    border-radius: 50%; /* 圆形 */
    text-align: center; /* 文字垂直居中 */
    line-height: 16px; /* 标签文本（锦囊）垂直居中 */
    font-size: 10px; /* 字体大小 */
    color: #fff; /* 字体颜色 */
    font-weight: bold; /* 字体加粗 */
  } 

上述样式中，我们可以使用before伪元素来生成锦囊标签，通过控制before元素的样式来实现美化数字列表。这种方式相比较于使用图片，更为灵活，所以在实际开发中更为常用。