跳至主要內容

列表与链接样式

Kpsmart2025年3月2日大约 13 分钟

列表与链接样式

列表和链接是网页中常见的元素，通过CSS可以自定义它们的外观。本章将介绍如何样式化这些元素。

列表样式

HTML提供了有序列表、无序列表和定义列表，CSS允许你自定义这些列表的外观。

列表类型

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;           /* 数字（默认值） */
  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;       /* 小写希腊字母 */
  list-style-type: lower-latin;       /* 小写拉丁字母 */
  list-style-type: upper-latin;       /* 大写拉丁字母 */
}

列表图像

list-style-image属性使用图像作为列表项标记。

ul {
  list-style-image: url('bullet.png');
}

列表位置

list-style-position属性指定列表项标记的位置。

ul {
  list-style-position: outside; /* 标记位于内容框外（默认值） */
  list-style-position: inside;  /* 标记位于内容框内 */
}

列表简写属性

list-style是一个简写属性，可以在一个声明中设置所有列表样式属性。

ul {
  /* list-style-type list-style-position list-style-image */
  list-style: square inside url('bullet.png');
  
  /* 只设置类型和位置 */
  list-style: circle outside;
  
  /* 只设置类型 */
  list-style: lower-roman;
}

自定义列表样式

使用::marker伪元素可以更精细地控制列表标记的样式。

li::marker {
  color: #4a90e2;
  font-weight: bold;
  content: "➤ ";
}

或者，可以移除默认标记并使用伪元素创建自定义标记。

ul {
  list-style: none;
  padding-left: 0;
}

li {
  padding-left: 1.5em;
  position: relative;
}

li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2ecc71;
  font-weight: bold;
}

计数器

CSS计数器可以创建更复杂的编号系统。

ol {
  counter-reset: section;     /* 创建一个名为section的计数器 */
  list-style-type: none;
}

li::before {
  counter-increment: section; /* 递增计数器 */
  content: "Section " counter(section) ": "; /* 显示计数器 */
  font-weight: bold;
}

/* 嵌套计数器 */
ol {
  counter-reset: section;
}

li {
  counter-reset: subsection;
}

li::before {
  counter-increment: section;
  content: counter(section) ". ";
}

li li::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

多列列表

使用CSS多列布局可以创建多列列表。

ul {
  column-count: 3;       /* 列数 */
  column-gap: 2em;       /* 列间距 */
  list-style-position: inside; /* 确保标记在列内 */
}

响应式列表

使用媒体查询可以创建响应式列表。

ul {
  column-count: 1;
}

@media (min-width: 768px) {
  ul {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  ul {
    column-count: 3;
  }
}

定义列表样式

定义列表（<dl>、<dt>、<dd>）的样式。

dl {
  margin: 1em 0;
}

dt {
  font-weight: bold;
  margin-top: 1em;
}

dd {
  margin-left: 2em;
  margin-bottom: 1em;
  color: #666;
}

/* 水平布局 */
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em 2em;
}

dt {
  grid-column: 1;
  text-align: right;
}

dd {
  grid-column: 2;
  margin: 0;
}

链接样式

链接是网页导航的基础，CSS可以自定义链接的外观和交互效果。

链接状态

链接有四种状态，可以使用伪类选择器设置不同状态的样式。

/* 未访问的链接 */
a:link {
  color: #4a90e2;
  text-decoration: none;
}

/* 已访问的链接 */
a:visited {
  color: #9b59b6;
}

/* 鼠标悬停的链接 */
a:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* 激活状态的链接（鼠标按下） */
a:active {
  color: #e74c3c;
}

注意：这些伪类必须按照以下顺序声明：:link、:visited、:hover、:active（记忆方法：LoVe HAte）。

移除下划线

默认情况下，链接带有下划线。可以使用text-decoration属性移除它。

a {
  text-decoration: none;
}

自定义下划线

可以使用border-bottom或text-decoration属性自定义下划线。

a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* 或使用text-decoration属性（现代浏览器） */
a {
  text-decoration: underline;
  text-decoration-color: #4a90e2;
  text-decoration-thickness: 2px;
  text-decoration-style: wavy;
}

渐变过渡效果

使用transition属性可以为链接添加平滑的过渡效果。

a {
  color: #4a90e2;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}

a:hover {
  color: #2980b9;
  border-bottom-color: currentColor;
}

按钮式链接

将链接样式化为按钮。

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #2980b9;
}

.button:active {
  background-color: #1c6ea4;
}

图标链接

在链接中添加图标。

a.external {
  padding-right: 1.5em;
  background-image: url('external-link.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1em;
}

/* 使用伪元素添加图标 */
a.download::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  background-image: url('download-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

导航菜单

创建水平导航菜单。

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  margin: 0;
}

.nav a {
  display: block;
  padding: 1em;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav a:hover {
  background-color: #555;
}

.nav a.active {
  background-color: #4a90e2;
}

创建垂直导航菜单。

.nav-vertical {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
  background-color: #f5f5f5;
}

.nav-vertical li {
  margin: 0;
  border-bottom: 1px solid #ddd;
}

.nav-vertical a {
  display: block;
  padding: 0.8em 1em;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav-vertical a:hover {
  background-color: #e9e9e9;
}

.nav-vertical a.active {
  background-color: #4a90e2;
  color: white;
}

面包屑导航

创建面包屑导航。

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 0.5em;
  color: #999;
}

.breadcrumb a {
  color: #4a90e2;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb li:last-child a {
  color: #666;
  pointer-events: none;
  cursor: default;
}

链接卡片

创建卡片式链接。

.card-link {
  display: block;
  padding: 1.5em;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #333;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-link h3 {
  margin-top: 0;
  color: #4a90e2;
}

.card-link p {
  margin-bottom: 0;
  color: #666;
}

可访问性考虑

确保链接在各种状态下都有足够的对比度，并提供明确的视觉反馈。

a {
  color: #0066cc; /* 高对比度颜色 */
  text-decoration: underline; /* 清晰的视觉指示 */
  outline: none; /* 移除默认轮廓 */
}

a:hover, a:focus {
  color: #004080;
  text-decoration: underline;
}

/* 自定义焦点样式 */
a:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* 跳过导航链接（无障碍功能） */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background-color: #4a90e2;
  color: white;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

实例：导航菜单系统

<!DOCTYPE html>
<html>
<head>
  <title>导航菜单系统</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f5f5;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    header {
      background-color: white;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    
    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #4a90e2;
      text-decoration: none;
    }
    
    /* 主导航 */
    .main-nav {
      margin-top: 20px;
    }
    
    .main-nav ul {
      list-style: none;
      display: flex;
      background-color: #4a90e2;
      border-radius: 4px;
    }

    .main-nav li {
      margin: 0;
    }
    
    .main-nav a {
      display: block;
      padding: 12px 20px;
      color: white;
      text-decoration: none;
      transition: background-color 0.3s;
    }
    
    .main-nav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .main-nav a.active {
      background-color: rgba(0, 0, 0, 0.1);
      font-weight: bold;
    }
    
    /* 下拉菜单 */
    .dropdown {
      position: relative;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: white;
      min-width: 200px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 1;
      border-radius: 0 0 4px 4px;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown-content a {
      color: #333;
      padding: 12px 20px;
      border-bottom: 1px solid #eee;
    }
    
    .dropdown-content a:hover {
      background-color: #f5f5f5;
    }
    
    .dropdown-content a:last-child {
      border-bottom: none;
    }
    
    /* 侧边导航 */
    .side-nav {
      background-color: white;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .side-nav h3 {
      padding: 15px;
      margin: 0;
      background-color: #4a90e2;
      color: white;
    }
    
    .side-nav ul {
      list-style: none;
    }
    
    .side-nav li {
      border-bottom: 1px solid #eee;
    }
    
    .side-nav li:last-child {
      border-bottom: none;
    }
    
    .side-nav a {
      display: block;
      padding: 12px 15px;
      color: #333;
      text-decoration: none;
      transition: background-color 0.3s;
    }
    
    .side-nav a:hover {
      background-color: #f5f5f5;
    }
    
    .side-nav a.active {
      border-left: 4px solid #4a90e2;
      padding-left: 11px;
      background-color: #f0f7ff;
      font-weight: bold;
    }
    
    /* 面包屑 */
    .breadcrumbs {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      padding: 10px 15px;
      background-color: white;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .breadcrumbs li {
      margin: 0;
    }
    
    .breadcrumbs li:not(:last-child)::after {
      content: "›";
      margin: 0 10px;
      color: #999;
    }
    
    .breadcrumbs a {
      color: #4a90e2;
      text-decoration: none;
    }
    
    .breadcrumbs a:hover {
      text-decoration: underline;
    }
    
    .breadcrumbs li:last-child a {
      color: #666;
      pointer-events: none;
    }
    
    /* 响应式导航 */
    .mobile-nav-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 24px;
      color: #4a90e2;
      cursor: pointer;
    }
    
    @media (max-width: 768px) {
      .mobile-nav-toggle {
        display: block;
      }
      
      .main-nav ul {
        flex-direction: column;
        display: none;
      }
      
      .main-nav.active ul {
        display: flex;
      }
      
      .dropdown-content {
        position: static;
        box-shadow: none;
        background-color: #f0f7ff;
      }
      
      .dropdown-content a {
        padding-left: 40px;
      }
      
      .content-wrapper {
        flex-direction: column;
      }
      
      .side-nav {
        width: 100%;
        margin-bottom: 20px;
      }
      
      .main-content {
        width: 100%;
      }
    }
    
    /* 布局 */
    .content-wrapper {
      display: flex;
      gap: 20px;
    }
    
    .side-nav {
      width: 250px;
      flex-shrink: 0;
    }
    
    .main-content {
      flex-grow: 1;
    }
    
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <a href="#" class="logo">导航示例</a>
        <button class="mobile-nav-toggle">☰</button>
      </div>
      
      <nav class="main-nav">
        <ul>
          <li><a href="#" class="active">首页</a></li>
          <li class="dropdown">
            <a href="#">产品</a>
            <div class="dropdown-content">
              <a href="#">产品类别1</a>
              <a href="#">产品类别2</a>
              <a href="#">产品类别3</a>
            </div>
          </li>
          <li><a href="#">服务</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </header>
    
    <ul class="breadcrumbs">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">产品类别1</a></li>
    </ul>
    
    <div class="content-wrapper">
      <nav class="side-nav">
        <h3>产品分类</h3>
        <ul>
          <li><a href="#" class="active">产品类别1</a></li>
          <li><a href="#">产品类别2</a></li>
          <li><a href="#">产品类别3</a></li>
          <li><a href="#">产品类别4</a></li>
          <li><a href="#">产品类别5</a></li>
        </ul>
      </nav>
      
      <div class="main-content">
        <h1>产品列表</h1>
        <p>浏览我们的产品类别1中的所有产品。</p>
        
        <div class="card-grid">
          <a href="#" class="card-link">
            <h3>产品A</h3>
            <p>这是产品A的简短描述，点击查看详情。</p>
          </a>
          
          <a href="#" class="card-link">
            <h3>产品B</h3>
            <p>这是产品B的简短描述，点击查看详情。</p>
          </a>
          
          <a href="#" class="card-link">
            <h3>产品C</h3>
            <p>这是产品C的简短描述，点击查看详情。</p>
          </a>
          
          <a href="#" class="card-link">
            <h3>产品D</h3>
            <p>这是产品D的简短描述，点击查看详情。</p>
          </a>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 移动导航切换
    document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
      document.querySelector('.main-nav').classList.toggle('active');
    });
  </script>
</body>
</html>

实例：自定义列表样式

<!DOCTYPE html>
<html>
<head>
  <title>自定义列表样式</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f5f5;
      padding: 20px;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      margin-bottom: 20px;
      color: #4a90e2;
    }
    
    h2 {
      margin: 30px 0 15px;
      padding-bottom: 5px;
      border-bottom: 2px solid #eee;
      color: #333;
    }
    
    p {
      margin-bottom: 15px;
    }
    
    /* 基本列表样式 */
    .basic-list {
      margin: 0 0 20px 20px;
    }
    
    /* 自定义图标列表 */
    .icon-list {
      list-style: none;
      margin: 0 0 20px 0;
    }
    
    .icon-list li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
    }
    
    .icon-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: #2ecc71;
      font-weight: bold;
      font-size: 18px;
    }
    
    /* 自定义数字列表 */
    .number-list {
      list-style: none;
      counter-reset: item;
      margin: 0 0 20px 0;
    }
    
    .number-list li {
      counter-increment: item;
      position: relative;
      padding-left: 40px;
      margin-bottom: 15px;
    }
    
    .number-list li::before {
      content: counter(item);
      position: absolute;
      left: 0;
      top: -2px;
      background-color: #4a90e2;
      color: white;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      text-align: center;
      line-height: 28px;
      font-weight: bold;
    }
    
    /* 水平列表 */
    .horizontal-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      margin: 0 0 20px 0;
    }
    
    .horizontal-list li {
      margin-right: 20px;
      margin-bottom: 10px;
    }
    
    /* 卡片列表 */
    .card-list {
      list-style: none;
      margin: 0 0 20px 0;
    }
    
    .card-list li {
      background-color: #f9f9f9;
      border-left: 4px solid #4a90e2;
      padding: 15px;
      margin-bottom: 10px;
      border-radius: 0 4px 4px 0;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .card-list li:hover {
      transform: translateX(5px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* 多列列表 */
    .multi-column-list {
      list-style-position: inside;
      column-count: 2;
      column-gap: 30px;
      margin: 0 0 20px 0;
    }
    
    .multi-column-list li {
      margin-bottom: 10px;
      break-inside: avoid;
    }
    
    /* 定义列表 */
    .custom-dl {
      margin: 0 0 20px 0;
    }
    
    .custom-dl dt {
      font-weight: bold;
      color: #4a90e2;
      margin-top: 15px;
    }
    
    .custom-dl dd {
      margin-left: 20px;
      margin-bottom: 10px;
      color: #666;
    }
    
    /* 网格定义列表 */
    .grid-dl {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 10px;
      margin: 0 0 20px 0;
    }
    
    .grid-dl dt {
      font-weight: bold;
      color: #4a90e2;
      text-align: right;
      padding: 8px;
      background-color: #f0f7ff;
      border-radius: 4px;
    }
    
    .grid-dl dd {
      margin: 0;
      padding: 8px;
    }
    
    @media (max-width: 768px) {
      .multi-column-list {
        column-count: 1;
      }
      
      .grid-dl {
        grid-template-columns: 1fr;
      }
      
      .grid-dl dt {
        text-align: left;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>自定义列表样式示例</h1>
    <p>以下展示了各种自定义列表样式的实现方法。</p>
    
    <h2>基本列表</h2>
    <ul class="basic-list">
      <li>基本列表项1</li>
      <li>基本列表项2</li>
      <li>基本列表项3</li>
    </ul>
    
    <h2>自定义图标列表</h2>
    <ul class="icon-list">
      <li>使用伪元素添加自定义图标</li>
      <li>可以使用任何Unicode字符或图标字体</li>
      <li>适合创建特色列表和检查表</li>
    </ul>
    
    <h2>自定义数字列表</h2>
    <ol class="number-list">
      <li>使用CSS计数器创建自定义编号</li>
      <li>可以自定义数字的样式和位置</li>
      <li>适合步骤说明和排名列表</li>
    </ol>
    
    <h2>水平列表</h2>
    <ul class="horizontal-list">
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
      <li>项目4</li>
      <li>项目5</li>
    </ul>
    
    <h2>卡片列表</h2>
    <ul class="card-list">
      <li>卡片列表项1 - 悬停时有交互效果</li>
      <li>卡片列表项2 - 适合重要信息的展示</li>
      <li>卡片列表项3 - 可以包含更复杂的内容</li>
    </ul>
    
    <h2>多列列表</h2>
    <ul class="multi-column-list">
      <li>多列列表项1</li>
      <li>多列列表项2</li>
      <li>多列列表项3</li>
      <li>多列列表项4</li>
      <li>多列列表项5</li>
      <li>多列列表项6</li>
      <li>多列列表项7</li>
      <li>多列列表项8</li>
    </ul>
    
    <h2>定义列表</h2>
    <dl class="custom-dl">
      <dt>HTML</dt>
      <dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
      
      <dt>CSS</dt>
      <dd>层叠样式表，用于描述HTML文档样式的样式表语言。</dd>
      
      <dt>JavaScript</dt>
      <dd>一种编程语言，使网页具有交互性。</dd>
    </dl>
    
    <h2>网格定义列表</h2>
    <dl class="grid-dl">
      <dt>HTML</dt>
      <dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
      
      <dt>CSS</dt>
      <dd>层叠样式表，用于描述HTML文档样式的样式表语言。</dd>
      
      <dt>JavaScript</dt>
      <dd>一种编程语言，使网页具有交互性。</dd>
    </dl>
  </div>
</body>
</html>

总结

在本章中，我们学习了：

  1. 列表样式

    • 列表类型（list-style-type）
    • 列表图像（list-style-image）
    • 列表位置（list-style-position）
    • 列表简写属性（list-style）
    • 自定义列表样式（使用::marker和::before）
    • CSS计数器
    • 多列列表
    • 响应式列表
    • 定义列表样式

  2. 链接样式

    • 链接状态（:link, :visited, :hover, :active）
    • 移除和自定义下划线
    • 渐变过渡效果
    • 按钮式链接
    • 图标链接
    • 导航菜单（水平和垂直）
    • 面包屑导航
    • 链接卡片
    • 可访问性考虑

通过这些技术，你可以创建既美观又实用的列表和链接，提升网站的用户体验和可用性。

实践建议

  1. 列表样式

    • 根据内容类型选择合适的列表类型
    • 使用自定义标记增强视觉吸引力
    • 确保列表项之间有足够的间距，提高可读性
    • 在响应式设计中考虑列表的布局变化

  2. 链接样式

    • 确保链接状态（正常、悬停、点击等）有明显的视觉区别
    • 保持网站链接样式的一致性
    • 为交互元素提供明确的视觉反馈
    • 考虑可访问性，确保链接在各种设备和辅助技术下都可用

  3. 导航设计

    • 使导航结构简单明了
    • 提供当前位置的视觉指示
    • 确保导航在各种屏幕尺寸下都可用
    • 考虑键盘导航和屏幕阅读器用户

练习

  1. 创建一个带有自定义标记的任务清单
  2. 设计一个多级导航菜单，包含下拉菜单
  3. 实现一个响应式的多列列表，在不同屏幕尺寸下调整列数
  4. 创建一个带有图标的链接按钮系统
  5. 设计一个使用CSS计数器的多级编号列表

进一步学习