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

@

目录

🐱 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>
posted @ 2025-10-16 01:59  糖~豆豆  阅读(11)  评论(0)    收藏  举报
Live2D