Skip to main content

列表案例

所有案例的思路
  • 先完成结构
  • 重置样式 (body/a/ul)
  • 先整体，后局部
    • 顺序：按照从外往里。从上往下
  • 去除重复的代码 (css)
    • 将重复的逻辑放到一个单独的 class 中 (.icon)
    • 不同的代码抽到不同的 class(.new .hot)

文字后添加图标：

  1. 通过 ::after 添加图标

    p.content::after {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      content: url(./images/new.png);
    }

  2. 通过 background-image 添加图标

    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      background-image: url(./images/new.png);
    }
Loading Github Gist ...
Details