@
目录
- 🐱 A. 基础列表样式
- 🌟 1. 默认样式
- 📝 无序列表
- 🔢 有序列表
- ✨ 2. 自定义项目符号
- 🌟 1. 默认样式
- 🚀 B. 高级布局与定位
- 🖼️ 3. 使用图片作为项目符号
- 🧹 4. 移除默认样式
- 🧭 5. 水平导航栏
- 💫 C. 创意与装饰效果
- 🔢 6. 计数器样式
- 🎨 7. 边框和背景.
- ✨ 8. 悬浮效果
- 📏 9. 间隔线和分隔符
- 🎭 10. 自定义项目符号(使用伪元素)
🐱 A. 基础列表样式
HTML 提供了两种基本列表类型:无序列表 (ul) 和有序列表 (ol)。
🌟 1. 默认样式
📝 无序列表
- 列表项 1
- 列表项 2
- 列表项 3
🔢 有序列表
- 第一步
- 第二步
- 第三步
<!-- 无序列表 -->
<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul><!-- 有序列表 -->
<ol><li>第一步</li><li>第二步</li><li>第三步</li>
</ol>
✨ 2. 自定义项目符号
<style>
.square {list-style-type: square;
}.circle {list-style-type: circle;
}.upper-roman {list-style-type: upper-roman;
}.lower-alpha {list-style-type: lower-alpha;
}
</style><ul class="square"><li>方形项目符号 (square)</li><li>列表项 2</li><li>列表项 3</li>
</ul><ul class="circle"><li>圆形项目符号 (circle)</li><li>列表项 2</li><li>列表项 3</li>
</ul><ol class="upper-roman"><li>大写罗马数字 (upper-roman)</li><li>列表项 II</li><li>列表项 III</li>
</ol><ol class="lower-alpha"><li>小写字母 (lower-alpha)</li><li>列表项 b</li><li>列表项 c</li>
</ol>
🚀 B. 高级布局与定位
通过 CSS 可以完全控制列表的布局,创建各种复杂的排列方式。
🖼️ 3. 使用图片作为项目符号
<style>.background-marker {padding-left: 2rem;list-style-type: none;}.background-marker li {padding-left: 2rem;background-image: url(cat.png);background-position: 0 0;background-size: 1.6rem;background-repeat: no-repeat;}
</style><ul class="background-marker"><li>使用 background-image (更灵活)</li><li>列表项 2</li><li>列表项 3</li>
</ul>
🧹 4. 移除默认样式
<style>
.no-style {list-style: none;padding-left: 0;
}
</style><ul><li>默认样式的列表项</li><li>列表项 2</li><li>列表项 3</li>
</ul><ul class="no-style"><li>移除了默认样式的列表项</li><li>列表项 2</li><li>列表项 3</li>
</ul>
🧭 5. 水平导航栏
<style>
.horizontal-nav ul {list-style: none;padding: 0;background-color: #343a40;border-radius: 4px;overflow: hidden;
}.horizontal-nav li {display: inline-block;
}.horizontal-nav a {display: block;color: white;text-decoration: none;padding: 12px 20px;transition: background-color 0.3s;
}.horizontal-nav a:hover {background-color: #495057;
}
</style><nav class="horizontal-nav"><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li></ul>
</nav>
💫 C. 创意与装饰效果
通过 CSS 创造性地装饰列表,增强视觉吸引力和用户体验。
🔢 6. 计数器样式
<style>
.counter-list {counter-reset: section;list-style: none;padding-left: 0;
}.counter-list li {margin-bottom: 10px;padding-left: 30px;position: relative;
}.counter-list li::before {counter-increment: section;content: counter(section);position: absolute;left: 0;top: 0;background-color: #4a6ee0;color: white;width: 22px;height: 22px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 0.8rem;font-weight: bold;
}
</style><ol class="counter-list"><li>使用 CSS 计数器的列表项</li><li>列表项内容可以很长,计数器会自动适应</li><li>第三个列表项</li><li>第四个列表项</li>
</ol>
🎨 7. 边框和背景.
- 带边框和阴影的列表项
- 悬停时有微妙的动画效果
- 第三个卡片式列表项
<style>
.bordered-list ul {list-style: none;padding: 0;
}.bordered-list li {padding: 12px 15px;margin-bottom: 8px;background-color: white;border: 1px solid #dee2e6;border-radius: 6px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);transition: transform 0.2s, box-shadow 0.2s;
}.bordered-list li:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style><ul class="bordered-list"><li>带边框和阴影的列表项</li><li>悬停时有微妙的动画效果</li><li>第三个卡片式列表项</li>
</ul>
✨ 8. 悬浮效果
- 悬停时背景色变化
- 悬停时左侧边框和缩进变化
- 第三个带有悬停效果的列表项
<style>
.hover-effects ul {list-style: none;padding: 0;
}.hover-effects li {padding: 10px 15px;margin-bottom: 5px;background-color: #f8f9fa;border-left: 4px solid transparent;transition: all 0.3s ease;
}.hover-effects li:hover {background-color: #e9ecef;border-left-color: #4a6ee0;padding-left: 20px;
}
</style><ul class="hover-effects"><li>悬停时背景色变化</li><li>悬停时左侧边框和缩进变化</li><li>第三个带有悬停效果的列表项</li>
</ul>
📏 9. 间隔线和分隔符
<style>
.dividers ul {list-style: none;padding: 0;border: 1px solid #dee2e6;border-radius: 6px;overflow: hidden;
}.dividers li {padding: 12px 15px;border-bottom: 1px solid #dee2e6;
}.dividers li:last-child {border-bottom: none;
}
</style><ul class="dividers"><li>带分隔线的列表项</li><li>每个列表项之间有清晰的边界</li><li>最后一个列表项没有底部分隔线</li>
</ul>
🎭 10. 自定义项目符号(使用伪元素)
<style>
.pseudo-marker ul {list-style: none;padding-left: 0;
}.pseudo-marker li {padding-left: 30px;position: relative;margin-bottom: 12px;
}.pseudo-marker li::before {content: "→";position: absolute;left: 0;color: #28a745;font-weight: bold;
}.pseudo-marker .star::before {content: "★";color: #ffc107;
}.pseudo-marker .check::before {content: "✓";color: #28a745;
}
</style><ul class="pseudo-marker"><li>使用箭头作为项目符号</li><li class="star">使用星号作为项目符号</li><li class="check">使用对勾作为项目符号</li>
</ul>