当前位置：首页 > CSS

css制作名单

2026-02-13 00:21:49CSS

使用CSS制作名单

通过CSS可以轻松创建美观的名单，以下是几种常见方法：

无序列表样式

ul.custom-list {
  list-style-type: none; /* 移除默认圆点 */
  padding-left: 20px;
}
ul.custom-list li {
  position: relative;
  padding: 5px 0;
}
ul.custom-list li:before {
  content: "•";
  color: #ff6b6b;
  position: absolute;
  left: -15px;
}

有序列表美化

ol.fancy-list {
  counter-reset: item;
  padding-left: 25px;
}
ol.fancy-list li {
  display: block;
  margin-bottom: 8px;
}
ol.fancy-list li:before {
  content: counter(item) ". ";
  counter-increment: item;
  color: #4ecdc4;
  font-weight: bold;
}

表格样式名单

.name-table {
  width: 100%;
  border-collapse: collapse;
}
.name-table th {
  background-color: #f8f9fa;
  text-align: left;
  padding: 12px;
}
.name-table td {
  padding: 10px;
  border-bottom: 1px solid #e9ecef;
}
.name-table tr:nth-child(even) {
  background-color: #f8f9fa;
}

卡片式名单布局

.name-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 15px;
}

悬浮动画效果

css制作名单

.hover-list li {
  transition: all 0.3s ease;
  padding: 8px 12px;
}
.hover-list li:hover {
  background-color: #e9f7fe;
  transform: translateX(5px);
  cursor: pointer;
}

可以根据具体需求选择适合的样式，通过调整颜色、间距和动画效果来创建个性化的名单展示效果。