当前位置：首页 > CSS

css制作名单

2026-02-27 08:59:24CSS

制作名单的CSS方法

使用CSS可以轻松创建各种风格的名单（如无序列表、有序列表或自定义样式名单）。以下是几种常见实现方式：

基础无序列表样式

通过<ul>和<li>标签配合CSS实现：

<ul class="name-list">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ul>

.name-list {
  list-style-type: none; /* 移除默认圆点 */
  padding: 0;
  margin: 0;
}

.name-list li {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
  font-family: 'Arial', sans-serif;
}

横向排列名单

使用display: flex实现水平布局：

.horizontal-list {
  display: flex;
  gap: 20px; /* 项目间距 */
}

.horizontal-list li {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}

斑马条纹效果

通过:nth-child()实现交替颜色：

.striped-list li:nth-child(odd) {
  background-color: #f9f9f9;
}

.striped-list li:nth-child(even) {
  background-color: #eaeaea;
}

带图标名单

使用伪元素或背景图添加装饰：

.icon-list li {
  padding-left: 24px;
  position: relative;
}

.icon-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #3498db;
}

响应式网格名单

结合CSS Grid布局：

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

动画悬停效果

为名单项添加交互效果：

.animated-list li {
  transition: transform 0.3s;
}

.animated-list li:hover {
  transform: translateX(10px);
  color: #e74c3c;
}

自定义编号样式

针对有序列表的特殊设计：

css制作名单

.custom-ol {
  counter-reset: item;
  list-style: none;
}

.custom-ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  margin-right: 10px;
  color: #27ae60;
  font-weight: bold;
}

根据具体需求选择合适的样式组合，可通过调整颜色、间距、动画等属性进一步定制视觉效果。