无序列表通过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 属性更改项目符号的形状。
立即学习“前端免费学习笔记(深入)”;
功能列表:底层程序与前台页面分离的效果,对页面的修改无需改动任何程序代码。完善的标签系统,支持自定义标签,公用标签,快捷标签,动态标签,静态标签等等,支持标签内的vbs语法,原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统,可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率,稳定性和容错性,即使模版中有错误的标签也不会影响页面的显示。所有的标
- 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 样式控制,就能灵活实现各种项目符号效果,满足不同页面设计需求。不复杂但容易忽略细节,比如清除默认边距或适配移动端显示。










