当前位置: 首页 > news >正文

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

@

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

🐱 A. 基础列表样式

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

🌟 1. 默认样式

image

📝 无序列表

  • 列表项 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. 自定义项目符号

image

<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. 使用图片作为项目符号

image

<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. 移除默认样式

image

<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. 水平导航栏

image

<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. 计数器样式

image

<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. 边框和背景.

image

  • 带边框和阴影的列表项
  • 悬停时有微妙的动画效果
  • 第三个卡片式列表项
<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. 悬浮效果

image

  • 悬停时背景色变化
  • 悬停时左侧边框和缩进变化
  • 第三个带有悬停效果的列表项
<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. 间隔线和分隔符

image

<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. 自定义项目符号(使用伪元素)

image

<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>
http://www.hskmm.com/?act=detail&tid=32004

相关文章:

  • 10.15 闲话
  • 函数的类型注释器
  • 如何手动构建一个线性回归模型
  • DshanPI-A1 RK3576 gmrender-resurrect B站投屏
  • 组件级异步加载与预加载策略
  • 好记性不如烂笔头之C语言优先级查询
  • SAM系列论文浅析
  • 2023 ICPC Xian
  • 2025-10-15 ?
  • 为什么一部电影,一本书一看就喜欢
  • 20251015打卡
  • 实验一 现代C++编程初体验
  • p66页2
  • 牛客119232 牛客2025秋季算法编程训练联赛1-提升组 游记
  • BroadcastChannel跨页签通信复盘总结
  • 02020510 EF Core高级10-构建动态表达式树、不推荐动态构建表达式树、动态构建IQuerable、动态构建字符串
  • 02020601 Web API01-顶级语句、全局using指令、可空类型、record类型(自动重写ToString、Equals)、init和private属性
  • OI 生涯回忆录
  • libaom 在ubuntu 上用鸿蒙OHOS编译
  • Aexlet-VGG2
  • 《膜拜!适合新手入门的卷积神经网络原理详解教程》读书报告
  • 科学与社会研讨课笔记
  • p66 实训2
  • 公众号排版用什么好?一次技术视角的系统拆解:效率、兼容与智能协同
  • Linux系统下对拍
  • 重新定义网络安全职业:从解决问题的角度出发
  • 新学期每日总结(第9天)
  • 2025“钉耙编程”中国大学生算法设计暑期联赛(5)
  • 斑马日记2025.10.15
  • 数据库查询通信开销降低97%的技术方案