当前位置：首页 > CSS

css制作列表页面

2026-03-12 14:37:12CSS

基本列表结构

使用HTML的无序列表<ul>或有序列表<ol>作为基础结构，列表项用<li>标签包裹：

<ul class="list-container">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

清除默认样式

移除浏览器默认的列表样式和边距：

.list-container {
  list-style: none;
  padding: 0;
  margin: 0;
}

布局方式选择

弹性布局方案：

.list-container {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 控制项间距 */
}

网格布局方案：

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

列表项样式设计

基础项样式：

.list-container li {
  padding: 12px 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.list-container li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

交互效果增强

添加选中状态：

.list-container li.active {
  background: #e3f2fd;
  border-left: 3px solid #2196f3;
}

响应式处理

针对移动设备调整：

@media (max-width: 768px) {
  .list-container {
    grid-template-columns: 1fr;
  }

  .list-container li {
    padding: 10px;
  }
}

高级样式示例

斑马条纹效果：

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

带图标的列表项：

.list-container li {
  display: flex;
  align-items: center;
}

.list-container li::before {
  content: "•";
  color: #4caf50;
  margin-right: 8px;
  font-size: 20px;
}

性能优化

使用CSS变量方便主题切换：

css制作列表页面

:root {
  --list-bg: #fff;
  --list-hover: #f5f5f5;
}

.list-container li {
  background: var(--list-bg);
}

.list-container li:hover {
  background: var(--list-hover);
}