网页制作css 列表
使用 CSS 美化列表
在网页制作中，CSS 可以用来美化 HTML 列表（有序列表 <ol> 和无序列表 <ul>），使其更符合设计需求。以下是几种常见的方法和技巧。
修改列表样式类型
通过 list-style-type 属性可以改变列表项的标记样式。例如：
ul {
list-style-type: square; /* 无序列表标记为方块 */
}
ol {
list-style-type: upper-roman; /* 有序列表标记为大写罗马数字 */
}其他可选值包括 disc（默认实心圆点）、circle（空心圆）、decimal（数字）、lower-alpha（小写字母）等。
自定义列表标记图片
使用 list-style-image 属性可以将列表标记替换为自定义图片：
ul {
list-style-image: url('bullet.png');
}移除列表标记
如果需要完全移除列表标记，可以设置 list-style-type 为 none，并调整内边距：
ul {
list-style-type: none;
padding-left: 0; /* 可选，移除默认的左内边距 */
}水平排列列表
通过 display: inline 或 display: flex 可以将列表项水平排列：
ul.horizontal {
display: flex;
list-style-type: none;
gap: 20px; /* 设置列表项间距 */
}添加悬停效果
为列表项添加悬停效果可以提升交互体验：
ul li:hover {
background-color: #f0f0f0;
cursor: pointer;
}嵌套列表样式
嵌套列表可以通过子选择器单独设置样式：
ul ul {
list-style-type: circle; /* 二级列表标记为空心圆 */
margin-left: 20px; /* 缩进嵌套列表 */
}使用伪元素自定义标记
通过 ::before 伪元素可以实现更灵活的标记样式：
ul.custom li::before {
content: "→ "; /* 添加箭头作为标记 */
color: #ff5733;
}这些方法可以根据具体需求组合使用，以实现多样化的列表样式。
