CSS杂记（三）

最新推荐文章于 2025-06-10 22:21:26 发布

MoeCodeFree

最新推荐文章于 2025-06-10 22:21:26 发布

阅读量120

点赞数

分类专栏： CSS HTML 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/zx442008375/article/details/120293153

版权

CSS 同时被 2 个专栏收录

15 篇文章

订阅专栏

HTML

12 篇文章

订阅专栏

CSS杂记（三）

CSS之table

border的样式区别

<table border="1">与table css样式border: 1px solid #000;的区别

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 300px;
        height: 300px;
        /* border: 1px solid #000; */
      }
    </style>
  </head>
  <body>
    <table border="1">
      <!-- <table> -->
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </table>
  </body>
</html>

<style>
    table {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
    }
</style>
</head>
<body>
    <!-- <table border="1"> -->
    <table>

可以看到区别在于，<table border="1">除了给table加外边框以外，还会给每个单元格加外边框，border: 1px solid #000;只会给table加外边框。

caption

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 300px;
        height: 300px;
        caption-side: bottom;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        测试表格
      </caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </table>
  </body>
</html>

如图，caption-side可以改变caption的位置。

合并单元格的边框 border-collapse

默认值是separate，会使得单元格之间有间隙，这里使用collapse消除间隙。

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 300px;
        height: 300px;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        测试表格
      </caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </table>
  </body>
</html>

单元格宽度保持一致 table-layout

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 300px;
        height: 300px;
        border-collapse: collapse;
        table-layout: fixed;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        测试表格
      </caption>
      <tr>
        <td>1</td>
        <td>222 222 222 222</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </table>
  </body>
</html>

如图，table-layout:fixed;可以保证表格宽度保持一致，如不设置，会默认设置为auto，当单元格内容过多时，会如下图所示显示

单元格内容水平居中显示 text-align + nth-child

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 300px;
        height: 300px;
        border-collapse: collapse;
      }

      table tr td:nth-child(2) {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        测试表格
      </caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </table>
  </body>
</html>

奇数行深色背景显示（nth-child(odd)）以及hover加深

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 300px;
        height: 300px;
        border-collapse: collapse;
      }

      table tr:nth-child(odd) {
        background: #424242;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        测试表格
      </caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </table>
  </body>
</html>

cde17d03-5a99-4cf1-ba96-c4d14f52d370

ul模拟表格

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

      .table {
        width: 300px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
      }

      /* 方法一，在li上设定边框 */
      /* .table li {
        width: 101px;
        height: 101px;
        border: 1px solid #000;
        margin: -1px 0 0 -1px;
        box-sizing: border-box;
        float: left;
      } */

      /* 方法二，在li和ul上一起设定边框 */
      .table li {
        width: 100px;
        height: 100px;
        border-left: 1px solid #000;
        border-top: 1px solid #000;
        box-sizing: border-box;
        float: left;
      }
    </style>
  </head>
  <body>
    <ul class="table clearfix">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

上述两种方法，推荐方法二

如下是第三种方法，实现左右无边框

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      .box {
        width: 300px;
        overflow: hidden;
      }

      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

      .table {
        width: 302px;
        margin-left: -1px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
      }

      /* 方法三，在li和ul上一起设定边框，左右无边框
      原理是，每一行的li三等分ul的宽度，在ul margin-left:-1px前，
      右边超出box div的2px被overflow:hidden隐藏掉，在ul margin-left:-1px后
      整个ul向左移动1px，导致ul左右两边都超出box div 1px，
      且在overflow:hidden的作用下，都被隐藏了。*/
      .table li {
        width: 33.33%;
        height: 100px;
        border-left: 1px solid #000;
        border-top: 1px solid #000;
        box-sizing: border-box;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul class="table clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

BFC（block formatting context）

块级格式化上下文

控制元素定位的方案

普通流 normal flow
浮动流 float
绝对定位 absolute position

触发BFC的条件

html元素
float:left right
position:absolute fixed
display:inline-block table-cell flex
overflow:hidden auto scroll

BFC的特性

1，在两个不同BFC容器里的元素，上下边距不会坍缩

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
      }

      .box1 {
        background: #f8bbd0;
        margin-bottom: 100px;
      }

      .box2 {
        background: #f06292;
        margin-top: 100px;
      }

      .container {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1"></div>
    </div>
    <div class="container">
      <div class="box box2"></div>
    </div>
  </body>
</html>

2，BFC容器可以解决子元素的垂直边距坍缩问题

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box1 {        width: 300px;        height: 300px;        background: #f8bbd0;        /* 当子元素使用垂直方向的margin时，父元素没有设置border，        则会导致margin坍缩，此时给父元素加边框或者触发父元素的BFC特性即可解决。        这个例子同时反应出了，BFC容器内部的元素无论发生什么变化都不会对BFC容器外部造成任何影响 */        /* border:1px solid transparent; */        /* overflow:hidden; */        display: inline-block;      }      .box2 {        width: 50px;        height: 50px;        background: #f06292;        margin:0 auto;        margin-top:100px;      }    </style>  </head>  <body>      <div class="box1">        <div class="box2"></div>      </div>    </div>  </body></html>

未触发父元素box1 div BFC特性前

触发父元素box1 div BFC特性后

Bonus ，另外测试了另一种情况，如果设置子元素为左浮动或者内联块，父元素与子元素之间的垂直边距也不会坍缩。另外也证明了margin:0 auto的水平居中方式对inline-block和浮动元素不起作用。

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background: #f8bbd0;
      }

      .box2 {
        width: 50px;
        height: 50px;
        background: #f06292;
        margin:0 auto;
        margin-top:100px;
        display: inline-block;
        /* float:left; */
      }
    </style>
  </head>
  <body>
      <div class="box1">
        <div class="box2"></div>
      </div>
    </div>
  </body>
</html>

3，BFC容器可以清除浮动（解决由于子元素浮动导致的高度为0的问题）

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        border: 10px solid #ad1457;
        overflow: hidden;
        /* float: left; */
        /* position: absolute; */
        /* position: fixed; */
        /* display: inline-block; */
        /* display: table-cell; */
        /* overflow: auto; */
      }

      .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background: #f8bbd0;
      }

      .box2 {
        float: left;
        width: 100px;
        height: 100px;
        background: #f06292;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

4，BFC元素不会被浮动元素覆盖

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background: #f8bbd0;
        float: left;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background: #f06292;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="box1">我是float</div>
    <div class="box2">
      我是可怜的元素我是可怜的元素我是可怜的元素我是可怜的元素我是可怜的元素我是可怜的元素
    </div>
  </body>
</html>

CSS书写顺序

显示属性：display, position, float, clear

自身属性：width, height, margin, padding, border, background

文本属性：color, font, text-align, vertical-align, whitespace

CSS属性简写

font属性

font: font-style font-weight font-size line-height font-family

example:

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        /* font: font-style font-weight font-size line-height font-family */
        font: italic bold 24px/12px "微软雅黑";
      }
    </style>
  </head>
  <body>
    <p>测试
      <br />
      测试
    </p>
  </body>
</html>

小数点

不写0

opacity:.8;

margin/padding/border

如果是非单一值就写成一行，例如

margin:1px 2px 3px 4px

rgb

如果十六进制里三组都是重复的，那就简写，如下

color:#fff

选择器命名方法

选择器复合单词用连字符(’’-’’)连接，例如small-badge

JS钩子ID复核单词用下划线("_")连接，例如js_hooks

选择器都用小写

尽可能使用英文

尽可能不要缩写，除非约定俗成的，例如hd, nav, btn

尽可能让命名有意义，语义化强，让别人能读懂

使用结构化命名（BEM命名规范）

fontawesome

https://fontawesome.dashgame.com/

一套绝佳的图标字体库和CSS框架

网站中有很多示例，可以参考来使用

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <link rel="stylesheet" href="css/font-awesome.min.css" />    <style>      ul {        margin: 0;        padding: 0;        list-style: none;      }      /* 修改图标使用字体相关css即可 */      /* .fa {        font-size: 60px;        color:red;        margin-right:30px;      } */    </style>  </head>  <body>    <ul>      <li>        <i class="fa fa-apple fa-fw"></i>        1      </li>      <li>        <!-- fa-fw是让图标具有固定宽度，写导航栏的时候用 -->        <i class="fa fa-apple fa-fw"></i>        2      </li>    </ul>    <!-- fa-lg是大码的图标, large -->    <i class="fa fa-apple fa-lg"></i>    <!-- fa-3x是5倍放大图标 -->    <i class="fa fa-apple fa-5x"></i>    <i class="fa fa-spinner fa-spin"></i>    <i class="fa fa-home fa-spin"></i>    <!-- fa-pulse 八方位旋转 -->    <i class="fa fa-refresh fa-pulse"></i>    <i class="fa fa-cog fa-pulse"></i>    <i class="fa fa-home fa-pulse"></i>  </body></html>

5f917cbc-0d40-45ce-9c01-f118c0ff737d

iconfont

www.iconfont.cn

阿里系的图标插画库

<!DOCTYPE html><html lang="zh-CH">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <link rel="stylesheet" href="css/icon.css" />  </head>  <body>    <i class="icon icon-nan"></i>    <i class="icon icon-nan1"></i>    <i class="icon icon-nan2"></i>    <i class="icon icon-nan3"></i>    <i class="icon icon-nan4"></i>    <i class="icon icon-nan5"></i>    <i class="icon icon-nan6"></i>    <i class="icon icon-nan7"></i>    <i class="icon icon-nv1"></i>    <i class="icon icon-nv2"></i>    <i class="icon icon-nv3"></i>    <i class="icon icon-nv4"></i>  </body></html>

.icon {
  width: 32px;
  height: 32px;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.icon-nan {
  background-image: url(../icons/nan.png);
}

.icon-nan1 {
  background-image: url(../icons/nan_1.png);
}

.icon-nan2 {
  background-image: url(../icons/nan_2.png);
}

.icon-nan3 {
  background-image: url(../icons/nan_3.png);
}

.icon-nan4 {
  background-image: url(../icons/nan_4.png);
}

.icon-nan5 {
  background-image: url(../icons/nan_5.png);
}

.icon-nan6 {
  background-image: url(../icons/nan_6.png);
}

.icon-nan7 {
  background-image: url(../icons/nan_7.png);
}

.icon-nv1 {
  background-image: url(../icons/nv_1.png);
}

.icon-nv2 {
  background-image: url(../icons/nv_2.png);
}

.icon-nv3 {
  background-image: url(../icons/nv_3.png);
}

.icon-nv4 {
  background-image: url(../icons/nv_4.png);
}

CSS之sprite

雪碧图，将多个图片做成一张图，然后通过CSS尺寸设置与定位来选择显示哪张。

**好处： **

减少HTTP请求，多张图片只需要请求一次
文件容量小

**不足： **

不方便维护，当需要调整雪碧图中的单个图片时，还需要重新制作雪碧图，所以最好分模块来制作雪碧图，多个模块之间的雪碧图互不干扰。

全倍大小版sprite

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/icon.css" />
  </head>
  <body>
    <!-- <i class="sprite"></i> -->
    <i class="sprite nan"></i>
    <i class="sprite nan_1"></i>
    <i class="sprite nan_2"></i>
    <i class="sprite nan_3"></i>
    <i class="sprite nan_4"></i>
    <i class="sprite nan_5"></i>
    <i class="sprite nan_6"></i>
    <i class="sprite nan_7"></i>
    <i class="sprite nv_1"></i>
    <i class="sprite nv_2"></i>
    <i class="sprite nv_3"></i>
    <i class="sprite nv_4"></i>
  </body>
</html>

.sprite {
  background: url("../icons/sprite.png") no-repeat top left;
  background-size: 686px 48px;
  width: 48px;
  height: 48px;
  display: inline-block;
}
.sprite.nan {
  background-position: 0 0;
}
.sprite.nan_1 {
  background-position: -58px 0;
}
.sprite.nan_2 {
  background-position: -116px 0;
}
.sprite.nan_3 {
  background-position: -174px 0;
}
.sprite.nan_4 {
  background-position: -232px 0;
}
.sprite.nan_5 {
  background-position: -290px 0;
}
.sprite.nan_6 {
  background-position: -348px 0;
}
.sprite.nan_7 {
  background-position: -406px 0;
}
.sprite.nv_1 {
  background-position: -464px 0;
}
.sprite.nv_2 {
  background-position: -522px 0;
}
.sprite.nv_3 {
  background-position: -580px 0;
}
.sprite.nv_4 {
  background-position: -638px 0;
}

半倍大小版sprite

.sprite {
  background: url("../icons/sprite.png") no-repeat top left;
  background-size: 343px 24px;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.sprite.nan {
  background-position: 0 0;
}
.sprite.nan_1 {
  background-position: -29px 0;
}
.sprite.nan_2 {
  background-position: -58px 0;
}
.sprite.nan_3 {
  background-position: -87px 0;
}
.sprite.nan_4 {
  background-position: -116px 0;
}
.sprite.nan_5 {
  background-position: -145px 0;
}
.sprite.nan_6 {
  background-position: -174px 0;
}
.sprite.nan_7 {
  background-position: -203px 0;
}
.sprite.nv_1 {
  background-position: -232px 0;
}
.sprite.nv_2 {
  background-position: -261px 0;
}
.sprite.nv_3 {
  background-position: -290px 0;
}
.sprite.nv_4 {
  background-position: -319px 0;
}

CSS之小数

不同的浏览器会对小数有不同的处理，有的是四舍五入，有的是向下取整

width:10.5px;

CSS sprite案例

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/icon.css" />
  </head>
  <body>
    <div class="funcs funcs__container">
      <ul class="funcs__list">
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_0"></i>
            <p>James</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_1"></i>
            <p>Snowden</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_2"></i>
            <p>Jacob</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_3"></i>
            <p>Vincent</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_4"></i>
            <p>Moe</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_5"></i>
            <p>Jelly</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_6"></i>
            <p>Chris</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nan_7"></i>
            <p>Brown</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nv_1"></i>
            <p>Lucas</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nv_2"></i>
            <p>Christopher</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nv_3"></i>
            <p>Lily</p>
          </a>
        </li>
        <li class="funcs__item">
          <a href="" class="funcs__link">
            <i class="icon icon-nv_4"></i>
            <p>Luna</p>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>

index.css 普通大小版本

body {
  background: #f4f4f4;
}

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

a {
  text-decoration: none;
  color: #424242;
  font-size: 12px;
}

p {
  margin: 0;
}

.clear::after {
  content: "";
  display: block;
  clear: both;
}

.funcs__container {
  width: 290px;
  height: 232px;
  margin: 100px auto;
  /* border: 1px solid #000; */
  background: #fff;
  overflow: hidden;
  border-radius: 20px;
}

.funcs__container .funcs__list {
  width: 294px;
  height: 232px;
  /* border: 1px solid tomato; */
  box-sizing: border-box;
  margin-left: -2px;
  border-bottom: 1px solid #f2f2f2;
}

.funcs__container .funcs__list .funcs__item {
  float: left;
  width: 25%;
  height: 77px;
  border-top: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  box-sizing: border-box;
  text-align: center;
}

.funcs__container .funcs__list .funcs__item .funcs__link {
  display: block;
  width: 100%;
  height: 100%;
}

icon.css 普通大小版本

.icon {
  background: url("../icons/sprite.png") no-repeat top left;
  background-size: 686px 48px;
  width: 48px;
  height: 48px;
  display: inline-block;
}

.icon.icon-nan_0 {
  background-position: 0 0;
}

.icon.icon-nan_1 {
  background-position: -58px 0;
}

.icon.icon-nan_2 {
  background-position: -116px 0;
}

.icon.icon-nan_3 {
  background-position: -174px 0;
}

.icon.icon-nan_4 {
  background-position: -232px 0;
}

.icon.icon-nan_5 {
  background-position: -290px 0;
}

.icon.icon-nan_6 {
  background-position: -348px 0;
}

.icon.icon-nan_7 {
  background-position: -406px 0;
}

.icon.icon-nv_1 {
  background-position: -464px 0;
}

.icon.icon-nv_2 {
  background-position: -522px 0;
}

.icon.icon-nv_3 {
  background-position: -580px 0;
}

.icon.icon-nv_4 {
  background-position: -638px 0;
}

index.css 半倍大小版本

body {
  background: #f4f4f4;
}

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

a {
  text-decoration: none;
}

p {
  margin: 0;
}

.clear::after {
  content: "";
  display: block;
  clear: both;
}

.funcs__container {
  width: 290px;
  height: 232px;
  margin: 100px auto;
  /* border: 1px solid #000; */
  background: #fff;
  overflow: hidden;
  border-radius: 20px;
}

.funcs__container .funcs__list {
  width: 294px;
  height: 232px;
  /* border: 1px solid tomato; */
  box-sizing: border-box;
  margin-left: -2px;
  border-bottom: 1px solid #f2f2f2;
}

.funcs__container .funcs__list .funcs__item {
  float: left;
  width: 25%;
  height: 77px;
  border-top: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  box-sizing: border-box;
  text-align: center;
}

.funcs__container .funcs__list .funcs__item .funcs__link {
  display: block;
  width: 100%;
  height: 100%;
  color: #424242;
  font-size: 8px;
  padding-top: 20px;
}

icon.css 半倍大小版本

.icon {
  background: url("../icons/sprite.png") no-repeat top left;
  background-size: 343px 24px;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-top: 20px;
}

.icon.icon-nan_0 {
  background-position: 0 0;
}

.icon.icon-nan_1 {
  background-position: -29px 0;
}

.icon.icon-nan_2 {
  background-position: -58px 0;
}

.icon.icon-nan_3 {
  background-position: -87px 0;
}

.icon.icon-nan_4 {
  background-position: -116px 0;
}

.icon.icon-nan_5 {
  background-position: -145px 0;
}

.icon.icon-nan_6 {
  background-position: -174px 0;
}

.icon.icon-nan_7 {
  background-position: -203px 0;
}

.icon.icon-nv_1 {
  background-position: -232px 0;
}

.icon.icon-nv_2 {
  background-position: -261px 0;
}

.icon.icon-nv_3 {
  background-position: -290px 0;
}

.icon.icon-nv_4 {
  background-position: -319px 0;
}

CSS之腾讯课堂课程列表案例

html

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程列表</title>
    <link rel="stylesheet" href="css/course_card.css" />
  </head>
  <body>
    <div class="course course__container">
      <ul class="course__list clearfix">
        <li class="course__item">
          <div class="course__chapters-info">随到随学（共5节）</div>
          <a href="" class="course__link">
            <img src="images/1.jpg" alt="" class="course__image" />
          </a>
          <h4 class="course__title">
            <a href=""
              >播音主持/配音声优/有声书/声音美化0基础学习 加微信zsxy8988</a
            >
          </h4>
          <div class="course__info">
            <span class="course__info-price">免费</span>
            <span class="course__info-enrollment">4404人最近报名</span>
          </div>
        </li>
        <li class="course__item">
          <div class="course__chapters-info">随到随学（共24节）</div>
          <a href="" class="course__link">
            <img src="images/2.jpg" alt="" class="course__image" />
          </a>
          <h4 class="course__title">
            <a href=""
              >【喵星人日语】萌新学日语零基础入门课-轻松掌握一口流利日语</a
            >
          </h4>
          <div class="course__info">
            <span class="course__info-price">￥1.00</span>
            <span class="course__info-enrollment">34人购买</span>
          </div>
        </li>
        <li class="course__item">
          <div class="course__chapters-info">随到随学（共17节）</div>
          <a href="" class="course__link">
            <img src="images/3.jpg" alt="" class="course__image" />
          </a>
          <h4 class="course__title">
            <a href="">亿启刘志桢：懒人理财，积少成多从小做起</a>
          </h4>
          <div class="course__info">
            <span class="course__info-price">免费</span>
            <span class="course__info-enrollment">175人最近报名</span>
          </div>
        </li>
        <li class="course__item">
          <div class="course__chapters-info">随到随学（共223节）</div>
          <a href="" class="course__link">
            <img src="images/4.png" alt="" class="course__image" />
          </a>
          <h4 class="course__title">
            <a href="">独立音乐人训练——编曲（音乐制作）公开直播课</a>
          </h4>
          <div class="course__info">
            <span class="course__info-price">免费</span>
            <span class="course__info-enrollment">275人最近报名</span>
          </div>
        </li>
        <li class="course__item">
          <div class="course__chapters-info">随到随学（共91节）</div>
          <a href="" class="course__link">
            <img src="images/5.jpg" alt="" class="course__image" />
          </a>
          <h4 class="course__title">
            <a href=""
              >流行音乐/零基础学唱歌/真假声/颤音/咽音等唱歌技巧 zhisheng70</a
            >
          </h4>
          <div class="course__info">
            <span class="course__info-price">￥999.00</span>
            <span class="course__info-badge">可试学</span>
            <span class="course__info-enrollment">2752人最近报名</span>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

css

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

ul,
li,
div {
  box-sizing: border-box;
}

h4 {
  margin: 0;
  font-weight: normal;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.course__container {
  width: 1200px;
  margin: 100px auto;
  /* border: 1px solid red; */
}

.course__container .course__list {
  width: 1227px;
  margin-left: -18px;
  /* border: 1px solid green; */
}

.course__container .course__list .course__item {
  float: left;
  width: 236px;
  height: 221px;
  margin-left: 9px;
  padding: 7px 7px 10px;
  border: 1px solid transparent;
  position: relative;
}

.course__container .course__list .course__item:hover {
  border: 1px solid #ddd;
  box-shadow: 1px 1px 2px 1px #ececec;
  /* transition: box-shadow 0.5s ease; */
  transition: border 0.5s ease, box-shadow 0.5s ease;
}

.course__container .course__list .course__item .course__chapters-info {
  position: absolute;
  top: 107px;
  left: 7px;
  width: 220px;
  height: 24px;
  padding-left: 4px;
  line-height: 24px;
  color: #ececec;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
}

.course__container .course__list .course__item .course__link {
  display: block;
  width: 220px;
  height: 124px;
  margin-bottom: 6px;
}

.course__container .course__list .course__item .course__link .course__image {
  height: 100%;
}

.course__container .course__list .course__item .course__title {
  height: 40px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
}

.course__container .course__list .course__item .course__title a {
  color: #333;
}

.course__container .course__list .course__item .course__title a:hover {
  color: #23b8ff;
}

.course__container
  .course__list
  .course__item
  .course__info
  .course__info-price {
  color: #f4621f;
  font-size: 14px;
}

.course__container
  .course__list
  .course__item
  .course__info
  .course__info-badge {
  color: #f4621f;
  font-size: 12px;
  padding: 2px;
  margin: 2px;
  border: 1px solid #f4621f;
  border-radius: 3px;
}

.course__container
  .course__list
  .course__item
  .course__info
  .course__info-enrollment {
  color: #999;
  margin-left: 10px;
  font-size: 12px;
}

d168aef5-8a12-4fa3-9aa6-272f1a4e7622