网页: 如何修改列表项 ul ＞ li 前小圆点的样式

我们在开发的过程中经常会遇到一些需求，比如说这边文章中的需求，我们需要修改ul > li 的默认样式。默认的 li 样式为：1、如何将ul > li 前小圆点修改成小方块呢？我们需要修改其相应的css属性 => list-style-type,我们需要将list-style-type的值设置为square。<!DOCTYPE html><html lang="e

酷伊奥

13974人浏览 · 2021-12-24 10:39:33

酷伊奥 · 2021-12-24 10:39:33 发布

我们在开发的过程中经常会遇到一些需求，比如说这边文章中的需求，我们需要修改ul > li 的默认样式。

默认的 li 样式为：

1、如何将ul > li 前小圆点修改成小方块呢？我们需要修改其相应的css属性 => list-style-type,

我们需要将list-style-type的值设置为square。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo - 修改li的小圆点样式</title>
  <style>
    .demo_box ul li {
      list-style-type: square;  /* 将li前面的小圆点修改为实心小正方形 */
    }
  </style>
</head>
<body>
  <div class="demo_box">
    <ul>
      <li>test001</li>
      <li>test002</li>
      <li>test003</li>
      <li>test004</li>
      <li>test005</li>
      <li>test006</li>
      <li>test007</li>
      <li>test008</li>
    </ul>
  </div>
</body>
</html>

实现的效果如下：

2、如何将ul > li 前小圆点修改成自定义的图片呢？

我们需要将list-style-type的值设置为none。然后添加一张背景图片，具体操作见下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo - 修改li的小圆点样式</title>
  <style>
    .demo_box ul{
      width: 20px;
      height: 20px;
    }
    .demo_box ul li {
      list-style-type: none; /* 先去除小圆点 */
      background: url(./蜡烛.png); /* 修改为背景图片 */
      background-size: 100% 100%; /* 设置背景图片100%填充 */
      padding-left: 20px; /* 设置字体向右移动20px，否者会遮挡到背景图片 */
    }
  </style>
</head>
<body>
  <div class="demo_box">
    <ul>
      <li>test001</li>
      <li>test002</li>
      <li>test003</li>
      <li>test004</li>
      <li>test005</li>
      <li>test006</li>
      <li>test007</li>
      <li>test008</li>
    </ul>
  </div>
</body>
</html>

实现的效果如下：

附：还有 li 的其他用法如下：

1、list-style-type属性：其全部的可选值如下
a、none不使用项目符号
b、disc实心圆，默认值
c、circle空心圆
d、square实心方块
e、decimal阿拉伯数字
f、lower-roman小写罗马数字
g、upper-roman大写罗马数字
h、lower-alpha小写英文字母
i、upper-alpha大写英文字母

2、ist-style-position属性：用于设置列表项前的符号根据列表文字的排列方式，
a、outside 列表项目符号在文本以外，文本不根据标记对齐。
b、inside 列表项目符号在文本以内，文本根据标记对齐。