网页制作css 列表
CSS 列表样式
CSS 提供了多种方式来美化 HTML 列表（有序列表 <ol> 和无序列表 <ul>），包括修改列表项标记、调整间距、自定义图标等。
修改列表项标记类型
无序列表默认使用实心圆点（disc），可以通过 list-style-type 修改为其他样式：
ul {
list-style-type: square; /* 方块 */
}
ol {
list-style-type: upper-roman; /* 大写罗马数字 */
}可选值：disc | circle | square | decimal | lower-alpha | upper-roman 等。
使用自定义图片作为标记
通过 list-style-image 属性可替换为图片：
ul {
list-style-image: url('bullet.png');
}控制标记位置
list-style-position 决定标记位于列表项内容内部还是外部：
ul {
list-style-position: inside; /* 标记与内容对齐 */
}复合属性
list-style 可简写以上属性：
ul {
list-style: square inside url('bullet.png');
}移除默认样式
清除默认标记和缩进：
ul, ol {
list-style-type: none;
padding-left: 0;
}横向排列列表
通过 Flexbox 实现水平列表：
ul {
display: flex;
gap: 20px; /* 项间距 */
}自定义编号样式
对于有序列表，可使用 counter-reset 和 counter-increment 实现复杂编号：
ol {
counter-reset: section;
}
li::before {
counter-increment: section;
content: counters(section, ".") " "; /* 多级编号如 1.1 */
}悬停效果
为列表项添加交互效果：
li:hover {
background-color: #f0f0f0;
transform: translateX(5px);
}示例：带图标的横向导航
.nav-list {
display: flex;
gap: 30px;
list-style: none;
}
.nav-item::before {
content: "→";
margin-right: 8px;
color: #3498db;
}通过组合这些属性，可以创建适应不同设计需求的列表样式。
