CSS

Stone大约 92 分钟

CSS

层叠样式表（Cascading Style Sheets，CSS），是一种样式表语言，用来描述 HTMLopen in new window 文档的呈现，即设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。

开始

在 HTML 文件中使用 CSS 有以下三种方式：

内部样式
外部样式
行内样式

内部样式

内部样式是将 CSS 写在 style 标签内。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>欢迎访问 stonecoding.net</p>
</body>
</html>

外部样式

外部样式是将 CSS 写在单独的文件中，在 HTML 文件中使用 link 标签引入。

创建文件 my.css：

p {
  color: blue;
}

在 HTML 中引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./my.css">
</head>
<body>
  <p>欢迎访问 stonecoding.net</p>
</body>
</html>

行内样式

外部样式是将 CSS 写在标签的 style 属性中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p style="color: yellow;">欢迎访问 stonecoding.net</p>
</body>
</html>

选择器

在实际开发中，一般将样式写在单独的 CSS 文件中，此时需要通过选择器来指定网页上我们想要样式化的 HTMLopen in new window 元素。

标签选择器

使用标签名作为选择器，相同标签名的样式一致。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>欢迎访问 stonecoding.net</p>
  <p>欢迎访问 stonecoding.net</p>
  <p>欢迎访问 stonecoding.net</p>
</body>
</html>

类选择器

使用 class="类名1 类名2" 属性为标签指定类名，在 CSS 中使用 .类名 选择对应的标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
    .size {
      font-size: 50px;
    }
  </style>
</head>
<body>
  <p class="red">欢迎访问 stonecoding.net</p>
  <p class="blue">欢迎访问 stonecoding.net</p>
  <div class="red size">欢迎访问 stonecoding.net</div>
</body>
</html>

其中：

类名自定义，不要用纯数字或中文，用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开

ID 选择器

使用 id="id名" 属性为标签指定 ID，在 CSS 中使用 #id名 选择对应的标签。ID 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #red {
      color: red;
    }
  </style>
</head>
<body>
  <p id="red">欢迎访问 stonecoding.net</p>
</body>
</html>

通配符选择器

使用通配符选择器 * 查找页面所有标签，设置相同样式。经常用于清除标签的默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <p>欢迎访问 stonecoding.net</p>
  <div>欢迎访问 stonecoding.net</div>
</body>
</html>

属性选择器

CSS 属性选择器允许根据元素的属性和属性值来选择元素。能够更精确地定位并样式化 HTML 文档中的元素。以下是几种常用的 CSS 属性选择器：

属性存在选择器

如果元素具有特定的属性，即使没有值，也可以使用该选择器。

input[type] {  
    background-color: yellow;  
}

这会选择所有具有 type 属性的 input 元素。

属性等于选择器

如果元素具有特定的属性并且该属性的值等于某个特定的值，可以使用此选择器。

input[type="text"] {  
    width: 200px;  
}

这会选择所有 type 属性值为 "text" 的 input 元素。

属性包含选择器

如果元素的属性值包含特定的子字符串，可以使用此选择器。

a[href*="google"] {  
    color: red;  
}

这会选择所有 href 属性值中包含 "google" 的 a 元素。

属性以特定值开始选择器

如果元素的属性值以特定的字符串开始，可以使用此选择器。

a[href^="https"] {  
    background-image: url('secure-icon.png');  
}

这会选择所有 href 属性值以 "https" 开始的 a 元素。

属性以特定值结束选择器

如果元素的属性值以特定的字符串结束，可以使用此选择器。

a[href$=".pdf"] {  
    color: purple;  
}

这会选择所有 href 属性值以 ".pdf" 结束的 a 元素。

属性包含特定单词选择器

如果元素的属性值由空格分隔的单词组成，并且您希望根据特定的单词选择元素，可以使用此选择器。

p[class~="highlight"] {  
    background-color: yellow;  
}

这会选择所有 class 属性中包含 "highlight" 这个单词的 p 元素。

请注意，CSS 属性选择器非常强大，但也应谨慎使用，因为过度使用可能会导致性能下降。确保在必要时使用它们，并尽量保持选择器的简单和高效。

盒子

常用的盒子样式有：

width：宽度
height：高度
background-color：颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div1 {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .div2 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="div1">stonecoding.net</div>
  <div class="div2">stonecoding.net</div>
</body>
</html>

文字

大小

使用 font-size 设置文字大小，默认大小为 16px。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>stonecoding.net</p>
</body>
</html>

粗细

使用 font-weight 设置文字粗细，指定为 400 或者 normal 不加粗，指定为 700 或者 bold 加粗。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h3 {
      font-weight: 400;
    }
    div {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h3>stonecoding.net</h3>
  <div>stonecoding.net</div>
</body>
</html>

倾斜

使用 font-style 设置文字倾斜，指定为 normal 不倾斜，指定为 italic 倾斜。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    em {
      font-style: normal;
    }
    div {
      font-style: italic;
    }
  </style>
</head>
<body>
  <em>stonecoding.net</em>
  <div>stonecoding.net</div>
</body>
</html>

字体

使用 font-family 设置字体。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

其中：

font-family 属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。
font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体。

行高

使用 line-height 设置行高，设置多行文本的间距，可以使用 数字+px 指定行高的具体大小，也可以使用 数字 指定行高为当前标签 font-size 属性值的倍数。行高包括文字高度，上间距和下间距。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-size: 20px;
      /* line-height: 30px; */
      line-height: 2;
    }
  </style>
</head>
<body>
  <p>程序最终的用途就是处理数据。一个业务系统，需要实现最基本的功能就是：用户在前端页面输入数据，后端程序对输入数据进行处理并存入数据库；用户在前端页面请求数据，后端程序从数据库中获取数据进行处理后，将数据发给用户。数据库作为业务系统最重要的基础设施，是开发人员必须学习的组件。</p>
</body>
</html>

可以将单行文字行高属性值设置为文字所在盒子的高度属性值，以实现单行文字垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      height: 100px;
      background-color: skyblue;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

复合属性

使用 font 设置文字复合属性，包括 倾斜加粗大小/行高字体，必须包含大小和字体，否则不生效。经常用于设置网页文字公共样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font: italic 700 30px/2 楷体;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

缩进

使用 text-indent 设置缩进，可以使用 数字+px 指定缩进的具体大小，推荐使用 数字+em 指定缩进为当前标签 font-size 属性值的倍数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      text-indent: 2em;
    }
  </style>
</head>
<body>
  <p>程序最终的用途就是处理数据。一个业务系统，需要实现最基本的功能就是：用户在前端页面输入数据，后端程序对输入数据进行处理并存入数据库；用户在前端页面请求数据，后端程序从数据库中获取数据进行处理后，将数据发给用户。数据库作为业务系统最重要的基础设施，是开发人员必须学习的组件</p>
</body>
</html>

对齐

使用 text-align 设置元素内容水平对齐方式。

属性值有：

left：左对齐
center：居中对齐
right：右对齐

文字居中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>stonecoding.net</h1>
</body>
</html>

图片居中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
    <img src="./dog.jpg" alt="">
  </div>
</body>
</html>

修饰线

使用 text-decoration 设置修饰线。

属性值有：

none：无
underline：下划线
line-through：删除线
overline：上划线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      text-decoration: none;
    }
    div {
      text-decoration: underline;
    }
    p {
      text-decoration: line-through;
    }
    span {
      text-decoration: overline;
    }
  </style>
</head>
<body>
  <a href="#">stonecoding.net</a>
  <div>stonecoding.net</div>
  <p>stonecoding.net</p>
  <span>stonecoding.net</span>
</body>
</html>

颜色

使用 color 设置文字颜色。

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red,green...	学习测试
rgb表示法	rgb(r,g,b)	r，g，b 表示红绿蓝三原色，取值：0 - 2555	了解
rgba表示法	rgba(r,g,b,a)	a 表示透明度，取值：0 - 1	开发使用
十六进制表示法	#RRGGBB	#000000，#ffcc00，简写：#000，#fc0	开发使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      color: red;
    }
    div {
      color: rgb(0,255,0);
    }
    p {
      color: rgba(0,0,0,0.5);
      background-color: aqua;
    }
    span {
      color: #0000ff;
    }
  </style>
</head>
<body>
  <a href="#">stonecoding.net</a>
  <div>stonecoding.net</div>
  <p>stonecoding.net</p>
  <span>stonecoding.net</span>
</body>
</html>

案例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      text-align: center;
      font-weight: 400;
      font-size: 30px;
      color: #333;
    }
    
    div {
      font-size: 14px;
      color: #999;
    }

    p {
      text-indent: 2em;
      font-size: 18px;
      color: #333;
    }

    .pic {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
  <div>来源：央视网 | 2222年12月12日 12:12:12</div>
  <p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
  <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
  <div class="pic">
    <img src="./1.jpg" alt="">
  </div>
  <p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
  <p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>
</body>
</html>

案例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      color: #333;
    }

    p {
      text-indent: 2em;
      font-size: 14px;
      color: #444;
      line-height: 30px;
    }

    a {
      color: #0069c2;
    }

    li {
      font-size: 14px;
      color: #444;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <h1>CSS（层叠样式表）</h1>
  <p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
  <p><strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
  <ul>
    <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
    <li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
    <li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
  </ul>
</body>
</html>

复合选择器

复合选择器由两个或多个基础选择器，通过不同的方式组合而成，以便更准确、更高效的选择目标元素（标签）。

后代选择器

使用后代选择器选中某元素的所有后代元素。

语法：父选择器子选择器 { CSS 属性}，父子选择器之间用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div span {
      color: red;
    }
  </style>
</head>
<body>
  <span>stonecoding.net</span>
  <div>
    <span>stonecoding.net</span>
    <p>
      <span>stonecoding.net</span>
    </p>
  </div>
</body>
</html>

子代选择器

使用子代选择器选中某元素的子代元素（最近的子级）。

语法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div > span {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <span>stonecoding.net</span>
    <p>
      <span>stonecoding.net</span>
    </p>
  </div>
</body>
</html>

并集选择器

使用并集选择器选中多组标签设置相同的样式。

语法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div,
    p,
    span {
      color: red;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
  <p>stonecoding.net</p>
  <span>stonecoding.net</span>
</body>
</html>

交集选择器

使用交集选择器选中同时满足多个条件的元素。

语法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p.box {
      color: red;
    }
  </style>
</head>
<body>
  <p class="box">stonecoding.net</p>
  <p>stonecoding.net</p>
  <div class="box">stonecoding.net</div>
</body>
</html>

伪类选择器

使用伪类选择器选中元素的某个状态设置样式。

获取焦点：选择器:focus { CSS 属性 }

选择被勾选的复选框：选择器:checked { CSS 属性 }

鼠标悬停状态：选择器:hover { CSS 属性 }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a:hover {
      color: red;
    }

    .box:hover {
      color: blue;
    }
  </style>
</head>
<body>
  <a href="#">stonecoding.net</a>
  <div class="box">stonecoding.net</div>
</body>
</html>

超链接的伪类：

:link：访问前
:visited：访问后
:hover：鼠标悬停
active：点击时（激活）

如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

工作中，一个 a 标签选择器设置超链接的样式， hover 状态特殊设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* a:link {
      color: red;
    }

    a:visited {
      color: green;
    }

    a:hover {
      color: blue;
    }

    a:active {
      color: orange;
    }   */
    a {
      color: red;
    }

    a:hover {
      color: green;
    }
  </style>
</head>
<body>
  <a href="#">stonecoding.net</a>
</body>
</html>

CSS 特性

CSS 特性：

继承性
层叠性
优先级

继承性

子级默认继承父级的文字控制属性。故可以将文字控制属性写在 body 中以指定所有元素的默认文字属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-size: 30px;
      color: red;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
  <p>stonecoding.net</p>
  <span>stonecoding.net</span>
  <a href="#">stonecoding.net</a>
</body>
</html>

注意：
如果标签有默认文字样式会继承失败。例如：a 标签的颜色、标题的字体大小。

层叠性

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      color: red;
      font-weight: 700;
    }

    div {
      color: green;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

优先级

当一个标签使用了多种选择器时，基于选择器的优先级进行匹配。选择器选中标签的范围越大，则优先级越低。具体如下：

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      color: red !important;
    }
     
    div {
      color: green;
    }

    .box {
      color: blue;
    }

    #test {
      color: orange;
    }
  </style>
</head>
<body>
  <div class="box" id="test" style="color: purple;">stonecoding.net</div>
</body>
</html>

对于复合选择器，按照以下公式计算：

（行内样式，ID 选择器个数，类选择器个数，标签选择器个数）

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高
继承权重最低

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* (0,0,2,1) */
    .c1 .c2 div {
      color: blue;
    }
    /* (0,1,0,1) */
    div #box3 {
      color: green;
    }
    /* (0,1,1,0) */
    #box1 .c3 {
      color: orange;
    }
  </style>
</head>
<body>
  <div id="box1" class="c1">
    <div id="box2" class="c2">
      <div id="box3" class="c3">
        stonecoding.net
      </div>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div p {
      color: red;
    }
    
    /* 继承权重最低 */
    .father {
      color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <p class="son">
      stonecoding.net
    </p>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* (0,2,0,0) */
    #father #son {
      color: blue;
    }

    /* (0,1,1,1) */
    #father p.c2 {
      color: black;
    }

    /* (0,0,2,2) */
    div.c1 p.c2 {
      color: red;
    }

    /* 继承权重最低 */
    #father {
      color: green !important;
    }

    /* 继承权重最低 */
    div#father.c1 {
      color: yellow;
    }
  </style>
</head>
<body>
  <div id="father" class="c1">
    <p id="son" class="c2">
      stonecoding.net
    </p>
  </div>
</body>
</html>

Emmet 写法

Emmet 写法是代码的简写方式，在 VS Code 输入缩写会自动生成对应的 HTML 和 CSS 代码。

HTML：

说明	标签结构	Emmet
类选择器	`<div class="box"></div>`	`div.box`
ID 选择器	`<div id="box"></div>`	`div#box`
同级标签	`<div></div><p></p>`	`div+p`
父子级标签	`<div><p></p></div>`	`div>p`
多个相同标签	`<span></span><span></span><span></span>`	`span*3`
有内容的标签	`<div>stonecoding.net</div>`	`div{stonecoding.net}`

CSS：

说明	CSS 属性	Emmet
宽度	`width`	`w`
宽度 500px	`width: 500px;`	`w500`
背景色	`background-color: #fff;`	`bgc`
多个属性	`width: 200px;height: 100px;background-color: #fff;`	`w200+h100+bgc`

背景

背景图

使用背景图实现装饰性的图片效果。

属性名：background-image（bgi）
属性值：url (背景图 URL)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-image: url(./1.jpg);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

注意：
背景图默认为平铺（复制）效果。

平铺方式

属性名：background-repeat（bgr）
属性值：
- no-repeat：不平铺，图片显示在盒子左上角
- repeat：平铺（默认），图片不够盒子大小会复制图片来占满盒子
- repeat-x：水平平铺，水平方向会复制图片来占满盒子
- repeat-y：垂直平铺，垂直方向会复制图片来占满盒子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      background-image: url(./1.jpg);
      /* background-repeat: no-repeat; */
      /* background-repeat: repeat; */
      /* background-repeat: repeat-x; */
      background-repeat: repeat-y;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

背景图位置

属性名：background-position（bgp）
属性值：水平方向位置垂直方向位置

位置可以是：

关键字：
- left：左侧
- right：右侧
- center：居中
- top：顶部
- bottom：底部
坐标：
- 水平：正数向右；负数向左
- 垂直：正数向下；负数向上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      background-image: url(./1.jpg);
      background-repeat: no-repeat;
      /* background-position: 0 0; */
      /* background-position: left top; */
      /* background-position: right bottom; */
      /* background-position: 50px center; */
      background-position: left;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

注意：

关键字取值方式写法，可以颠倒取值顺序。
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中。

背景图缩放

属性名：background-size（bgz）

常用属性值：

关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白。
百分比：根据盒子尺寸计算图片大小，图片宽度与盒子宽度一致，图片高度按照图片比例等比例缩放。
数字 + 单位（例如：px）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      background-image: url(./1.jpg);
      background-repeat: no-repeat;
      background-size: contain;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment（bga）

属性值：fixed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-image: url(./1.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

背景复合属性

属性名：background（bg）

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（空格隔开各个属性值，不区分顺序）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background: pink url(./1.jpg) no-repeat center/cover;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

显示模式

不同的标签在网页上的显示方式不一样，有的独占一行，比如 div，有的一行显示多个，比如 span。在布局网页的时，需要根据标签的显示模式选择合适的标签来摆放内容。

显示模式包括：

块级元素
行内元素
行内块元素

各个标签的默认显示模式如下：

显示模式	标签
块级元素	`<p>`, `<h1>` - `<h6>`, `<div>`, `<ul>`, `<ol>`, `<li>`, `<table>`, `<form>`, `<header>`, `<footer>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<blockquote>`, `<pre>`, `<hr>`
行内元素	`<span>`, `<a>`, `<strong>`, `<em>`, `<b>`, `<i>`, `<u>`, `<s>`, `<code>`, `<img>`, `<input>`, `<textarea>`, `<select>`, `<button>`, `<label>`, `<br/>`, `<sup>`, `<sub>`, `<small>`, `<big>`
行内块元素	`<img>`, `<input>`, `<button>`, `<select>`, `<textarea>`

块级元素

例如 div，有以下特点：

独占一行
宽度默认是父级的 100%
添加宽高属性生效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 100px;
    }

    .div1 {
      background-color: brown;
    }

    .div2 {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="div1">stonecoding.net</div>
  <div class="div2">stonecoding.net</div>
</body>
</html>

行内元素

例如 span，有以下特点：

一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      width: 100px;
      height: 100px;
    }

    .span1 {
      background-color: red;
    }

    .span2 {
      background-color: orange;
    }
  </style>
</head>
<body>
  <span class="span1">stonecoding.net</span>
  <span class="span2">stonecoding.net</span>
</body>
</html>

行内块元素

例如 img，有以下特点：

一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <img src="./1.jpg" alt="">
  <img src="./1.jpg" alt="">
</body>
</html>

转换显示模式

属性：display
属性值：
- block：块级，常用
- inline：行内，不常用
- inline-block：行内块，常用

将块级元素 div 转换为行内块元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 100px;
      display: inline-block;
    }

    .div1 {
      background-color: brown;
    }

    .div2 {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="div1">stonecoding.net</div>
  <div class="div2">stonecoding.net</div>
</body>
</html>

将行内元素 span 转换为行内块元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      width: 200px;
      height: 100px;
      /* display: block; */
      display: inline-block;
    }

    .span1 {
      background-color: red;
    }

    .span2 {
      background-color: orange;
    }
  </style>
</head>
<body>
  <span class="span1">stonecoding.net</span>
  <span class="span2">stonecoding.net</span>
</body>
</html>

将行内块元素 img 转换为块级元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 100px;
      height: 100px;
      display: block;
    }
  </style>
</head>
<body>
  <img src="./1.jpg" alt="">
  <img src="./1.jpg" alt="">
</body>
</html>

案例三

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      display: block;
      width: 200px;
      height: 80px;
      background-color: #3064bb;
      color: #fff;
      text-decoration: none;
      text-align: center;
      line-height: 80px;
      font-size: 18px;
    }

    a:hover {
      background-color: #608dd9;
    }
  </style>
</head>
<body>
  <a href="#">HTML</a>
  <a href="#">CSS</a>
  <a href="#">JavaScript</a>
  <a href="#">Vue</a>
  <a href="#">React</a>
</body>
</html>

案例四

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .banner {
      height: 500px;
      background-color: #f3f3f4;
      background-image: url(./bk.png);
      background-repeat: no-repeat;
      background-position: left bottom;

      /* 文字控制属性，继承给子级 */
      text-align: right;
      color: #333;
    }

    .banner h2 {
      font-size: 36px;
      font-weight: 400;
      line-height: 100px;
    }

    .banner p {
      font-size: 20px;
    }

    .banner a {
      width: 125px;
      height: 40px;
      background-color: #f06b1f;


      display: inline-block;
      /* 转块级无法右对齐，因为块元素独占一行 */
      /* display: block; */

      text-align: center;
      line-height: 40px;
      color: #fff;
      text-decoration: none;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="banner">
    <h2>让创造产生价值</h2>
    <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
    <a href="#">我要报名</a>
  </div>
</body>
</html>

高级选择器

结构伪类选择器

使用结构伪类选择器根据元素的结构关系查找元素。

选择器:fist_child：查找第一个元素。
选择器:last_child：查找最后一个元素。
选择器:nth_child(N)：查找第 N 个元素（第一个元素 N 为 1）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li:first-child {
      background-color: red;
    }

    li:last-child {
      background-color: blue;
    }

    /* 从 1 开始计数 */
    li:nth-child(3) {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
 </ul>
</body>
</html>

对于 nth_child(N)，可以为其指定公式：

公式	功能
2n	偶数标签
2n+1	奇数标签
5n	5 的倍数标签
n+5	第 5 个及之后的标签
-n+5	第 5 个及之前的标签

注意：n 取值从 0 开始。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* li:nth-child(2n) {
      background-color: green;
    } */

    /* li:nth-child(2n+1) {
      background-color: red;
    } */

    /* li:nth-child(5n) {
      background-color: red;
    } */

    /* li:nth-child(n+5) {
      background-color: red;
    } */

    li:nth-child(-n+5) {
      background-color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
    <li>li 9</li>
    <li>li 10</li>
 </ul>
</body>
</html>

伪元素选择器

使用伪元素选择器创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器::before：在元素里面最前面添加一个伪元素。
选择器::after：在元素里面最后面添加一个伪元素。

注意：

必须设置 content: ”” 属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。
伪元素默认是行内显示模式。
其权重与标签选择器相同。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    div::before {
      content: "老鼠";

      width: 100px;
      height: 100px;
      background-color: blue;
      display: block;
    }

    div::after {
      content: "大米";

      width: 100px;
      height: 100px;
      background-color: orange;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div>爱</div>
</body>
</html>

盒子模型

使用盒子模型布局网页，包括：

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      padding: 20px;
      border: 1px solid #000;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

边框线

属性名：border（bd）
属性值：边框线粗细线条样式颜色（不区分顺序）

线条样式有：

solid：实线
dashed：虚线
dotted：点线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      border: 2px dashed green;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
属性值：边框线粗细线条样式颜色（不区分顺序）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      border-top: 1px solid #000;
      border-right: 2px dashed red;
      border-bottom: 5px dotted green;
      border-left: 10px solid orange;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

内边距

属性名：padding 或者 padding-方位名词

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      /* padding: 20px; */
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 40px;
      padding-left: 80px;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

padding 的属性值可以写多个：

值个数	示例	含义
1	`padding: 10px;`	四个方向内边距均为 10px
2	`padding: 10px 80px;`	上下：10px；左右：80px
3	`padding: 10px 40px 80px;`	上：10px；左右：40px；下：80px
4	`padding: 10px 20px 40px 80px;`	上：10px；右：40px；下：40px；左：80px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      padding: 10px 20px 40px 80px;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

规律：
从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

尺寸计算

盒子尺寸 = 内容尺寸 + 边框尺寸（border） + 内边距尺寸（padding）

因此给盒子加设置 border 或者 padding 会撑大盒子。

为保持盒子尺寸不变，可以：

手动做减法，减掉 border 或者 padding 的尺寸。
內减模式：box-sizing: border-box。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      padding: 20px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

外边距

使用外边距设置两个盒子之间的距离。不会撑大盒子。

属性名：margin 或者 margin-方位名词，设置与 padding 类似。

使用 margin: 0 auto; 设置版心居中，此时盒子需要有宽度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 1000px;
      height: 200px;
      background-color: pink;

      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

清除默认样式

清除标签默认的样式，比如：默认的内外边距。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认内外边距 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 清除列表项目符号 */
    li {
      list-style: none;
    }
  </style>
</head>
<body>
  <h1>stonecoding.net</h1>
  <p>stonecoding.net</p>
  <ul>
    <li>stonecoding.net</li>
  </ul>
</body>
</html>

元素溢出

控制溢出元素的内容的显示方式。

属性名：overflow
属性值：
- hidden：溢出隐藏
- scroll：溢出滚动，无论是否溢出，都显示滚动条位置
- auto：溢出滚动，溢出才显示滚动条位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;

      overflow: hidden;
      /* overflow: scroll; */
      /* overflow: auto; */
    }
  </style>
</head>
<body>
  <div>程序最终的用途就是处理数据。一个业务系统，需要实现最基本的功能就是：用户在前端页面输入数据，后端程序对输入数据进行处理并存入数据库；用户在前端页面请求数据，后端程序从数据库中获取数据进行处理后，将数据发给用户。数据库作为业务系统最重要的基础设施，是开发人员必须学习的组件。</div>
</body>
</html>

外边距合并

垂直排列的兄弟元素，上下 margin 会合并，取两个 margin 中的较大值生效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one {
      width: 100px;
      height: 100px;
      background-color: brown;
      margin-bottom: 20px;
    }

    .two {
      width: 100px;
      height: 100px;
      background-color: yellow;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div class="one">one</div>
  <div class="two">tow</div>
</body>
</html>

以上代码两个盒子的间距为 50px。

外边距塌陷

父子级的标签，子级添加上外边距会产生塌陷，导致父级一起向下移动。

解决方法：

取消子级 margin，父级设置 padding，推荐。
父级设置 overflow: hidden。
父级设置 border-top。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: pink;
      padding-top: 50px;
      box-sizing: border-box;

      /* overflow: hidden;
      border-top: 1px solid #000; */
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: orange;
      /* margin-top: 50px; */
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">son</div>
  </div>
</body>
</html>

行内元素垂直位置

行内元素添加 margin 和 padding，无法改变元素垂直位置。给行内元素添加 line-height 可以改变垂直位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      margin: 50px;
      padding: 50px;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <span>stonecoding.net</span>
  <span>stonecoding.net</span>
</body>
</html>

圆角

设置元素的外边框为圆角。

属性名：border-radius
属性值：数字 + px / 百分比

属性值是圆角半径。

border-radius的属性值可以写多个：

值个数	示例	含义
1	`border-radius: 10px;`	四个角均为 10px
2	`border-radius: 10px 80px;`	左上右下：10px；右上左下：80px
3	`border-radius: 10px 40px 80px;`	左上：10px；右上左下：40px；右下：80px
4	`border-radius: 10px 20px 40px 80px;`	左上：10px；右上：40px；右下：40px；左下：80px

从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      margin: 50px auto;
      width: 200px;
      height: 200px;
      background-color: orange;
      
      border-radius: 10px 20px 40px 80px;
    }
  </style>
</head>
<body>
  <div>stonecoding.net</div>
</body>
</html>

正圆形状：给正方形盒子设置圆角属性值为宽高的一半或者 50%。

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      height: 200px;
      /* border-radius: 100px; */
      border-radius: 50%;
    }

    div {
      width: 200px;
      height: 80px;
      background-color: orange;
      border-radius: 40px;
    }
  </style>
</head>
<body>
  <img src="./1.jpg" alt="">
  <div></div>
</body>
</html>

阴影

给元素设置阴影效果。

属性名：box-shadow
属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量 和 Y 轴偏移量 必须书写
默认是外阴影，内阴影需要添加 inset

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      margin: 50px auto;
      width: 200px;
      height: 80px;
      background-color: orange;
      box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

案例五-产品卡片

CSS 书写顺序：

盒子模型属性
文字样式
圆角、阴影等修饰属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #f1f1f1;
    }

    .product {
      margin: 50px auto;
      padding-top: 40px;
      width: 270px;
      height: 253px;
      background-color: #fff;
      text-align: center;
      border-radius: 10px;
    }

    .product h4 {
      margin-top: 20px;
      margin-bottom: 12px;
      font-size: 18px;
      color: #333;
      font-weight: 400;
    }

    .product p {
      font-size: 12px;
      color: #555;
    }
  </style>
</head>
<body>
  <div class="product">
    <img src="./liveSDK.png" alt="">
    <h4>抖音直播SDK</h4>
    <p>包含抖音直播看播功能</p>
  </div>
</body>
</html>

案例六-新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .news {
      margin: 100px auto;
      width: 360px;
      height: 200px;
    }

    .news .hd {
      height: 34px;
      background-color: #eee;
      border: 1px solid #dbdee1;
      border-left: 0;
    }

    .news .hd a {
      margin-top: -1px;
      display: block;
      border-top: 3px solid #ff8400;
      border-right: 1px solid #dbdee1;
      width: 48px;
      height: 34px;
      background-color: #fff;

      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #333;
    }

    .news .bd {
      padding: 5px;
    }

    .news .bd li {
      padding-left: 15px;
      background-image: url(./square.png);
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    .news .bd li a {
      padding-left: 20px;
      background: url(./img.gif) no-repeat 0 center;
      font-size: 12px;
      color: #666;
      line-height: 24px;
    }

    .news .bd li a:hover {
      color: #ff8400;
    }

  </style>
</head>
<body>
  <div class="news">
    <div class="hd"><a href="#">新闻</a></div>
    <div class="bd">
      <ul>
        <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
        <li><a href="#">在希望的田野上...</a></li>
        <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
        <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
        <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
        <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

浮动

让块元素水平排列。

属性名：float
属性值：
- left：左对齐
- right：右对齐

特点：

浮动后的盒子顶对齐。
浮动后的盒子具备行内块特点。
浮动后的盒子脱标，不占用标准流的位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one {
      width: 100px;
      height: 100px;
      background-color: brown;
      float: left;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: right;
    }
  </style>
</head>
<body>
  <div class="one">one</div>
  <div class="two">two</div>
</body>
</html>

产品区域布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .product {
      margin: 50px auto;
      width: 1226px;
      height: 628px;
      background-color: pink;
    }

    .left {
      float: left;
      width: 234px;
      height: 628px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 978px;
      height: 628px;
      background-color: brown;
    }

    .right li {
      float: left;
      margin-right: 14px;
      margin-bottom: 14px;
      width: 234px;
      height: 300px;
      background-color: orange;
    }

    /* 第四个 li 和第八个 li 去掉右侧的 margin */
    .right li:nth-child(4n) {
      margin-right: 0;
    }

    /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
  </style>
</head>
<body>
  <!-- 版心：左右，右面：8 个产品 → 8 个 li -->
  <div class="product">
    <div class="left"></div>
    <div class="right">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>
</html>

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

正常情况：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top {
      margin: 10px auto;
      width: 1200px;
      height: 300px;
      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

注释掉父级盒子的高度：

    .top {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

清除浮动方法一：额外标签法，在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

    .clearfix {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

清除浮动方法二：单伪元素法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

    .clearfix {
      clear: both;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

清除浮动方法三：双伪元素法（推荐）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

    .clearfix {
      clear: both;
    }

    /* before 解决外边距塌陷问题 */
    /* 双伪元素法 */
    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
    }

    /* after 清除浮动 */
    .clearfix::after {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

清除浮动方法四：父元素添加 CSS 属性 overflow:hidden。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
      
      overflow: hidden;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

    .clearfix {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

Flex 布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。让块元素水平排列。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      
      /* height: 300px; */
      border: 1px solid #000;
    }

    .box div {
      /* float: left;
      margin: 50px; */
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

Flex 组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 弹性容器 */
    .box {
      display: flex;
      justify-content: space-between;
      
      height: 300px;
      border: 1px solid #000;
    }

    /* 弹性盒子，沿着主轴方向排列 */
    .box div {
      width: 200px;
      /* height: 100px; */
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

主轴对齐方式

使用属性 justify-content 设置主轴对齐方式：

属性值	效果
`flex-start`	默认值，弹性盒子从起点开始依次排列
`flex-end`	弹性盒子从终点开始依次排列
`center`	弹性盒子沿主轴居中排列
`space-between`	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
`space-around`	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
`space-evenly`	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	效果
`stretch`	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子在侧轴方向没有尺寸才能拉伸）
`center`	弹性盒子沿侧轴居中对齐
`flex-start`	弹性盒子从起点开始依次排列
`flex-end`	弹性盒子从终点开始依次排列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      align-items: stretch;
      
      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      width: 100px;
      /* 弹性盒子在侧轴方向没有尺寸才能拉伸 */
      /* height: 100px; */
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      align-items: flex-end;
      
      height: 300px;
      border: 1px solid #000;
    }

    .box div:nth-child(2) {
      align-self: center;
    }

    .box div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向。使用属性 flex-direction 修改主轴方向。

属性值	效果
`row`	水平方向，从左向右，默认值
`column`	垂直方向，从上向下，常用
`row-reverse`	水平方向，从右向左
`column-reverse`	垂直方向，从下向上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      
      /* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */
      flex-direction: column;

       /* 主轴在垂直，视觉效果：垂直居中 */
      justify-content: center;

      /* 侧轴在水平，视觉效果：水平居中 */
      align-items: center;
      width: 150px;
      height: 120px;
      background-color: pink;
    }

    img {
      width: 32px;
      height: 32px;
    }
    
  </style>
</head>
<body>
  <div class="box">
    <img src="./1.png" alt="">
    <span>媒体</span>
  </div>
</body>
</html>

弹性伸缩比

控制弹性盒子主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
    .box {
      display: flex;
      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      height: 100px;
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 200px;
    }

    /* 除去 div 1 后，分为 3 份，div 2 占 1 份 */
    .box div:nth-child(2) {
      flex: 1;
    }

    /* div 3 占 2 份 */
    .box div:nth-child(3) {
      flex: 2;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap
属性值：
- wrap：换行
- nowrap：不换行（默认）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>
</body>
</html>

行对齐方式

属性名：align-content

属性值与主轴对齐方式的属性值一样：

属性值	效果
`flex-start`	默认值，弹性盒子从起点开始依次排列
`flex-end`	弹性盒子从终点开始依次排列
`center`	弹性盒子沿主轴居中排列
`space-between`	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
`space-around`	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
`space-evenly`	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      /* align-content: flex-start; */
      /* align-content: flex-end; */
      /* align-content: center; */
      /* align-content: space-between; */
      /* align-content: space-around; */
      align-content: space-evenly;

      height: 400px;
      border: 1px solid #000;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>
</html>

注意：
该属性对单行弹性盒子模型无效，即需要有 flex-wrap: wrap; 才能生效。

案例七-抖音解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .box {
      margin: 50px auto;
      width: 1200px;
      height: 418px;
      border: 1px solid #ddd;
      border-radius: 10px;
    }

    .box ul {
      display: flex;

      /* 弹性盒子换行 */
      flex-wrap: wrap;

       /* 调整主轴对齐方式 */
      justify-content: space-between;

      /* 调整行对齐方式 */
      align-content: space-between;
      padding: 90px 40px 90px 60px;
      height: 418px;
    }

    .box li {
      display: flex;
      width: 500px;
      height: 88px;
    }

    .box .pic {
      margin-right: 15px;
    }

    .box .text h4 {
      line-height: 40px;
      font-size: 20px;
      font-weight: 400;
      color: #333;
    }

    .box .text p {
      font-size: 14px;
      color: #666;
    }
    
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li>
        <div class="pic">
          <img src="./1.svg" alt="">
        </div>
        <div class="text">
          <h4>一键发布多端</h4>
          <p>发布视频到抖音短视频、西瓜视频及今日头条</p>
        </div>
        <li>
          <div class="pic">
            <img src="./2.svg" alt="">
          </div>
          <div class="text">
            <h4>管理视频内容</h4>
            <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./3.svg" alt="">
          </div>
          <div class="text">
            <h4>发布携带组件</h4>
            <p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./4.svg" alt="">
          </div>
          <div class="text">
            <h4>数据评估分析</h4>
            <p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估</p>
          </div>
        </li>
      </li>
    </ul>
  </div>
</body>
</html>

案例八-学成在线

准备工作

项目目录

网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript 等。

study
- images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等。
- uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图等需要上传的图片。
- css 文件夹：存放 CSS 文件（link 标签引入）
  - base.css：基础公共样式，例如：清除默认样式，设置网页基本样式。
  - index.css：首页 CSS 样式
- index.html：首页 HTML 文件

基础公共样式如下：

/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

body {
    font:14px/1.5 "Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei", sans-serif;
    color: #333;
}

a {
    color: #333;
    text-decoration: none;
}

在 index.html 引入 CSS 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学成在线</title>
  <!-- 顺序要求：先清除再设置 -->
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  
</body>
</html>

在 index.css 创建版心居中效果类并设置整体背景色：

/* 首页样式 */
/* 版心居中 */
.wrapper {
  margin: 0 auto;
  width: 1200px;
}

body {
  background-color: #f3f5f7;
}

布局思路

HTML 布局思路：先整体再局部，从外到内，从上到下，从左到右
CSS 实现思路：
- 画盒子，调整盒子范围 → 宽高背景色
- 调整盒子位置 → flex 布局、内外边距
- 控制图片、文字内容样式

整体布局

HTML 结构：通栏（宽度与浏览器窗口相同的盒子） > 版心 > Logo + 导航 + 搜索+ 用户

  <!-- 头部区域 -->
  <div class="header">
    <div class="wrapper">
      <!-- Logo -->
      <div class="logo">logo</div>
      <!-- 导航 -->
      <div class="nav">nav</div>
      <!-- 搜索 -->
      <div class="search">search</div>
      <!-- 用户 -->
      <div class="user">user</div>
    </div>
  </div>

CSS 样式：

/* 头部区域 */
.header {
  height: 100px;
  background-color: #fff;
}

.header .wrapper {
  padding-top: 29px;
  display: flex;
}

Logo 区域

单击跳转到首页
搜索引擎优化：提升网站百度搜索排名

HTML 结构：div > h1 > a > 网站名称（搜索关键字）

      <!-- Logo -->
      <div class="logo">
        <h1><a href="#">学成在线</a></h1>
      </div>

CSS 样式：

/* Logo 区域 */
.logo a {
  display: block;
  width: 195px;
  height: 41px;
  background-image: url(../images/logo.png);
  font-size: 0;
}

导航区域

标签结构：div > ul > li * 3 > a
优势：避免堆砌 a 标签，导致网站搜索排名降级
布局思路：
- li 设置右侧 margin
- a 设置左右 padding

HTML 结构：

      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li><a href="#" class="active">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>

CSS 样式：

/* 导航区域 */
.nav {
  margin-left: 102px;
}

.nav ul {
  display: flex;
}

.nav li {
  margin-right: 24px;
}

.nav li a {
  display: block;
  padding: 6px 8px;
  line-height: 27px;
  font-size: 19px;
}

/* actvie 类选择器，表示默认选中的 a */
.nav li .active,
.nav li a:hover {
  border-bottom: 2px solid #00a4ff;
}

搜索区域

标签结构：div > input + a / button

HTML 结构：

      <!-- 搜索 -->
      <div class="search">
        <input type="text" placeholder="请输入关键字">
        <a href="#"></a>
      </div>

CSS 样式：

/* 搜索区域 */
.search {
  display: flex;
  margin-left: 64px;
  padding-left: 19px;
  padding-right: 12px;
  width: 412px;
  height: 40px;
  background-color: #f3f5f7;
  border-radius: 20px;
}

.search input {
  flex: 1;
  border: 0;
  background-color: transparent;
  /* 去掉表单空间的焦点框 */
  outline: none;
}

/* ::placeholder 选中就是 placeholder 属性文字样式 */
.search input::placeholder {
  font-size: 14px;
  color: #999;
}

/* 父级是 flex 布局，子级变弹性盒子：加宽高生效 */
.search a {
  /* 搜索图标居中对齐 */
  align-self: center;
  width: 16px;
  height: 16px;
  background-image: url(../images/search.png);
}

用户区域

标签结构：div > a > img + span

HTML 结构：

      <!-- 用户 -->
      <div class="user">
        <a href="#">
          <img src="./uploads/user.png" alt="">
          <span>播仔学前端</span>
        </a>
      </div>

CSS 样式：

/* 用户区域 */
.user {
  margin-left: 32px;
  margin-top: 4px;
}

.user img {
  margin-right: 7px;
  /* vertical-align 行内块和行内垂直方向对齐方式 */
  vertical-align: middle;
}

.user span {
  font-size: 16px;
  columns: #666;
}

整体布局

标签结构：通栏 > 版心 > 左侧 div + 右侧 div

HTML 结构：

  <!-- Banner 区域 -->
  <div class="banner">
    <div class="wrapper">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </div>

CSS 样式：

/* Banner 区域 */
.banner {
  height: 420px;
  background-color: #0092cb;
}

.banner .wrapper {
  display: flex;
  justify-content: space-between;
  height: 420px;
  background-image: url(../uploads/banner.png);
}

左侧导航

标签结构：左侧 div > ul > li * 9 > a

布局思路：背景图为白色右箭头。

HTML 结构：

      <!-- 左侧导航 -->
      <div class="left">
        <ul>
          <li><a href="#">前端开发</a></li>
          <li><a href="#">后端开发</a></li>
          <li><a href="#">移动开发</a></li>
          <li><a href="#">人工智能</a></li>
          <li><a href="#">商业预测</a></li>
          <li><a href="#">云计算&大数据</a></li>
          <li><a href="#">运维&测试</a></li>
          <li><a href="#">UI设计</a></li>
          <li><a href="#">产品</a></li>
        </ul> 
      </div>

CSS 样式：

/* 左侧导航 */
.left {
  padding: 3px 20px;
  width: 191px;
  height: 420px;
  background-color: rgba(0, 0, 0, 0.42);
}

.banner .left a {
  /* 块级：宽度是父级的 100% */
  display: block;
  height: 46px;
  background: url(../images/right.png) no-repeat right center;
  line-height: 46px;
  font-size: 16px;
  color: #fff;
}

.banner .left a:hover {
  background-image: url(../images/right-hover.png);
  color: #00a4ff;
}

右侧列表

标签结构：右侧 div > h3 + div

HTML 结构：

      <!-- 右侧列表 -->
      <div class="right">
        <h3>我的课程表</h3>
        <div class="content">
          <dl>
            <dt>数据可视化课程</dt>
            <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
          </dl>
          <dl>
            <dt>Vue3医疗项目课程  </dt>
            <dd><span>正在学习</span>-<strong>认识组合式API</strong></dd>
          </dl>
          <dl>
            <dt>React核心技术课程</dt>
            <dd><span>正在学习</span>-<strong>rudex配合TS使用</strong></dd>
          </dl>
          <a href="#">全部课程</a>
        </div>
      </div>

CSS 样式：

/* 右侧列表 */
.banner .right {
  margin-top: 60px;
  width: 218px;
  height: 305px;
  background-color: #209dd5;
  border-radius: 10px;
}

.banner .right h3 {
  margin-left: 14px;
  height: 48px;
  line-height: 48px;
  font-size: 15px;
  color: #fff;
  font-weight: 400;
}

.banner .right .content {
  padding: 14px;
  height: 257px;
  background-color: #fff;
  border-radius: 10px;
}

.banner .right dl {
  margin-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.banner .right dd {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
}

.banner .right dd span {
  color: #00a4ff;
}

.banner .right dd strong {
  color: #7d7d7d;
  font-weight: 400;
}

.banner .right a {
  display: block;
  height: 32px;
  background-color: #00a4ff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #fff;
  border-radius: 15px;
}

精品区域

标签结构：div > h3 + ul + a

布局思路：Flex 布局

HTML 结构：

  <!-- 精品区域 -->
  <div class="recommend wrapper">
    <h3>精品推荐</h3>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">Node.js</a></li>
      <li><a href="#">Ajax</a></li>
      <li><a href="#">Vue2.0</a></li>
      <li><a href="#">Vue3.0</a></li>
      <li><a href="#">TypeScript</a></li>
      <li><a href="#">React</a></li>
    </ul>
    <a href="#" class="modify">修改兴趣</a>
  </div>

CSS 样式：

/* 精品区域 */
.recommend {
  display: flex;
  margin-top: 11px;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
  line-height: 60px;
}

.recommend h3 {
  font-size: 18px;
  color: #00a4ff;
  font-weight: 400;
}

.recommend ul {
  display: flex;
  /* 除去标题和修改兴趣的尺寸，父级剩余尺寸都给 ul，实现把修改兴趣挤到最右侧 */
  flex: 1;
}

.recommend ul li a {
  padding: 0 24px;
  border-right: 1px solid #e0e0e0;
  font-size: 18px;
}

.recommend ul li:last-child a {
  border-right: 0;
}

.recommend .modify {
  font-size: 16px;
  color: #00a4ff;
}

前端区域

标签结构：标题 div + 内容 div

布局思路：盒子模型

HTML 结构：

  <!-- 前端区域 -->
  <div class="wrapper">
    <!-- 标题 -->
    <div class="hd">
      <h3>前端开发工程师</h3>
      <ul>
        <li><a href="#" class="active">热门</a></li>
        <li><a href="#">初级</a></li>
        <li><a href="#">中级</a></li>
        <li><a href="#">高级</a></li>
      </ul>
      <a href="#" class="more">查看全部</a>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <div class="left">
        <img src="./uploads/web_left.png" alt="">
      </div>
      <div class="right">
        <div class="top"><img src="./uploads/web_top.png" alt=""></div>
        <div class="bottom">
          <ul>
            <li>
              <a href="#">
                <div class="pic"><img src="./uploads/web01.png" alt=""></div>
                <div class="text">
                  <h4>JS高级javaScript进阶面向对象ES6</h4>
                  <p><span>高级</span> · <i>101937</i>人在学习</p>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="pic"><img src="./uploads/web02.png" alt=""></div>
                <div class="text">
                  <h4>零基础玩转微信小程序</h4>
                  <p><span>高级</span> · <i>133781</i>人在学习</p>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="pic"><img src="./uploads/web03.png" alt=""></div>
                <div class="text">
                  <h4>JavaScript基础——语法解析+项目实战</h4>
                  <p><span>高级</span> · <i>8927</i>人在学习</p>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="pic"><img src="./uploads/web04.png" alt=""></div>
                <div class="text">
                  <h4>前端框架Vue2+Vue3全套视频</h4>
                  <p><span>高级</span> · <i>26022</i>人在学习</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

CSS 样式：

/* 前端区域 */
.hd ul {
  display: flex;
}

.hd li {
  margin-right: 60px;
  font-size: 16px;
}

.hd li .active {
  color: #00a4ff;
}

.bd {
  display: flex;
  justify-content: space-between;
}

.bd .left {
  width: 228px;
}

.bd .right {
  width: 957px;
}

.bd .right .top {
  margin-bottom: 15px;
  height: 100px;
}

版权区域

HTML 结构：

  <!-- 版权区域 -->
  <div class="footer">
    <div class="wrapper">
      <div class="left">
        <a href="#"><img src="./images/logo.png" alt=""></a>
        <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
          © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
        <a href="#" class="download">下载APP</a>
      </div>
      <div class="right">
        <dl>
          <dt>关于学成网</dt>
          <dd><a href="#">关于</a></dd>
          <dd><a href="#">管理团队</a></dd>
          <dd><a href="#">工作机会</a></dd>
          <dd><a href="#">客户服务</a></dd>
          <dd><a href="#">帮助</a></dd>
        </dl>
        <dl>
          <dt>新手指南</dt>
          <dd><a href="#">如何注册</a></dd>
          <dd><a href="#">如何选课</a></dd>
          <dd><a href="#">如何拿到毕业证</a></dd>
          <dd><a href="#">学分是什么</a></dd>
          <dd><a href="#">考试未通过怎么办</a></dd>
        </dl>
        <dl>
          <dt>合作伙伴</dt>
          <dd><a href="#">合作机构</a></dd>
          <dd><a href="#">合作导师</a></dd>
        </dl>
      </div>
    </div>
  </div>

CSS 样式：

/* 版权区域 */
.footer {
  margin-top: 60px;
  padding-top: 60px;
  height: 273px;
  background-color: #fff;
}

.footer .wrapper {
  display: flex;
  justify-content: space-between;
}

.footer .left {
  width: 440px;
}

.footer .left p {
  margin-top: 24px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 17px;
  color: #666;
}

.footer .left .download {
  display: block;
  width: 120px;
  height: 36px;
  border: 1px solid #00a4ff;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
  color: #00a4ff;
}

.footer .right {
  display: flex;
}

.footer .right dl {
  margin-left: 130px;
}

.footer .right dt {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 23px;
}

.footer .right a {
  font-size: 14px;
  color: #666;
  line-height: 24px;
}

定位

使用定位改变盒子在网页中的位置。

实现：

定位模式：position
边偏移：设置盒子的位置
- left
- right
- top
- bottom

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	`relative`	否	保持标签原有显示模式	自己原来位置
绝对定位	`absolute`	是	行内块特点	1. 已经定位的祖先元素 2. 浏览器可视区
固定定位	`fixed`	是	行内块特点	浏览器窗口

相对定位

语法：position: relative

特点：

不脱标，占用自己原来位置
显示模式特点保持不变
设置边偏移则相对自己原来位置移动
工作中一般不单独使用相对定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      position: relative;
      top: 100px;
      left: 100px;
    }
  </style>
</head>
<body>
  <p>HTML，全称为超文本标记语言（HyperText Markup Language）是一种用来结构化 Web 网页及其内容的标记语言。HTML 使用一系列的元素（Elements）和属性（Attributes）来描述网页的结构和内容。</p>
  <div><img src="./1.jpg" alt=""></div>
  <p>HTML，全称为超文本标记语言（HyperText Markup Language）是一种用来结构化 Web 网页及其内容的标记语言。HTML 使用一系列的元素（Elements）和属性（Attributes）来描述网页的结构和内容。</p>
</body>
</html>

绝对定位

语法：position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

脱标，不占位
显示模式具备行内块特点，宽高生效
设置边偏移则相对最近的已经定位的祖先元素改变位置
如果祖先元素都未定位，则相对浏览器可视区改变位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 400px;
    }

    .news {
      position: relative;

      margin: 100px auto;
      width: 400px;
      height: 350px;
      background-color: #f8f8f8;
    }

    .news span {
      position: absolute;
      top: 0;
      right: 0;

      /* display: block; */
      width: 92px;
      height: 32px;
      background-color: rgba(0,0,0,0.6);
      text-align: center;
      line-height: 32px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="news">
    <img src="./news.jpg" alt="">
    <span>展会活动</span>
    <h4>2022世界移动大会</h4>
  </div>
</body>
</html>

定位居中

实现步骤：

绝对定位
水平、垂直边偏移为 50%
子级向左、上移动自身尺寸的一半

左、上的外边距为 –尺寸的一半
transform: translate(-50%, -50%)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      /* margin-left: -265px;
      margin-top: -127px; */
      /* 50% 就是自己宽高的一半 */
      transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <img src="./login.webp" alt="">
</body>
</html>

固定定位

语法：position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

脱标，不占位
显示模式具备行内块特点
设置边偏移相对浏览器窗口改变位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      position: fixed;
      top: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <p>HTML，全称为超文本标记语言（HyperText Markup Language）是一种用来结构化 Web 网页及其内容的标记语言。HTML 使用一系列的元素（Elements）和属性（Attributes）来描述网页的结构和内容。</p>
  <div><img src="./1.jpg" alt=""></div>
  <p>HTML，全称为超文本标记语言（HyperText Markup Language）是一种用来结构化 Web 网页及其内容的标记语言。HTML 使用一系列的元素（Elements）和属性（Attributes）来描述网页的结构和内容。</p>
</body>
</html>

堆叠层级

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      position: absolute;
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: pink;
      /* 取值是整数，默认是0，取值越大显示顺序越靠上 */ 
      z-index: 1;
    }

    .box2 {
      background-color: skyblue;
      left: 100px;
      top: 100px;
      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

CSS 精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再使用 background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置
- 使用 PxCook 测量小图片左上角坐标
- 取负数坐标为 background-position 属性值（向左上移动图片位置）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 112px;
      height: 110px;
      background-color: pink;
      background-image: url(./abcd.jpg);
      background-position: -257px -276px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

案例九-京东服务

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .service {
      margin: 100px auto;
      width: 1150px;
      height: 42px;
    }

    .service ul {
      display: flex;
    }

    .service li {
      display: flex;
      padding-left: 40px;
      width: 297px;
      height: 42px;
    }

    .service li h5 {
      margin-right: 10px;
      width: 36px;
      height: 42px;
      background: url(./sprite.png)  0 -192px;
    }

    .service li:nth-child(2) h5 {
      background: url(./sprite.png) -41px -192px;
    }

    .service li:nth-child(3) h5 {
      background: url(./sprite.png) -82px -192px;
    }

    .service li:nth-child(4) h5 {
      background: url(./sprite.png) -123px -192px;
    }

    .service li p {
      font-size: 18px;
      color: #444;
      font-weight: 700;
      line-height: 42px;
    }
  </style>
</head>
<body>
  <div class="service">
    <ul>
      <li>
        <h5></h5>
        <p>品类齐全，轻松购物</p>
      </li>
      <li>
        <h5></h5>
        <p>多仓直发，极速配送</p>
      </li>
      <li>
        <h5></h5>
        <p>正品行货，精致服务</p>
      </li>
      <li>
        <h5></h5>
        <p>天天低价，畅选无忧</p>
      </li>
    </ul>
  </div>
</body>
</html>

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

可以在 iconfontopen in new window 图标库下载字体。

使用字体图标：

引入字体样式表（iconfont.css）。
标签使用字体图标类名。
- iconfont：字体图标基本样式（字体名，字体大小等等）。
- icon-xxx：图标对应的类名。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    /* 如果要调整字体大小，注意选择器的优先级要高于 iconfont 类 */
    .iconfont {
      font-size: 200px;
      color: orange;
    }
  </style>
</head>
<body>
  <span class="iconfont icon-favorite"></span>
</body>
</html>

修饰属性

垂直对齐

属性名：vertical-align

属性值	效果
`baseline`	基线对齐（默认，如下图）
`top`	顶部对齐
`middle`	居中对齐（最常用）
`bottom`	底部对齐

图片和文字的默认对齐方式为基线对齐。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid #000;
    }

    /* vertical-align 加在需要对齐元素中较高的那个 */
    img {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div>
    <img src="./1.jpg" alt="">
    文字
  </div>
</body>
</html>

另外，浏览器把行内块、行内标签当作文字处理，默认按基线对齐，因此图片下方有空白间距。可以将元素转块级，不按基线对齐，空白就消失了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid #000;
    }

    img {
      display: block;
    }
  </style>
</head>
<body>
  <div>
    <img src="./1.jpg" alt="">
  </div>
</body>
</html>

过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性花费时间 (s)

提示：

过渡的属性可以是具体的 CSS 属性。
也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）。
transition 设置给元素本身。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      height: 150px;
      transition: all 1s;
    }

    img:hover {
      width: 500px;
      height: 400px;
    }
  </style>
</head>
<body>
  <img src="./huawei.jpg" alt="">
</body>
</html>

透明度

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：

0：完全透明（元素不可见）
1：不透明
0-1 之间小数：半透明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      background-color: orange;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div>
    <img src="./phone.png" alt="">
  </div>
</body>
</html>

光标类型

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字形，提示用户可以选择文字
move	十字光标，提示用户可以移动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      /* cursor: pointer; */
      /* cursor: text; */
      cursor: move;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

案例十-轮播图

技术点：

定位
字体图标
Flex 布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .banner {
      position: relative;
      margin: 100px auto;
      width: 564px;
      height: 315px;
      overflow: hidden;
    }

    /* 图片 */
    .banner img {
      width: 564px;
      border-radius: 12px;
      vertical-align: middle;
    }

    .banner ul {
      display: flex;
    }

    /* 箭头 */
    .banner .prev,
    .banner .next {
      /* 隐藏 */
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      width: 20px;
      height: 30px;
      background-color: rgba(0,0,0,0.3);

      text-decoration: none;
      color: #fff;
      line-height: 30px;
    }

    /* 鼠标滑动到 Banner 区域，箭头要显示 */
    .banner:hover .prev,
    .banner:hover .next {
      display: block;
    }

    .banner .prev {
      left: 0;
      border-radius: 0 15px 15px 0;
    }

    .banner .next {
      right: 0;
      border-radius: 15px 0 0 15px;
      text-align: center;
    }

    /* 圆点 */
    .banner ol {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);

      height: 13px;
      background-color: rgba(255,255,255,0.3);

      display: flex;

      border-radius: 10px;
    }

    .banner ol li {
      margin: 3px;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .banner ol .active {
      background-color: #ff5000;
    }

  </style>
</head>
<body>
  <div class="banner">
    <!-- 图片 -->
    <ul>
      <li><a href="#"><img src="./banner1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./banner2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./banner3.jpg" alt=""></a></li>
    </ul>
    <!-- 箭头 -->
    <a href="#" class="prev">
      <i class="iconfont icon-arrow-left-bold"></i>
    </a>
    <a href="#" class="next">
      <i class="iconfont icon-arrow-right-bold"></i>
    </a>
    <!-- 圆点 -->
    <ol>
      <li></li>
      <li class="active"></li>
      <li></li>
    </ol>
  </div>
</body>
</html>

案例十一-小兔仙

项目目录

xtx-pc
- images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
- uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
- iconfont 文件夹：字体图标素材
- css 文件夹：存放 CSS 文件（link 标签引入）
  - base.css：基础公共样式
  - common.css：各个网页相同模块的重复样式，例如：头部、底部
  - index.css：首页 CSS 样式
- index.html：首页 HTML 文件

基础样式

在 base.css 文件中创建基础公共样式：

/* 去除常见标签默认的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除 a 标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置 img 的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* 去除 input 默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

然后在首页引入样式文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xtx-pc</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  
</body>
</html>

SEO

SEO：搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

竞价排名
将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）

网页头部 SEO 标签：

title：网页标题标签
description：网页描述
keywords：网页关键词

  <!-- meta:desc -->
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <!-- meta:kw -->
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>

Favicon

Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度。

图标：favicon.ico，一般存放到网站的根目录里面。

  <!-- link:favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

版心

common.css：

/* 版心 */
.wrapper {
  margin: 0 auto;
  width: 1240px;
}

快捷导航

结构：通栏 > 版心 > 导航

布局：flex-end

HTML 结构：

  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#" class="login">请先登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
      </ul>
    </div>
  </div>

CSS 样式 common.css：

/* 快捷导航 */
.shortcut {
  height: 52px;
  background-color: #333;
}

.shortcut .wrapper {
  display: flex;
  justify-content: flex-end;
  height: 52px;
}

.shortcut ul {
  display: flex;
  line-height: 52px;
}

.shortcut li a {
  padding: 0 15px;
  border-right: 1px solid #999;
  font-size: 14px;
  color: #fff;
}

.shortcut li:last-child a {
  border-right: 0;
}

.shortcut li .iconfont {
  margin-right: 4px;
  vertical-align: middle;
}

.shortcut li .login {
  color: #5eb69c;
}

头部区域

结构：版心 > Logo + 导航 + 搜索 + 购物车

HTML 结构：

  <!-- 头部区域 -->
  <div class="header wrapper">
    <!-- Logo -->
    <div class="logo">
      <h1><a href="#">小兔仙儿</a></h1>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">餐厨</a></li>
        <li><a href="#">电器</a></li>
        <li><a href="#">居家</a></li>
        <li><a href="#">洗护</a></li>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜">
    </div>
    <!-- 购物车 -->
    <div class="cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div>
  </div>

CSS 样式 common.cs：

/* 头部区域 */
.header {
  display: flex;
  margin-top: 22px;
  margin-bottom: 22px;
  height: 88px;
}

/* Logo */
.logo {
  margin-right: 40px;
  width: 200px;
  height: 88px;
}

.logo a {
  display: block;
  width: 200px;
  height: 88px;
  background-image: url(../images/logo.png);
  font-size: 0;
}

/* 导航 */
.nav {
  margin-top: 33px;
  margin-right: 28px;
}

.nav ul {
  display: flex;
}

.nav li {
  margin-right: 47px;
}

.nav li a {
  padding-bottom: 10px;
}

.nav li a:hover {
  border-bottom: 2px solid #5eb69c;
  color: #5eb69c;
}

/* 搜索 */
.search {
  display: flex;
  margin-top: 33px;
  margin-right: 45px;
  width: 170px;
  height: 34px;
  border-bottom: 2px solid #f4f4f4;
}

.search .iconfont {
  margin-right: 8px;
  font-size: 18;
  color: #ccc;
}

.search input {
  /* 浏览器优先生效 input 标签的默认宽度，所以 flex：1 不生效 */
  /* 解决办法：重置 input 默认宽度 → width：0 */
  flex: 1;
  width: 0;
}

.search input::placeholder {
  font-size: 16px;
  color: #ccc;
}

/* 购物车 */
.cart {
  position: relative;
  margin-top: 32px;
}

.cart .iconfont {
  font-size: 24px;
}

.cart i {
  position: absolute;
  top: 1px;
  /* right 定位右对齐：如果文字多了，向左撑开，可能盖住其他的内容 */
  /* right: 1px; */
  /* left 定位左对齐：文字多了，向右撑开 */
  left: 15px;
  padding: 0 6px;
  height: 15px;
  background-color: #e26237;
  border-radius: 8px;
  font-size: 14px;
  color: #fffefe;
  line-height: 15px;
}

底部区域

HTML 结构：

  <!-- 底部区域 -->
  <div class="footer">
    <div class="wrapper">
      <!-- 服务 -->
      <div class="service">
        <ul>
          <li>
            <h5></h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5></h5>
            <p>物流快捷</p>
          </li>
          <li>
            <h5></h5>
            <p>品质新鲜</p>
          </li>
          <li>
            <h5></h5>
            <p>售后无忧</p>
          </li>
        </ul>
      </div>
      <!-- 帮助中心 -->
      <div class="help">
        <div class="left">
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>配送方式</dt>
            <dd><a href="#">配送运费</a></dd>
            <dd><a href="#">配送范围</a></dd>
            <dd><a href="#">配送时间</a></dd>
          </dl>
          <dl>
            <dt>关于我们</dt>
            <dd><a href="#">平台规则</a></dd>
            <dd><a href="#">联系我们</a></dd>
            <dd><a href="#">问题反馈</a></dd>
          </dl>
          <dl>
            <dt>售后服务</dt>
            <dd><a href="#">售后政策</a></dd>
            <dd><a href="#">退款说明</a></dd>
            <dd><a href="#">取消订单</a></dd>
          </dl>
          <dl>
            <dt>服务热线</dt>
            <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
            <dd><a href="#">客服电话 400-0000-000</a></dd>
            <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
          </dl>
        </div>
        <div class="right">
          <ul>
            <li>
              <div class="pic"><img src="./images/wechat.png" alt=""></div>
              <p>微信公众号</p>
            </li>
            <li>
              <div class="pic"><img src="./images/app.png" alt=""></div>
              <p>APP下载二维码</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 版权 -->
      <div class="copyright">
        <p>
          <a href="#">关于我们</a>|
          <a href="#">帮助中心</a>|
          <a href="#">售后服务</a>|
          <a href="#">配送与验收</a>|
          <a href="#">商务合作</a>|
          <a href="#">搜索推荐</a>|
          <a href="#">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜</p>
      </div>
    </div>
  </div>

CSS 样式 common.cs：

/* 底部区域 */
.footer {
  height: 580px;
  background-color: #f5f5f5;
}

/* 服务 */
.service {
  padding: 60px 0;
  height: 178px;
  border-bottom: 1px solid #e8e8e8;
}

.service ul {
  display: flex;
  justify-content: space-evenly;
}

.service ul li {
  display: flex;
  width: 190px;
  height: 58px;
}

.service ul li h5 {
  margin-right: 20px;
  width: 58px;
  height: 58px;
  background-image: url(../images/sprite.png);
}

.service ul li p {
  font-size: 28px;
  line-height: 58px;
}

.service ul li:nth-child(2) h5 {
  background-position: 0 -58px;
}

.service ul li:nth-child(3) h5 {
  background-position: 0 -116px;
}

.service ul li:nth-child(4) h5 {
  background-position: 0 -174px;
}

/* 帮助中心 */
.help {
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  height: 300px;
}

/* 帮助中心左侧区域 */
.help .left {
  display: flex;
}

.help .left dl {
  margin-right: 84px;
}

.help .left dl:last-child {
  margin-right: 0;
}

.help .left dt {
  margin-bottom: 30px;
  font-size: 18px;
}

.help .left dd {
  margin-bottom: 10px;
}

.help .left dd a {
  color: #969696;
}

.header .left .iconfont {
  color: #5eb69c;
}

/* 帮助中心右侧区域 */
.help .right ul {
  display: flex;
}

.help .right ul li:first-child {
  margin-right: 55px;
}

.help .right ul li .pic {
  margin-bottom: 10px;
  width: 120px;
  height: 120px;
}

.help .right ul li p {
  color: #969696;
  text-align: center;
}

/* 版权 */
.copyright {
  text-align: center;
}

.copyright p {
  margin-bottom: 10px;
  color: #a1a1a1;
}

.copyright p a {
  margin: 0 10px;
  color: #a1a1a1;
}

结构：通栏 > 版心 > 轮播图（ul） + 侧导航（ul） + 圆点指示器（ol）

HTML 结构：

  <!-- Banner 区域 -->
  <div class="banner">
    <div class="wrapper">
      <!-- 图片 -->
      <ul class="pic">
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
      </ul>
      <!-- 侧导航 -->
      <div class="subnav">
        <ul>
          <li>
            <div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
        </ul>
      </div>
      <!-- 圆点指示器 -->
      <ol>
        <li class="current"><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
      </ol>
    </div>
  </div>

CSS 样式 index.css：

/* Banner 区域 */
.banner {
  height: 500px;
  background-color: #f5f5f5;
}

.banner .wrapper {
  position: relative;
  height: 500px;
  background-color: pink;
  overflow: hidden;
}

/* 图片 */
.banner .wrapper .pic {
  display: flex;
  /* flex 布局，父级宽度不够，子级被挤小，不想挤小，增大父级尺寸 */
  width: 3720px;
}

/* 侧导航 */
.banner .wrapper .subnav {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.42);
}

.banner .wrapper .subnav ul li {
  display: flex;
  justify-content: space-between;
  padding-left: 30px;
  padding-right: 12px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  cursor: pointer;
}

.banner .wrapper .subnav ul li a {
  margin-right: 5px;
  color: #fff;
  font-size: 14px;
}

.banner .wrapper .subnav ul li .classify {
  margin-right: 14px;
  font-size: 16px;
}

.banner .wrapper .subnav ul li .iconfont {
  font-size: 14px;
}

.banner .wrapper .subnav ul li:hover {
  background-color: #00be9a;
}

/* 圆点指示器 */
.banner ol {
  position: absolute;
  bottom: 17px;
  right: 16px;
  display: flex;
}

.banner ol li {
  margin-left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
}

.banner ol li i {
  display: block;
  margin: 4px;
  width: 14px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

/* 选中：li 半透明； i 白色 */
.banner ol .current {
  background-color: rgba(255, 255, 255, 0.5);
}

.banner ol .current i {
  background-color: #fff;
}

好物区域

结构：标题（title） + 内容（bd）

HTML 结构：

  <!-- 好物区域 -->
  <div class="goods wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>新鲜好物</h3>
        <p>新鲜出炉 品质靠谱</p>
      </div>
      <div class="right">
        <a href="" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
            <div class="txt">
              <h4>KN95级莫兰迪色防护口罩</h4>
              <p>¥<span>79</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods2.png" alt=""></div>
            <div class="txt">
              <h4>紫檀外独板三层普洱茶盒</h4>
              <p>¥<span>566</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods3.png" alt=""></div>
            <div class="txt">
              <h4>法拉蒙高颜值记事本可定制</h4>
              <p>¥<span>58</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods4.png" alt=""></div>
            <div class="txt">
              <h4>科技布布艺沙发</h4>
              <p>¥<span>3579</span></p>
            </div>
          </a>
        </li> 
      </ul>
    </div>
  </div>

CSS 样式 index.css：

/* 好物区域 */
/* 标题 -- 公共样式 */
.title {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 30px;
  height: 42px;

}

.title .left {
  display: flex;
}

.title .left h3 {
  margin-right: 35px;
  font-size: 30px;
}

.title .left p {
  align-self: flex-end;
  color: #a1a1a1;
}

.title .right .more {
  line-height: 42px;
  color: #a1a1a1;
}

.title .right .more .iconfont {
  margin-left: 10px;
}

/* 内容 -- 公共样式 */
.bd ul {
  display: flex;
  justify-content: space-between;
}

.bd ul li {
  width: 304px;
  height: 404px;
  background-color: #eef9f4;
}

.bd ul li .pic {
  width: 304px;
  height: 304px;
}

.bd ul li .txt {
  text-align: center;
}

.bd ul li .txt h4 {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 20px;
}

/* 下面两项指定了 .goods 表示不属于公共样式 */
.goods .bd ul li .txt p {
  font-size: 18px;
  color: #aa2113;
}

.goods .bd ul li .txt p span {
  margin-left: 3px;
  font-size: 22px;
}

品牌区域

结构：通栏 > 版心 > 标题（title） + 内容（bd）

HTML 结构：

  <!-- 品牌区域 -->
  <div class="brand">
    <div class="wrapper">
      <!-- 标题 -->
      <div class="title">
        <div class="left">
          <h3>热门品牌</h3>
          <p>国际经典 品质认证</p>
        </div>
        <div class="button">
          <a href="#" class="prev"><i class="iconfont icon-arrow-left-bold"></i></a>
          <a href="#" class="next"><i class="iconfont icon-arrow-right-bold"></i></a>
        </div>
      </div>
      <!-- 内容 -->
      <div class="bd">
        <ul>
          <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
        </ul>
      </div>
    </div>
  </div>

CSS 样式 index.css：

/* 品牌区域 */
.brand {
  margin-top: 60px;
  height: 468px;
  background-color: #f5f5f5;
}

.brand .wrapper {
  /* 处理外边距塌陷问题 */
  overflow: hidden;
  height: 468px;
}

.brand .wrapper .title {
  position: relative;
  margin-bottom: 40px;
}

.brand .wrapper .title .button {
  position: absolute;
  right: 0;
  bottom: -25px;

  /* 让 a 在一行显示，宽高生效 */
  display: flex;
}

.brand .wrapper .title .button a {
  margin-left: 12px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: #fff;
}

.brand .wrapper .title .button .prev {
  background-color: #ddd;
}

.brand .wrapper .title .button .next {
  background-color: #00be9a;
}

.brand .wrapper .bd ul li {
  width: 244px;
  height: 306px;
}

生鲜区域

结构：版心 > 标题（title） + 内容（bd）

HTML 结构：

  <!-- 生鲜区域 -->
  <div class="fresh wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>生鲜</h3>
      </div>
      <div class="right">
        <ul>
          <li><a href="#" class="active">热门</a></li>
          <li><a href="#">蔬菜</a></li>
          <li><a href="#">肉禽蛋</a></li>
          <li><a href="#">水果</a></li>
          <li><a href="#">海鲜</a></li>
          <li><a href="#">零食</a></li>
          <li><a href="#">饮料</a></li>
        </ul>
        <a href="" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="left">
        <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>双味千层，手抓饼烤肉组合</h4>
                  <p>240g/袋 4片装</p>
                  <p>加热即食</p>
                </div>
                <p class="price">¥<span>89.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh2.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>云南甘蔗慢熬红糖馒头</h4>
                  <p>220g/袋 5个装</p>
                  <p>加热即食</p>
                </div>
                <p class="price">¥<span>9.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh3.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>日式风味小圆饼</h4>
                  <p>圆形【海盐味】</p>
                  <p>糖果零食</p>
                </div>
                <p class="price">¥<span>588.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh4.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>全麦奶油浓香小面包</h4>
                  <p>50g*12袋</p>
                  <p>美味西点</p>
                </div>
                <p class="price">¥<span>69.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh5.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>秘制外皮五福摩提大福点心</h4>
                  <p>150g/盒</p>
                  <p>美味西点</p>
                </div>
                <p class="price">¥<span>39.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh6.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>水果面膜韩国蜂蜜柚子茶</h4>
                  <p>560g/瓶</p>
                  <p>冲调饮品</p>
                </div>
                <p class="price">¥<span>39.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh7.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>浓情比利时巧克力礼盒装</h4>
                  <p>205克/盒</p>
                  <p>糖果零食</p>
                </div>
                <p class="price">¥<span>120.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh8.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>抹茶奶油小蛋糕礼盒装</h4>
                  <p>220克/盒</p>
                  <p>美味西点</p>
                </div>
                <p class="price">¥<span>60.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

CSS 样式 index.css：

/* 生鲜区域 */
/* 标题 */
.fresh .title {
  margin-top: 60px;
  margin-bottom: 20px;
}

.fresh .title .right {
  display: flex;
}

.fresh .title .right ul {
  display: flex;
  margin-top: 10px;
  margin-right: 58px;
}

.fresh .title .right ul li a {
  display: block;
  margin-left: 6px;
  padding: 0 7px;
  height: 20px;
  line-height: 20px;
}

.fresh .title .right ul li .active {
  background-color: #00be9a;
  color: #fff;
}

/* 内容 -- 公共样式 */
.content {
  display: flex;
  justify-content: space-between;
}

.content .left {
  width: 248px;
  height: 610px;
}

.content .right {
  width: 968px;
  height: 610px;
}

.content .right ul {
  display: flex;
  flex-wrap: wrap;
}

.content .right ul li {
  position: relative;
  padding: 10px 21px 0;
  width: 242px;
  height: 305px;
  border: 2px solid #fff;
  /* 为了隐藏绿色区域 */
  overflow: hidden;
}

.content .right ul li:hover {
  border: 2px solid #00be9a;
}

.content .right ul li .pic {
  width: 200px;
  height: 180px;
}

.content .right ul li .info {
  margin-top: 14px;
  margin-bottom: 5px;
  height: 60px;
  line-height: 19px;
}

.content .right ul li .price {
  color: #af2f22;
}

.content .right ul li .price span {
  margin-left: 5px;
  font-size: 22px;
}

/* 产品底部绿色区域 */
.content .right ul li .cover {
  position: absolute;
  left: 0;
  /* bottom: 0; */
  bottom: -86px;
  padding-top: 15px;
  width: 242px;
  height: 84px;
  background-color: #00be9a;
  text-align: center;
  color: #fff;
  transition: all 0.5s;
}

/* 鼠标悬停到 li，显示绿色区域，改变位置 */
.content .right ul li:hover .cover {
  bottom: 0;
}

.content .right ul li .cover p:nth-child(1) {
  font-size: 18px;
}

.content .right ul li .cover p:nth-child(2) {
  margin: 3px auto 6px;
  width: 120px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.11);
}

.content .right ul li .cover p:nth-child(3) {
  font-size: 13px;
}

.content .right ul li .cover p:nth-child(3) .iconfont {
  font-size: 14px;
}

专题区域

HTML 结构：

  <!-- 专题区域 -->
  <div class="topic wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>最新专题</h3>
      </div>
      <div class="right">
        <a href="" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="topic-bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic1.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>吃这些美食才不算辜负自己</h4>
                  <p>餐厨起居洗护好物</p>
                </div>
                <div class="right">￥<span>29.9</span><span>起</span></div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic2.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>吃这些美食才不算辜负自己</h4>
                  <p>餐厨起居洗护好物</p>
                </div>
                <div class="right">￥<span>29.9</span><span>起</span></div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic3.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>吃这些美食才不算辜负自己</h4>
                  <p>餐厨起居洗护好物</p>
                </div>
                <div class="right">￥<span>29.9</span><span>起</span></div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

CSS 样式 index.css：

/* 专题区域 */
.topic {
  margin-bottom: 40px;
}

.topic .title {
  margin-top: 100px;
}

.topic .topic-bd ul {
  display: flex;
  justify-content: space-between;
}

.topic .topic-bd ul li {
  width: 405px;
  height: 355px;
}

.topic .topic-bd ul li .pic {
  position: relative;
  width: 405px;
  height: 288px;
}

.topic .topic-bd ul li .txt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  width: 405px;
  height: 67px;
  font-size: 14px;
  color: #666;
}

.topic .topic-bd ul li .txt .left {
  display: flex;
}

.topic .topic-bd ul li .txt .left p {
  margin-right: 20px;
}

.topic .topic-bd ul li .txt .left p:nth-child(1) i {
  color: #aa2113;
}

/* 专题区域 -- 定位区域 */
.topic .topic-bd ul li .pic .cover {
  position: absolute;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 15px;
  width: 405px;
  height: 90px;
  background-image: linear-gradient(180deg, rgba(137, 137, 137, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
}

.topic .topic-bd ul li .pic .cover .left {
  color: #fff;
}

.topic .topic-bd ul li .pic .cover .left h4 {
  margin-bottom: 6px;
  font-size: 20px;
}

.topic .topic-bd ul li .pic .cover .right {
  padding: 0 7px;
  height: 25px;
  background-color: #fff;
  color: #aa2113;
  font-size: 15px;
}

.topic .topic-bd ul li .pic .cover .right span {
  font-size: 18px;
}

平面转换

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换也叫 2D 转换，属性是 transform。

平移

语法：transform: translate(X轴移动距离, Y轴移动距离);

取值：

像素单位数值
百分比（参照盒子自身尺寸计算结果）
正负均可

技巧：

translate() 只写一个值，表示沿着 X 轴移动
单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 500px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
    }

    .son {
      width: 200px;
      height: 100px;
      background-color: pink;
      transition: all 0.5s;
    }

    /* 鼠标移入到父盒子， 子盒子改变位置 */
    .father:hover .son {
      transform: translate(200px, 100px);

      /* 百分比：参照盒子自身尺寸计算结果 */
      transform: translate(50%, 100%);
      transform: translate(-50%, 100%);

      /* 只写一个数表示水平方向 */
      transform: translate(100px);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

案例-双开门

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 1. 布局：父子结构，父级是大图，子级是左右小图 */
    .father {
      display: flex;
      margin: 0 auto;
      width: 1366px;
      height: 600px;
      background-image: url(./bg.jpg);

      overflow: hidden;
    }

    .father .left,
    .father .right {
      width: 50%;
      height: 600px;
      background-image: url(./fm.jpg);

      transition: all 0.5s;
    }

    .father .right {
      /* right 表示的取到精灵图右面的图片 */
      background-position: right 0;
    }

    /* 2. 鼠标悬停的效果：左右移动 */
    .father:hover .left {
      transform: translate(-100%);
    }

    .father:hover .right {
      transform: translateX(100%);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

旋转

语法：transform: rotate(旋转角度);

取值：角度单位是 deg

技巧：

取值正负均可
取值为正，顺时针旋转
取值为负，逆时针旋转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      transition: all 2s;
    }

    /* 鼠标悬停到图片上面，添加旋转效果 */
    img:hover {
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <img src="./rotate.png" alt="">
</body>
</html>

默认情况下，旋转原点是盒子中心点。使用 transform-origin 修改旋转原点。

语法：transform-origin: 水平原点位置垂直原点位置;

取值：

方位名词（left、top、right、bottom、center）
像素单位数值
百分比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      border: 1px solid #000;
      transition: all 1s;

      transform-origin: right bottom;
    }

    img:hover {
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <img src="./rotate.png" alt="">
</body>
</html>

案例-时钟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .clock {
        width: 250px;
        height: 250px;
        border: 8px solid #000;
        border-radius: 50%;
        margin: 100px auto;
        position: relative;
      }

      .line {
        /* 1.定位 */
        position: absolute;
        width: 4px;
        height: 250px;
        background-color: #999;
        left: 50%;
        transform: translate(-50%);
      }

      /* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的line, 写rotate代码 */
      /* 一圈是360度, 等分成  xx 份 */
      .line:nth-child(2) {
        transform: translate(-50%) rotate(30deg);
      }

      .line:nth-child(3) {
        transform: translate(-50%) rotate(60deg);
      }

      .line:nth-child(4) {
        transform: translate(-50%) rotate(90deg);
      }

      .line:nth-child(5) {
        transform: translate(-50%) rotate(120deg);
      }

      .line:nth-child(6) {
        transform: translate(-50%) rotate(150deg);
      }

      /* 第一根和第四跟宽度大一些 */
      .line:nth-child(1),
      .line:nth-child(4) {
        width: 5px;
      }

      /* 遮罩圆形 */
      .cover {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: #fff;
        border-radius: 50%;
      }

      /* 表针 */
      /* 并集选择器放在单独选择器的上面, 避免transform属性的层叠 */
      .hour,
      .minute,
      .second {
        position: absolute;
        left: 50%;
        /* 盒子底部在盒子中间 */
        bottom: 50%;
      }

      .hour {
        width: 6px;
        height: 50px;
        background-color: #333;
        margin-left: -3px;
        transform: rotate(15deg);
        transform-origin: center bottom;
      }

      .minute {
        width: 5px;
        height: 65px;
        background-color: #333;
        margin-left: -3px;
        transform: rotate(90deg);
        transform-origin: center bottom;
      }

      .second {
        width: 4px;
        height: 80px;
        background-color: red;
        margin-left: -2px;
        transform: rotate(240deg);
        transform-origin: center bottom;
      }

      /* 螺丝 */
      .dotted {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 18px;
        background-color: #333;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <!-- 刻度线 -->
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>

      <!-- 遮罩圆形 -->
      <div class="cover"></div>
      <!-- 表针 -->
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>

      <!-- 螺丝 -->
      <div class="dotted"></div>
    </div>
  </body>
</html>

多重转换

多重转换技巧：先平移再旋转。

语法：transform: translate() rotate();

注意：

多重转换以第一种转换形态的坐标轴为准。
平移不改变坐标轴向，旋转会改变坐标轴向。先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      height: 200px;
      border: 1px solid #000;
    }

    img {
      width: 200px;
      transition: all 5s;
    }

    /* 鼠标移入 box，图片边走边转 */
    .box:hover img {
      /* 使用复合属性，先平移再旋转 */
      transform: translate(600px) rotate(360deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./tyre.png" alt="">
  </div>
</body>
</html>

缩放

语法：

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);

技巧：

通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放。
取值大于 1 表示放大，取值小于 1 表示缩小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 210px;
      margin: 100px auto;
      background-color: pink;
    }

    .box img {
      width: 100%;
      transition: all 0.5s;
    }

    .box:hover img {
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./product.jpeg" alt="">
  </div>
</body>
</html>

案例-播放特效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      margin: 50px auto;
      width: 249px;
      height: 210px;
    }

    .box p {
      color: #3b3b3b;
      padding: 10px 10px 0 10px;
    }

    li {
      list-style: none;
    }

    img {
      width: 100%;
    }

    /* 1. 摆放播放按钮：图片区域的中间 */
    .box li {
      overflow: hidden;
    }

    .pic {
      position: relative;
    }

    .pic::after {
      position: absolute;
      left: 50%;
      top: 50%;
      /* margin-left: -29px;
      margin-top: -29px; */
      /* transform: translate(-50%, -50%); */

      content: '';
      width: 58px;
      height: 58px;
      background-image: url(./play.png);
      transform: translate(-50%, -50%) scale(5);
      opacity: 0;

      transition: all 0.5s;
    }

    /* 2. hover效果：大按钮，看不见：透明是0 → 小按钮，看得见：透明度1 */
    .box li:hover .pic::after {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }

  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li>
        <div class="pic">
          <img src="./party.jpeg" alt="">
        </div>
        <p>【和平精英】</p>
      </li>
    </ul>
  </div>
</body>
</html>

倾斜

语法：transform: skew();

取值：角度度数 deg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      margin: 100px auto;
      width: 100px;
      height: 200px;
      background-color: pink;
      transition: all 0.5s;
    }

    div:hover {
      transform: skew(30deg);
      transform: skew(-30deg);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

分类：

线性渐变
径向渐变

线性渐变

语法：

background-image: linear-gradient(
  渐变方向,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

渐变方向：可选
- to 方位名词
- 角度度数
终点位置：可选
- 百分比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: green;
      background-image: linear-gradient(
        red,
        green
      );
      background-image: linear-gradient(
        to right,
        red,
        green
      );
      background-image: linear-gradient(
        45deg,
        red,
        green
      );
      background-image: linear-gradient(
        red 80%,
        green
      );
    }

  </style>
</head>
<body>
  <div></div>
</body>
</html>

径向渐变

作用：给按钮添加高光效果。

语法：

background-image: radial-gradient(
  半径 at 圆心位置,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

半径可以是 2 条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
      background-image: radial-gradient(
        50px at center center,
        red,
        pink
      );
    }

    button {
      width: 100px;
      height: 40px;
      background-color: green;
      border: 0;
      border-radius: 5px;
      color: #fff;
      background-image: radial-gradient(
        30px at center center,
        rgba(255,255,255,0.2),
        transparent
      );
    }
  </style>
</head>
<body>
  <div></div>
  <button>按钮</button>
</body>
</html>

案例-产品展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 212px;
    }

    .box img {
      width: 300px;
    }

    .box .title {
      position: absolute;
      left: 15px;
      bottom: 20px;
      z-index: 2;
      width: 260px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
    }

    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
        transparent,
        rgba(0,0,0,0.5)
      );
      opacity: 0;
      transition: all 0.5s;
    }

    .box:hover .mask {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./product.jpeg" alt="" />
    <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
    <div class="mask"></div>
  </div>
</body>
</html>

空间转换

空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
空间转换也叫 3D 转换。
属性：transform

平移

语法：

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值：

取值与平面转换相同，正负均可
像素单位数值
百分比（参照盒子自身尺寸计算结果）

默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* 电脑是平面，默认无法观察 Z 轴平移效果 */
      transform: translate3d(100px,200px,300px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

视距

作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性：perspective: 视距; (添加给父级，取值范围 800px - 1200px)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      perspective: 1000px;
    }

    .son {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .son:hover {
      transform: translateZ(-300px);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

旋转

沿 Z 轴旋转语法：transform: rotateZ();

沿 Z 轴旋转与平面旋转效果一样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      margin: 100px auto;
    }

    img {
      width: 300px;
      transition: all 2s;
    }

    .box img:hover {
      transform: rotateZ(360deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./hero.jpeg" alt="">
  </div>
</body>
</html>

沿 X 轴旋转语法：transform: rotateX();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      margin: 100px auto;
    }

    img {
      width: 300px;
      transition: all 2s;
    }

    .box {
      perspective: 1000px;
    }

    .box img:hover {
      transform: rotateX(60deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./hero.jpeg" alt="">
  </div>
</body>
</html>

沿 Y 轴旋转语法：transform: rotateY();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      margin: 100px auto;
    }

    img {
      width: 300px;
      transition: all 2s;
    }

    .box {
      perspective: 1000px;
    }

    .box img:hover {
      transform: rotateY(60deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./hero.jpeg" alt="">
  </div>
</body>
</html>

立体

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

flat：子级处于平面中
preserve-3d：子级处于 3D 空间

步骤：

父元素添加 transform-style: preserve-3d;
子级定位
调整子盒子的位置（位移或旋转）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .cube {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      /* background-color: pink; */
      transition: all 2s;

      transform-style: preserve-3d;
      /* transform: rotateY(89deg); */
    }

    .cube div {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
    }

    .front {
      background-color: orange;
      transform: translateZ(100px);
    }

    .back {
      background-color: green;
      transform: translateZ(-100px);
    }

    .cube:hover {
      transform: rotateY(90deg);
    }
  </style>
</head>
<body>
  <div class="cube">
    <div class="front">前面</div>
    <div class="back">后面</div>
  </div>
</body>
</html>

案例-3D 导航

步骤：

搭建立方体
- 绿色是立方体的前面
- 橙色是立方体的上面
鼠标悬停，立方体旋转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
        
    .nav {
      width: 300px;
      height: 40px;
      margin: 50px auto;
    }

    .nav ul {
      display: flex;
    }
    
    .nav li {
      position: relative;
      width: 100px;
      height: 40px;
      line-height: 40px;
      transition: all .5s;

      /* 立方体 */
      transform-style: preserve-3d;

      /* 空间缩放 */
      /* transform: scaleX(0.5);
      transform: scaleY(2);
      transform: scaleZ(3);

      transform: scale3d(0.5, 2, 3); */

      /* 为了看到橙色和绿色移动过程，给立方体添加旋转 */
      /* transform: rotateX(-20deg) rotateY(30deg); */
    }

    .nav li a {
      position: absolute;
      left: 0;
      top: 0;

      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      text-decoration: none;
      color: #fff;
    }
    
    /* 立方体每个面都有独立的坐标轴，互不影响  */
    .nav li a:first-child {
      background-color: green;
      transform: translateZ(20px);
    }
    
    .nav li a:last-child {
      background-color: orange;
      transform: rotateX(90deg) translateZ(20px);
    }
    
    .nav li:hover {
      transform: rotateX(-90deg);
    }
  </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li>
        <a href="#">首页</a>
        <a href="#">Index</a>
      </li>
      <li>
        <a href="#">登录</a>
        <a href="#">Login</a>
      </li>
      <li>
        <a href="#">注册</a>
        <a href="#">Register</a>
      </li>
    </ul>
  </div>
</body>
</html>

缩放

语法：

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

动画

过渡：实现两个状态间的变化过程。
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。

定义动画：

/* 方式一：2 个状态 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二：多个状态 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}

使用动画：

animation: 动画名称 动画时长;

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;

      animation: change 1s;
    }

    /* 动画一：宽度从 200 变化到 800 */
    /* @keyframes change {
      from {
        width: 200px;
      }
      to {
        width: 800px;
      }
    } */


    /* 动画二：从 200*100 变化到 300*300 变化到 800*500 */
    /* 百分比：表示动画时长的百分比 */
    @keyframes change {
      0% {
        width: 200px;
        height: 100px;
      }
      20% {
        width: 300px;
        height: 300px;
      }
      100% {
        width: 800px;
        height: 500px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

animation 复合属性：

animation: name duration timing-function delay iteration-count direction fill-mode;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;

      /* linear： 匀速 */
      animation: change 1s linear;

      /* steps： 分步动画，配合精灵图实现精灵动画*/
      animation: change 1s steps(3);

      /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
      animation: change 1s 2s;

      /* 重复次数，infinite 表示无限循环 */
      animation: change 1s 3;
      animation: change 1s infinite;

      /* alternate 表示反向 */
      animation: change 1s infinite alternate;

      /* forwards 表示执行完毕后停在结束状态*/
      animation: change 1s forwards;
    }

    @keyframes change {
      from {
        width: 200px;
      }
      to {
        width: 800px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

可以将复合属性拆分为以下属性：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	时间函数	steps()：逐帧动画
animation-iteration-count	重复次数	infinite：无限循环
animation-direction	动画执行方向	alternate：反向
animation-play-state	暂停动画	pause：暂停，通常配合 hover 使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;

      animation-name: change;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }

    .box:hover {
      /* 暂停动画 */
      animation-play-state: paused;
    }

    @keyframes change {
      from {
        width: 200px;
      }
      to {
        width: 800px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

案例-走马灯

无缝动画原理：复制开头图片到结尾位置（图片累加宽度 = 区域宽度）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .box {
      width: 600px;
      height: 112px;
      border: 5px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }

    .box ul {
      display: flex;
      animation: move 6s infinite linear;
    }

    @keyframes move {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(-1400px);
      }
    }

    .box:hover ul {
      animation-play-state: paused;
    }

    img {
      display: block;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li><img src="./images/1.jpg" alt="" /></li>
      <li><img src="./images/2.jpg" alt="" /></li>
      <li><img src="./images/3.jpg" alt="" /></li>
      <li><img src="./images/4.jpg" alt="" /></li>
      <li><img src="./images/5.jpg" alt="" /></li>
      <li><img src="./images/6.jpg" alt="" /></li>
      <li><img src="./images/7.jpg" alt="" /></li>
      <!-- 替身：填补显示区域的露白 -->
      <li><img src="./images/1.jpg" alt="" /></li>
      <li><img src="./images/2.jpg" alt="" /></li>
      <li><img src="./images/3.jpg" alt="" /></li>
    </ul>
  </div>
</body>
</html>

案例-精灵动画

制作步骤：

准备显示区域，盒子尺寸与一张精灵小图尺寸相同
定义动画，移动背景图（移动距离 = 精灵图宽度）
使用动画，steps(N)，N 与精灵小图个数相同

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./bg.png);
      animation: 
        run 1s steps(12) infinite,
        move 3s forwards linear;
    }

    /* 当动画的开始状态样式与盒子默认样式相同，可以省略动画开始状态的代码 */
    @keyframes run {
      /* from {
        background-position: 0 0;
      } */
      to {
        background-position: -1680px 0;
      }
    }

    @keyframes move {
      /* from {
        transform: translate(0);
      } */
      to {
        transform: translate(800px);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

案例-全民出游

HTML 结构：

<!DOCTYPE html>
<html lang="en">
<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/inde.css">

</head>
<body>
  <!-- 云 -->
  <div class="cloud">
    <img src="./images/yun1.png" alt="">
    <img src="./images/yun2.png" alt="">
    <img src="./images/yun3.png" alt="">
  </div>

  <!-- 文字 -->
  <div class="text">
     <img src="./images/font1.png" alt="">
  </div>
</body>
</html>

CSS 样式：

* {
  margin: 0;
  padding: 0;
}

/* 大背景 */
/* 默认状态 html 和 body 的高度是 0，所以导致 cover 缩放背景图不成功 */
html {
  height: 100%;
}

body {
  height: 100%;
  background: url(../images/f1_1.jpg) no-repeat center 0 / cover;
  /* background-size: cover; */
}

/* 云 */
.cloud img {
  position: absolute;
  left: 50%;
}

.cloud img:nth-child(1) {
  margin-left: -250px;
  top: 20px;
  animation: cloud 1s infinite alternate linear;
}

.cloud img:nth-child(2) {
  margin-left: 400px;
  top: 100px;
  animation: cloud 1s infinite alternate linear 0.4s;
}

.cloud img:nth-child(3) {
  margin-left: -550px;
  margin-top: 200px;
  animation: cloud 1s infinite alternate linear 0.6s;
}

@keyframes cloud {
  100% {
    transform: translate(20px);
  }
}

/* 文字 */
.text img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: text 1s;
}

/* 默认 → 小 → 大 → 小 → 默认 */
@keyframes text {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  20% {
    transform: translate(-50%, -50%) scale(0.1);
  }

  40% {
    transform: translate(-50%, -50%) scale(1.4);
  }

  70% {
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

CSS

# CSS

# 开始

# 内部样式

# 外部样式

# 行内样式

# 选择器

# 标签选择器

# 类选择器

# ID 选择器

# 通配符选择器

# 属性选择器

# 盒子

# 文字

# 大小

# 粗细

# 倾斜

# 字体

# 行高

# 复合属性

# 缩进

# 对齐

# 修饰线

# 颜色

# 案例一

# 案例二

# 复合选择器

# 后代选择器

# 子代选择器

# 并集选择器

# 交集选择器

# 伪类选择器

# CSS 特性

# 继承性

# 层叠性

# 优先级

# Emmet 写法

# 背景

# 背景图

# 平铺方式

# 背景图位置

# 背景图缩放

# 背景图固定

# 背景复合属性

# 显示模式

# 块级元素

# 行内元素

# 行内块元素

# 转换显示模式

# 案例三

# 案例四

# 高级选择器

# 结构伪类选择器

# 伪元素选择器

# 盒子模型

# 边框线

# 单方向边框线

# 内边距

# 尺寸计算

# 外边距

# 清除默认样式

# 元素溢出

# 外边距合并

# 外边距塌陷

# 行内元素垂直位置

# 圆角

# 阴影

# 案例五-产品卡片

# 案例六-新闻列表

# 标准流

# 浮动

# 清除浮动

# Flex 布局

# Flex 组成

# 主轴对齐方式

# 侧轴对齐方式

# 修改主轴方向

# 弹性伸缩比

# 弹性盒子换行

# 行对齐方式

CSS

开始

内部样式

外部样式

行内样式

选择器

标签选择器

类选择器

ID 选择器

通配符选择器

属性选择器

盒子

文字

大小

粗细

倾斜

字体

行高

复合属性

缩进

对齐

修饰线

颜色

案例一

案例二

复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

伪类选择器

CSS 特性

继承性

层叠性

优先级

Emmet 写法

背景

背景图

平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

显示模式

块级元素

行内元素

行内块元素

转换显示模式

案例三

案例四

高级选择器

结构伪类选择器

伪元素选择器

盒子模型

边框线

单方向边框线

内边距

尺寸计算

外边距

清除默认样式

元素溢出

外边距合并

外边距塌陷

行内元素垂直位置

圆角

阴影

案例五-产品卡片

案例六-新闻列表

标准流

浮动

清除浮动

Flex 布局

Flex 组成

主轴对齐方式

侧轴对齐方式

修改主轴方向

弹性伸缩比

弹性盒子换行

行对齐方式

案例七-抖音解决方案