html黑点如何设置_HTML列表黑点（li bullet）样式控制方法-html教程-PHP中文网

html黑点如何设置_HTML列表黑点（li bullet）样式控制方法

星夢妙者

发布： 2025-11-06 14:46:02

原创

345人浏览过

可通过CSS自定义HTML列表项目符号样式：1. 用list-style-type改变形状（如square、circle）；2. 设置list-style: none后，使用::before伪元素创建自定义样式（如红色圆点）；3. 使用background-image将图片设为项目符号，并调整背景尺寸与位置；4. 调整padding-left或margin-left控制文本缩进，确保布局美观。

html黑点如何设置_html列表黑点（li bullet）样式控制方法

HTML列表中的黑点（也叫项目符号或li bullet）默认由浏览器样式控制，通常是一个实心圆点。如果想自定义这个黑点的样式，比如改变颜色、大小、形状或用图片代替，可以通过CSS来实现。

1. 使用 list-style-type 修改黑点形状

通过 list-style-type 属性可以更改li前面的符号类型：

disc：实心圆点（默认）
circle：空心圆圈
square：实心方块
none：无项目符号

示例代码：

<ul style="list-style-type: square;">
  <li>第一项</li>
  <li>第二项</li>
</ul>

登录后复制

2. 去掉默认黑点并自定义样式

如果想完全控制黑点外观，建议先移除默认符号，再用CSS伪元素或背景图实现自定义效果。

立即学习“前端免费学习笔记（深入）”；

常用方法是设置 list-style: none，然后使用 ::before 或背景图像添加新“黑点”。

示例：用CSS创建红色大圆点

造点AI

夸克 · 造点AI

325

查看详情

<style>
  ul.custom {
    list-style: none;
    padding-left: 20px;
  }
  ul.custom li {
    position: relative;
  }
  ul.custom li::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 12px;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    }
</style>

<ul class="custom">
  <li>自定义红点列表项</li>
  <li>另一个红点项</li>
</ul>

登录后复制

3. 使用图片作为项目符号

可以用 background-image 设置图片代替黑点。

示例：

<style>
  ul.img-bullet {
    list-style: none;
    padding-left: 24px;
  }
  ul.img-bullet li {
    background: url('dot.png') no-repeat left center;
    background-size: 8px 8px;
    line-height: 1.5;
    padding-left: 12px;
  }
</style>

登录后复制