轩辕李的博客
轩辕李
2019-03-10
目录

CSS基础-背景、列表与表格样式

背景、列表和表格是网页内容组织与装饰的重要元素。掌握这些CSS属性能够让页面更加美观、结构化。

本文将系统介绍CSS背景属性、列表样式和表格样式的使用方法与最佳实践。

# 一、背景属性

# 1.1 background-color（背景颜色）

/* 颜色关键字 */
.box {
  background-color: red;
}

/* 十六进制 */
.box {
  background-color: #f0f0f0;
}

/* RGB */
.box {
  background-color: rgb(240, 240, 240);
}

/* RGBA（带透明度） */
.box {
  background-color: rgba(0, 0, 0, 0.5);
}

/* HSL */
.box {
  background-color: hsl(0, 0%, 94%);
}

/* 透明 */
.box {
  background-color: transparent; /* 默认值 */
}

/* CSS变量 */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
}
.box {
  background-color: var(--bg-primary);
}

# 1.2 background-image（背景图片）

/* 单张图片 */
.box {
  background-image: url('image.jpg');
}

/* 多张背景图（从上到下叠加） */
.box {
  background-image: 
    url('overlay.png'),
    url('background.jpg');
}

/* 渐变背景 */
.box {
  background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
}

/* 图片+渐变 */
.box {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('image.jpg');
}

/* 无背景图 */
.box {
  background-image: none; /* 默认值 */
}

# 1.3 background-repeat（背景重复）

/* 默认：水平和垂直都重复 */
.box {
  background-repeat: repeat;
}

/* 不重复 */
.box {
  background-repeat: no-repeat;
}

/* 仅水平重复 */
.box {
  background-repeat: repeat-x;
}

/* 仅垂直重复 */
.box {
  background-repeat: repeat-y;
}

/* 平铺（尽量不裁剪） */
.box {
  background-repeat: space; /* 背景图之间有间距 */
}

/* 缩放平铺（可能被裁剪） */
.box {
  background-repeat: round; /* 拉伸背景图以填充 */
}

/* 多背景不同重复方式 */
.box {
  background-image: url('pattern.png'), url('bg.jpg');
  background-repeat: repeat, no-repeat;
}

# 1.4 background-position（背景位置）

/* 关键字 */
.box {
  background-position: center;        /* 居中 */
  background-position: top;           /* 顶部居中 */
  background-position: bottom;        /* 底部居中 */
  background-position: left;          /* 左侧居中 */
  background-position: right;         /* 右侧居中 */
}

/* 组合关键字 */
.box {
  background-position: top left;      /* 左上角 */
  background-position: top right;     /* 右上角 */
  background-position: bottom left;   /* 左下角 */
  background-position: bottom right;  /* 右下角 */
  background-position: center center; /* 中心 */
}

/* 像素值 */
.box {
  background-position: 20px 30px; /* x=20px, y=30px（从左上角） */
}

/* 百分比 */
.box {
  background-position: 50% 50%; /* 居中 */
  background-position: 0% 0%;   /* 左上角 */
  background-position: 100% 100%; /* 右下角 */
}

/* 混合使用 */
.box {
  background-position: center 20px;   /* 水平居中，距顶部20px */
  background-position: right 10px bottom 20px; /* 距右10px，距底20px */
}

/* 多背景不同位置 */
.box {
  background-image: url('icon.png'), url('bg.jpg');
  background-position: center, top left;
}

# 1.5 background-size（背景尺寸）

/* 关键字 */
.box {
  background-size: auto;   /* 默认：图片原始大小 */
}

/* cover（覆盖，可能裁剪） */
.box {
  background-size: cover;
  /* 图片等比缩放，完全覆盖容器，可能有部分被裁剪 */
}

/* contain（包含，可能留白） */
.box {
  background-size: contain;
  /* 图片等比缩放，完整显示在容器内，可能有留白 */
}

/* 像素值 */
.box {
  background-size: 200px 100px; /* 宽200px，高100px */
  background-size: 200px;       /* 宽200px，高度自动 */
}

/* 百分比（相对于容器） */
.box {
  background-size: 100% 100%; /* 拉伸填充 */
  background-size: 50%;       /* 宽50%，高度自动 */
}

/* 多背景不同尺寸 */
.box {
  background-image: url('icon.png'), url('bg.jpg');
  background-size: 50px, cover;
}

# 1.6 background-attachment（背景附着）

控制背景图片是否随页面滚动。

/* 默认：随内容滚动 */
.box {
  background-attachment: scroll;
}

/* 固定：不随页面滚动（视差效果） */
.box {
  background-attachment: fixed;
  background-image: url('parallax.jpg');
  background-size: cover;
  background-position: center;
}

/* 局部固定：相对于元素固定 */
.box {
  background-attachment: local;
  /* 背景随元素内容滚动 */
}

/* 视差滚动效果 */
.parallax {
  height: 500px;
  background-image: url('mountain.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

# 1.7 background-origin（背景原点）

定义背景图片的定位区域。

/* 从padding区域开始（默认） */
.box {
  background-origin: padding-box;
}

/* 从border区域开始 */
.box {
  background-origin: border-box;
}

/* 从content区域开始 */
.box {
  background-origin: content-box;
}

/* 示例 */
.demo {
  padding: 20px;
  border: 10px solid rgba(0, 0, 0, 0.2);
  background-image: url('pattern.png');
  background-repeat: no-repeat;
  background-origin: border-box; /* 图片从边框开始 */
}

# 1.8 background-clip（背景裁剪）

定义背景的绘制区域。

/* 绘制到border区域（默认） */
.box {
  background-clip: border-box;
}

/* 绘制到padding区域 */
.box {
  background-clip: padding-box;
}

/* 绘制到content区域 */
.box {
  background-clip: content-box;
}

/* 绘制到文字（渐变文字效果） */
.gradient-text {
  background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

# 1.9 background（简写属性）

/* 语法顺序（不强制，但建议）：*/
/* color image position/size repeat attachment origin clip */

/* 基础用法 */
.box {
  background: #f0f0f0;
}

.box {
  background: url('image.jpg');
}

/* 完整语法 */
.box {
  background: #f0f0f0 url('bg.jpg') center/cover no-repeat fixed;
}

/* 等价于 */
.box {
  background-color: #f0f0f0;
  background-image: url('bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 多背景简写 */
.box {
  background: 
    url('overlay.png') center/contain no-repeat,
    linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)),
    url('bg.jpg') center/cover no-repeat;
}

/* 常用组合 */
.hero {
  background: url('hero.jpg') center/cover no-repeat fixed;
}

.pattern {
  background: #fff url('pattern.png') repeat;
}

# 1.10 渐变背景

# 线性渐变（linear-gradient）

/* 基础渐变（从上到下） */
.box {
  background: linear-gradient(#ff6b6b, #4ecdc4);
}

/* 指定方向 */
.box {
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
  background: linear-gradient(to bottom right, #ff6b6b, #4ecdc4);
}

/* 角度 */
.box {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
}

/* 多个颜色 */
.box {
  background: linear-gradient(to right, #ff6b6b, #ffd93d, #4ecdc4);
}

/* 颜色位置 */
.box {
  background: linear-gradient(
    to right,
    #ff6b6b 0%,
    #ffd93d 50%,
    #4ecdc4 100%
  );
}

/* 硬过渡（条纹效果） */
.stripes {
  background: linear-gradient(
    90deg,
    #ff6b6b 0% 25%,
    #4ecdc4 25% 50%,
    #ff6b6b 50% 75%,
    #4ecdc4 75% 100%
  );
}

# 径向渐变（radial-gradient）

/* 基础渐变（圆形） */
.box {
  background: radial-gradient(#ff6b6b, #4ecdc4);
}

/* 椭圆渐变 */
.box {
  background: radial-gradient(ellipse, #ff6b6b, #4ecdc4);
}

/* 指定大小和位置 */
.box {
  background: radial-gradient(
    circle at center,
    #ff6b6b 0%,
    #4ecdc4 100%
  );
  
  background: radial-gradient(
    circle at top left,
    #ff6b6b,
    #4ecdc4
  );
}

/* 指定半径 */
.box {
  background: radial-gradient(
    circle 100px at center,
    #ff6b6b,
    #4ecdc4
  );
}

/* 大小关键字 */
.box {
  background: radial-gradient(
    circle closest-side,  /* 最近边 */
    #ff6b6b,
    #4ecdc4
  );
  /* closest-corner | farthest-side | farthest-corner */
}

# 锥形渐变（conic-gradient）

/* 基础锥形渐变 */
.box {
  background: conic-gradient(#ff6b6b, #4ecdc4, #ff6b6b);
}

/* 指定起始角度 */
.box {
  background: conic-gradient(
    from 45deg,
    #ff6b6b,
    #4ecdc4,
    #ff6b6b
  );
}

/* 色环 */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* 饼图效果 */
.pie-chart {
  background: conic-gradient(
    #ff6b6b 0% 40%,
    #4ecdc4 40% 75%,
    #ffd93d 75% 100%
  );
  border-radius: 50%;
}

# 重复渐变

/* 重复线性渐变 */
.box {
  background: repeating-linear-gradient(
    45deg,
    #ff6b6b 0px,
    #ff6b6b 10px,
    #4ecdc4 10px,
    #4ecdc4 20px
  );
}

/* 重复径向渐变 */
.box {
  background: repeating-radial-gradient(
    circle,
    #ff6b6b 0px,
    #ff6b6b 10px,
    #4ecdc4 10px,
    #4ecdc4 20px
  );
}

/* 重复锥形渐变 */
.box {
  background: repeating-conic-gradient(
    #ff6b6b 0deg 15deg,
    #4ecdc4 15deg 30deg
  );
}

# 二、列表样式

# 2.1 list-style-type（列表标记类型）

/* 无序列表 */
ul {
  list-style-type: disc;        /* 实心圆（默认） */
  list-style-type: circle;      /* 空心圆 */
  list-style-type: square;      /* 实心方块 */
  list-style-type: none;        /* 无标记 */
}

/* 有序列表 */
ol {
  list-style-type: decimal;           /* 数字（默认）：1, 2, 3 */
  list-style-type: decimal-leading-zero; /* 补零：01, 02, 03 */
  list-style-type: lower-roman;       /* 小写罗马数字：i, ii, iii */
  list-style-type: upper-roman;       /* 大写罗马数字：I, II, III */
  list-style-type: lower-alpha;       /* 小写字母：a, b, c */
  list-style-type: upper-alpha;       /* 大写字母：A, B, C */
  list-style-type: lower-greek;       /* 小写希腊字母：α, β, γ */
}

/* CSS3 扩展 */
ol {
  list-style-type: cjk-decimal;       /* 中文数字 */
  list-style-type: cjk-ideographic;   /* 中文习惯计数 */
  list-style-type: hiragana;          /* 日文平假名 */
  list-style-type: katakana;          /* 日文片假名 */
}

/* Emoji 标记 */
ul {
  list-style-type: '✓';
  list-style-type: '→';
  list-style-type: '★';
}

# 2.2 list-style-position（标记位置）

/* 标记在列表项外部（默认） */
ul {
  list-style-position: outside;
}

/* 标记在列表项内部 */
ul {
  list-style-position: inside;
}

/* 对比示例 */
.outside li {
  list-style-position: outside;
  padding-left: 0;
  /* 标记不占用文本空间，文本对齐 */
}

.inside li {
  list-style-position: inside;
  /* 标记占用文本空间，可能导致对齐问题 */
}

# 2.3 list-style-image（自定义标记图片）

/* 使用图片作为标记 */
ul {
  list-style-image: url('bullet.png');
}

/* 图片 + 备用标记 */
ul {
  list-style-type: disc; /* 图片加载失败时的备用方案 */
  list-style-image: url('bullet.svg');
}

/* 更好的控制：使用伪元素 */
ul {
  list-style: none;
}

ul li::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('bullet.svg') no-repeat center;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}

# 2.4 list-style（简写属性）

/* 语法：type position image */

/* 基础用法 */
ul {
  list-style: square;
}

ul {
  list-style: none;
}

/* 完整语法 */
ul {
  list-style: square inside url('bullet.png');
}

/* 等价于 */
ul {
  list-style-type: square;
  list-style-position: inside;
  list-style-image: url('bullet.png');
}

# 2.5 移除默认列表样式

/* 完全重置列表样式 */
ul, ol {
  list-style: none;   /* 移除标记 */
  margin: 0;          /* 移除外边距 */
  padding: 0;         /* 移除内边距 */
}

/* 导航菜单常用重置 */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block; /* 或 flex */
}

# 2.6 自定义列表样式实战

# 计数器列表

/* 使用CSS计数器 */
ol {
  list-style: none;
  counter-reset: my-counter;
  padding-left: 0;
}

ol li {
  counter-increment: my-counter;
  padding-left: 40px;
  position: relative;
  margin-bottom: 10px;
}

ol li::before {
  content: counter(my-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* 自定义格式 */
ol li::before {
  content: "Step " counter(my-counter);
}

/* 罗马数字 */
ol li::before {
  content: counter(my-counter, upper-roman) ".";
}

# Icon 列表

/* 使用Font Awesome图标 */
.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
}

.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
  font-size: 1.2em;
}

/* 不同状态 */
.checklist li.pending::before {
  content: '○';
  color: #ffc107;
}

.checklist li.done::before {
  content: '✓';
  color: #28a745;
}

.checklist li.failed::before {
  content: '✗';
  color: #dc3545;
}

# 三、表格样式

# 3.1 border-collapse（边框合并）

控制表格边框是否合并。

/* 分离边框（默认） */
table {
  border-collapse: separate;
  border-spacing: 2px; /* 边框间距 */
}

/* 合并边框（推荐） */
table {
  border-collapse: collapse;
  /* 消除双边框，使表格更紧凑 */
}

/* 对比示例 */
.separate-table {
  border-collapse: separate;
  border-spacing: 5px;
}

.collapse-table {
  border-collapse: collapse;
}

.collapse-table th,
.collapse-table td {
  border: 1px solid #ddd;
}

# 3.2 border-spacing（边框间距）

仅在 border-collapse: separate 时有效。

/* 单个值（水平和垂直间距相同） */
table {
  border-collapse: separate;
  border-spacing: 10px;
}

/* 两个值（水平 垂直） */
table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}

/* 0间距 */
table {
  border-collapse: separate;
  border-spacing: 0;
}

# 3.3 table-layout（表格布局算法）

/* 自动布局（默认） */
table {
  table-layout: auto;
  /* 根据内容自动调整列宽，可能较慢 */
}

/* 固定布局 */
table {
  table-layout: fixed;
  width: 100%;
  /* 根据第一行确定列宽，渲染更快 */
}

/* 固定布局 + 明确列宽 */
table {
  table-layout: fixed;
  width: 100%;
}

table col:nth-child(1) {
  width: 30%;
}

table col:nth-child(2) {
  width: 50%;
}

table col:nth-child(3) {
  width: 20%;
}

# 3.4 caption-side（标题位置）

/* 标题在顶部（默认） */
table {
  caption-side: top;
}

/* 标题在底部 */
table {
  caption-side: bottom;
}

/* 样式化标题 */
caption {
  caption-side: top;
  padding: 10px;
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  background: #f5f5f5;
}

# 3.5 empty-cells（空单元格）

仅在 border-collapse: separate 时有效。

/* 显示空单元格边框（默认） */
table {
  empty-cells: show;
}

/* 隐藏空单元格边框 */
table {
  empty-cells: hide;
}

# 3.6 vertical-align（垂直对齐）

在表格单元格中特别有用。

/* 顶部对齐 */
td {
  vertical-align: top;
}

/* 中间对齐（默认） */
td {
  vertical-align: middle;
}

/* 底部对齐 */
td {
  vertical-align: bottom;
}

/* 基线对齐 */
td {
  vertical-align: baseline;
}

# 四、实战案例

# 4.1 现代表格样式

# 4.2 斑马纹表格

# 4.3 响应式表格

# 4.4 自定义列表导航

# 4.5 渐变背景卡片

# 五、最佳实践

# 5.1 背景图片优化

/* 1. 使用合适的图片格式 */
.hero {
  /* WebP优先，JPEG备用 */
  background-image: 
    image-set(
      url('hero.webp') type('image/webp'),
      url('hero.jpg') type('image/jpeg')
    );
}

/* 2. 响应式背景图片 */
.hero {
  background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-tablet.jpg');
  }
}

@media (min-width: 1200px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

/* 3. 优化性能的完整配置 */
.hero {
  background: url('hero.jpg') center/cover no-repeat fixed;
  background-color: #f0f0f0; /* 备用颜色 */
  min-height: 500px;
  
  /* 图片加载期间显示颜色 */
  will-change: background-image;
}

/* 4. 懒加载背景图片 */
.lazy-bg {
  background-color: #f0f0f0;
  /* JavaScript动态添加背景图片 */
}

.lazy-bg.loaded {
  background-image: url('image.jpg');
  transition: background-image 0.3s ease;
}

# 5.2 列表语义化

/* ✅ 推荐：保留语义，用CSS移除样式 */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ❌ 不推荐：使用div破坏语义 */
/* <div class="nav-container">
     <div class="nav-item">...</div>
   </div> */

/* ✅ 推荐：使用ol表示顺序重要的列表 */
.steps {
  list-style: decimal;
}

/* ✅ 推荐：使用ul表示顺序不重要的列表 */
.features {
  list-style: disc;
}

/* ✅ 推荐：使用自定义计数器增强语义 */
.tutorial-steps {
  list-style: none;
  counter-reset: step;
}

.tutorial-steps li::before {
  content: "第 " counter(step) " 步: ";
  counter-increment: step;
  font-weight: bold;
  color: #007bff;
}

# 5.3 表格可访问性

/* 1. 为表格添加标题 */
table {
  caption-side: top;
}

caption {
  padding: 10px;
  font-weight: bold;
  text-align: left;
}

/* 2. 突出表头 */
th {
  background: #f0f0f0;
  font-weight: 600;
  text-align: left;
  padding: 12px;
}

/* 3. 增强可读性 */
td {
  padding: 12px;
  border-bottom: 1px solid #e0e0e0;
}

/* 4. 悬浮高亮 */
tbody tr:hover {
  background: #f5f5f5;
  cursor: pointer;
}

/* 5. 焦点样式（键盘导航） */
table:focus-within tr:focus,
table:focus-within td:focus {
  outline: 2px solid #007bff;
  outline-offset: -2px;
}

/* 6. 确保对比度 */
th {
  color: #1a1a1a;
  background: #e9ecef;
}

td {
  color: #333;
}

# 5.4 性能优化

/* 1. 避免复杂的渐变 */
/* ❌ 性能差 */
.bad {
  background: 
    radial-gradient(circle, red 0%, blue 10%, green 20%),
    linear-gradient(45deg, yellow, pink),
    conic-gradient(orange, purple);
}

/* ✅ 性能好 */
.good {
  background: linear-gradient(to right, #667eea, #764ba2);
}

/* 2. 使用will-change提示浏览器 */
.animated-bg {
  will-change: background-position;
  background: url('pattern.png');
  animation: slide 10s linear infinite;
}

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: 100px 0; }
}

/* 3. 固定布局提升表格渲染 */
table {
  table-layout: fixed;
  width: 100%;
}

/* 4. 避免background-attachment: fixed在移动端 */
@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll; /* 移动端性能更好 */
  }
}

# 5.5 常见错误

❌ 错误做法：

/* 1. 忘记设置背景色（图片加载失败时无备用） */
.hero {
  background-image: url('hero.jpg');
  color: white; /* 如果图片加载失败，白字白底不可见 */
}

/* 2. 表格边框重复 */
table {
  border: 1px solid #ddd;
}
td {
  border: 1px solid #ddd; /* 造成双边框 */
}

/* 3. 列表样式不一致 */
ul {
  list-style-position: outside;
}
ul ul {
  list-style-position: inside; /* 嵌套列表样式不一致 */
}

/* 4. 背景图片过大 */
.bg {
  background: url('huge-image.jpg'); /* 5MB图片 */
}

✅ 正确做法：

/* 1. 始终提供背景色 */
.hero {
  background-color: #333;
  background-image: url('hero.jpg');
  color: white;
}

/* 2. 使用border-collapse */
table {
  border-collapse: collapse;
  border: 1px solid #ddd;
}
td {
  border: 1px solid #ddd;
}

/* 3. 保持样式一致 */
ul,
ul ul {
  list-style-position: outside;
  padding-left: 2em;
}

/* 4. 优化图片 */
.bg {
  background: url('optimized-image.webp'); /* 压缩后 < 200KB */
  background-size: cover;
}

# 六、浏览器兼容性

特性 Chrome Firefox Safari Edge
background 基础 ✅ 全部 ✅ 全部 ✅ 全部 ✅ 全部
多重背景 ✅ 4+ ✅ 3.6+ ✅ 3.1+ ✅ 12+
background-size ✅ 4+ ✅ 4+ ✅ 4.1+ ✅ 12+
background-clip: text ✅ 3+ (-webkit-) ✅ 49+ ✅ 4+ (-webkit-) ✅ 15+
渐变 ✅ 26+ ✅ 16+ ✅ 6.1+ ✅ 12+
conic-gradient ✅ 69+ ✅ 83+ ✅ 12.1+ ✅ 79+
list-style ✅ 全部 ✅ 全部 ✅ 全部 ✅ 全部
table-layout ✅ 全部 ✅ 全部 ✅ 全部 ✅ 全部
border-collapse ✅ 全部 ✅ 全部 ✅ 全部 ✅ 全部

# 前缀处理

/* 渐变文字（需要前缀） */
.gradient-text {
  background: linear-gradient(45deg, red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 旧版本浏览器渐变语法 */
.gradient {
  /* 旧版WebKit */
  background: -webkit-gradient(linear, left top, right top, from(#667eea), to(#764ba2));
  
  /* 旧版标准 */
  background: -webkit-linear-gradient(left, #667eea, #764ba2);
  background: -moz-linear-gradient(left, #667eea, #764ba2);
  
  /* 现代标准 */
  background: linear-gradient(to right, #667eea, #764ba2);
}

# 七、总结

# 核心要点

  1. 背景属性：

    • 使用 background 简写提高代码简洁性
    • background-size: cover 常用于全屏背景
    • 多重背景从上到下叠加
    • 渐变是 background-image 的值

  2. 列表样式：

    • list-style-type 改变标记样式
    • 导航菜单通常 list-style: none
    • 使用伪元素 ::before 实现自定义标记
    • CSS计数器增强列表语义

  3. 表格样式：

    • border-collapse: collapse 消除双边框
    • table-layout: fixed 提升性能
    • 斑马纹使用 :nth-child(odd/even)
    • 响应式表格在小屏幕转为卡片布局

  4. 最佳实践：

    • 背景图片始终提供备用颜色
    • 优化图片大小和格式
    • 保持列表语义化
    • 增强表格可访问性（标题、对比度）

  5. 性能优化：

    • 压缩背景图片
    • 避免过于复杂的渐变
    • 使用 table-layout: fixed
    • 移动端避免 background-attachment: fixed

掌握背景、列表和表格的CSS样式，能够让你的网页内容组织更清晰、视觉效果更出色。

祝你变得更强!

编辑 (opens new window)
#CSS
上次更新: 2025/11/21
CSS基础-文本与字体
CSS布局-Flexbox完全指南

← CSS布局-Flexbox完全指南→

最近更新
01
AI编程时代的一些心得
09-11
02
Claude Code与Codex的协同工作
09-01
03
Claude Code 最佳实践（个人版）
08-01
更多文章>
Theme by Vdoing | Copyright © 2018-2025 京ICP备2021021832号-2 | MIT License