在HTML页面布局中，无序列表常用于展示没有先后顺序的并列内容，比如商品分类、功能导航等场景，而ul标签就是实现无序列表的核心标签。很多新手开发者刚开始接触时，不清楚完整的制作流程，也不了解怎么修改默认的项目符号。下面我们就一步步讲解相关操作。
一、ul无序列表的基础制作
无序列表的基础结构非常简洁，外层使用<ul>标签包裹，内部每一个列表项都用<li>标签定义，不需要额外设置，浏览器就会默认给每个列表项添加实心圆点的项目符号。
下面是一个最基础的无序列表示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基础无序列表示例</title>
</head>
<body>
<ul>
<li>前端开发</li>
<li>后端开发</li>
<li>移动端开发</li>
<li>测试开发</li>
</ul>
</body>
</html>上面的代码运行后，四个列表项前面都会出现默认的实心圆点，这就是最基础的无序列表效果。
二、修改ul标签的项目符号样式
默认的实心圆点可能不符合页面的设计需求，这时候可以通过CSS的list-style-type属性调整项目符号的样式，常见的可选值有以下几种：
- disc：默认值，实心圆点
- circle：空心圆圈
- square：实心方块
- none：不显示项目符号
我们可以通过以下代码给ul标签设置不同的项目符号：
/* 设置为空心圆圈 */
ul.circle-style {
list-style-type: circle;
}
/* 设置为实心方块 */
ul.square-style {
list-style-type: square;
}
/* 隐藏项目符号 */
ul.none-style {
list-style-type: none;
}对应的HTML调用方式如下：
<!-- 空心圆圈项目符号 -->
<ul class="circle-style">
<li>选项一</li>
<li>选项二</li>
</ul>
<!-- 实心方块项目符号 -->
<ul class="square-style">
<li>选项一</li>
<li>选项二</li>
</ul>
<!-- 无项目符号 -->
<ul class="none-style">
<li>选项一</li>
<li>选项二</li>
</ul>三、自定义图片作为项目符号
如果默认的几种符号样式都不满足需求，还可以用list-style-image属性自定义图片作为项目符号，具体实现代码如下：
ul.custom-style {
/* 自定义项目符号图片，路径根据实际文件位置调整 */
list-style-image: url("icon.png");
/* 可选：调整列表项的左边距，避免图片和文字太挤 */
padding-left: 20px;
}对应的HTML只需要给ul添加对应的class即可：
<ul class="custom-style">
<li>自定义图标项一</li>
<li>自定义图标项二</li>
</ul>四、注意事项
在实际开发中，需要注意几个常见问题：首先要保证li标签直接放在ul标签内部，不要嵌套其他无关标签，否则可能导致样式异常；其次如果同时设置了list-style-type和list-style-image，list-style-image的优先级更高，会覆盖list-style-type的效果；最后如果要重置所有ul的默认样式，可以直接给全局ul设置list-style-type: none，再根据需要单独添加样式。
HTMLul标签无序列表css_list-style-type修改时间：2026-05-31 22:26:34