当前位置：首页 > CSS

css制作列表页面

2026-04-02 10:29:34CSS

基础列表结构

使用无序列表 <ul> 或有序列表 <ol> 作为容器，搭配 <li> 标签实现基础列表结构。通过 CSS 控制间距、项目符号和排版：

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

.list-container {
  padding-left: 0; /* 移除默认内边距 */
  list-style-type: none; /* 隐藏默认项目符号 */
}
.list-container li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

自定义项目符号

通过 ::before 伪元素或背景图替换默认符号：

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

或使用图片符号：

css制作列表页面

.list-container li {
  background: url('icon.png') no-repeat left center;
  padding-left: 24px;
}

栅格化列表布局

结合 Flexbox 或 Grid 实现多列布局：

/* Flexbox 方案 */
.list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.list-container li {
  flex: 1 0 200px;
}

/* Grid 方案 */
.list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

交互效果增强

添加悬停和选中状态提升用户体验：

css制作列表页面

.list-container li:hover {
  background-color: #f5f5f5;
  transform: translateX(4px);
  transition: all 0.3s ease;
}

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

响应式适配

通过媒体查询调整不同屏幕尺寸下的显示方式：

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

高级样式扩展

实现斑马纹、圆角等视觉效果：

/* 斑马条纹 */
.list-container li:nth-child(odd) {
  background-color: #f9f9f9;
}

/* 圆角卡片式 */
.list-container li {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 12px;
}