css 无序列表变成方块

无序列表是我们在网页中常用的一个元素，它可以用于展示项目列表、特色服务、产品特点等等。

默认情况下，无序列表的每项内容都是一个圆形标志点。但是有时候，我们可能想要将这些标志点改成方块，那么该怎么做呢？

ul {
      list-style-type: square;
}

上面这段CSS代码就是将无序列表的标志点改成方块的方法。我们只需要在ul标签的CSS样式中添加list-style-type属性，并将其值设置为square即可。

有时候，我们还可以将无序列表的标志点改成圆角方块，方法也很简单：

ul {
      list-style-type: none;
}
li {
      padding-left: 20px;
      position: relative;
}
li:before {
      content: "\25A0";
      position: absolute;
      left: 0;
      top: 0;
}
    

上面这段代码的作用就是将无序列表的标志点改成圆角方块。首先，我们将列表的标志点设为none，然后为每一个列表项添加一个:before伪元素，再在其中添加一个HTML字符实体\25A0代表一个黑色方块，最后通过CSS属性position和left、top设置方块位置即可。

通过以上两种方法，我们可以轻易地将无序列表的标志点改成方块或圆角方块，让网页更加美观和个性化。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！