HTML无序列表的制作_HTML ul标签无序列表与项目符号设置
无序列表通过ul和li标签创建，使用CSS的list-style-type可设置项目符号为disc、circle、square或none；去除默认符号后可用background-image自定义图标，需调整padding避免重叠，结合样式控制实现灵活布局。
在网页开发中，HTML无序列表（unordered list）用于展示没有特定顺序的项目内容，比如购物清单、功能特点或导航菜单。通过 ul 标签和 li 标签可以轻松创建无序列表。
基本语法：ul 和 li 标签的使用
无序列表由 开始，以 结束，每个列表项用 和 包裹。
-
- 表示每一个具体的列表项
- 不需要额外属性也能正常显示默认圆点符号
示例代码：
- 苹果
- 香蕉
- 橙子
设置项目符号样式：CSS 控制 list-style-type
默认情况下，浏览器会为 ul 列表添加实心圆点。可以通过 CSS 的 list-style-type 属性更改项目符号的形状。
- disc：实心圆点（默认）
- circle：空心圆圈
- square：实心方块
- none：不显示项目符号，常用于自定义图标或清除样式
示例：
- 首页
- 关于我们
- 联系方式
去除项目符号与自定义图标
若想完全去掉默认符号并使用图片作为项目标记，可结合 list-style 和 background-image 实现。
- 设置 list-style: none; 隐藏原有符号
- 使用 CSS background 属性添加自定义图像
- 调整 padding 或 margin 避免文字与图标重叠
示例 CSS：
ul.custom-list {
list-style: none;padding-left: 0;
}
ul.custom-list li {
background: url('icon.png') no-repeat left center;
padding-left: 20px;
line-height: 1.5;
}
基本上就这些。掌握 ul 和 li 的结构搭配 CSS 样式控制，就能灵活实现各种项目符号效果，满足不同页面设计需求。不复杂但容易忽略细节，比如清除默认边距或适配移动端显示。
