当前位置：首页 > CSS

css制作列表栏

2026-03-12 10:56:33CSS

使用CSS制作列表栏

HTML结构需要一个无序列表（<ul>）或有序列表（<ol>），列表项用<li>定义：

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

基础样式设置

清除默认列表样式并添加间距：

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

.list-container li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

添加交互效果

悬停高亮和点击反馈：

.list-container li:hover {
  background-color: #f5f5f5;
}

.list-container li:active {
  background-color: #e0e0e0;
}

横向排列列表

使用Flexbox实现水平布局：

.list-container {
  display: flex;
}

.list-container li {
  border-right: 1px solid #eee;
  border-bottom: none;
}

响应式设计

针对移动设备调整样式：

@media (max-width: 600px) {
  .list-container {
    flex-direction: column;
  }

  .list-container li {
    border-right: none;
    border-bottom: 1px solid #eee;
  }
}

高级样式选项

添加图标和过渡效果：

.list-container li {
  transition: background-color 0.3s ease;
  position: relative;
  padding-left: 30px;
}

.list-container li::before {
  content: "→";
  position: absolute;
  left: 10px;
}

主题定制

通过CSS变量实现主题切换：

css制作列表栏

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

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

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