图文并茂展示CSS li 排版大合集，总有一款是你刚好需要的

@

目录

• 🐱 A. 基础列表样式
  • 🌟 1. 默认样式
    • 📝 无序列表
    • 🔢 有序列表
  • ✨ 2. 自定义项目符号
• 🚀 B. 高级布局与定位
  • 🖼️ 3. 使用图片作为项目符号
  • 🧹 4. 移除默认样式
  • 🧭 5. 水平导航栏
• 💫 C. 创意与装饰效果
  • 🔢 6. 计数器样式
  • 🎨 7. 边框和背景.
  • ✨ 8. 悬浮效果
  • 📏 9. 间隔线和分隔符
  • 🎭 10. 自定义项目符号（使用伪元素）

🐱 A. 基础列表样式

HTML 提供了两种基本列表类型：无序列表 (ul) 和有序列表 (ol)。

🌟 1. 默认样式

📝 无序列表

• 列表项 1
• 列表项 2
• 列表项 3

🔢 有序列表

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>