CSS学习易忘点-学习十四届蓝桥杯（Web 应用开发）一站通关【大学组】的自用笔记

已于 2024-04-13 03:58:08 修改
阅读量248 收藏 5
点赞数 4
文章标签： 前端 css 学习 蓝桥杯 笔记
于 2024-04-01 15:36:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68247693/article/details/137231634
版权

文章目录

选择器

在 CSS 中，选择器是用来给指定标签设置样式的容器。

CSS 中有以下三种基本选择器：

  • 标签选择器
  • 类选择器
  • id 选择器

标签选择器

如果需要对页面中的某一类标签统一设定样式时，应该使用标签选择器，标签选择器的关键字以标签的名字命名。

其语法格式为：

标签名 {
  属性名: 属性值;
}

类选择器

在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性（不包括点号），表示该标签使用了指定的类选择器。

例如：蓝桥云课的一段代码。
图片描述
其语法格式为：

.类名 {
  属性名: 属性值;
}

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号），指定这个 HTML 元素的 id，这个 id 在 HTML 文档中是唯一的。

它的使用与类选择器类似，语法格式如下：

#id 选择器名 {
  属性: 属性值;
}

选择器的优先级

在 HTML 中选择器的优先级为：id 选择器 > 类选择器 > 标签选择器。

!important 的介绍

当你在样式声明中加入 !important 规则时，它会改变样式声明的优先级。

新建一个 index4.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>
      #idSelector {
        color: blue;
      }
      .classSelector {
        color: yellow;
      }
      p {
        color: red !important;
      }
    </style>
  </head>
  <body>
    <p id="idSelector" class="classSelector">蓝桥云课</p>
  </body>
</html>

点击预览页面，实验效果如下：

在这里插入图片描述

注意：在日常开发中我们尽量不要使用 !important。

除了上述三种基本选择器外，我们还有两种常用的选择器，分别是：

  • 后代选择器
  • 群组选择器

后代选择器主要可以更加精确定位到指定元素，以免与其他元素混淆。

群组选择器主要用来给多个不同的元素添加相同的 CSS 样式。

后代选择器

后代选择器是选择标签内部中某一标签的所有元素，其包括子元素及其他后代元素。

在使用后代选择器时，父标签名和后代标签名必须用空格隔开，这样才能识别是某个标签内部的后代元素。

新建一个 index5.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>
      #paragraph p {
        color: lightskyblue;
      }
    </style>
  </head>
  <body>
    <div id="paragraph">
      <p>这是一个段落</p>
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

在上面代码中，使用 #paragraph p 可以获取到 id 名为 paragraph 的 div 元素中的子元素 p 标签，我们给该标签中的文字内容设置了字体颜色。

群组选择器

群组选择器是用于同时对几个选择器进行相同的样式设置。

在使用群组选择器时，两个选择器之间必须要用英文逗号隔开。

新建一个 index6.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,
      span {
        color: lightskyblue;
      }
    </style>
  </head>
  <body>
    <div>段落一</div>
    <span>段落二</span>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

在上面代码中，使用 div,span 给 div 标签和 span 标签设置了相同的字体颜色。

CSS3新增的选择器，详细见：CSS3 新增选择器

背景样式

background-color 属性

background-color 属性可以给指定标签元素设置背景色。

举个例子！ 我们给 body 元素设置一个背景颜色。

新建一个 index7.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>
      body {
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body></body>
</html>

点击预览页面，实验效果如下：

在这里插入图片描述

background-image 和 background-size 属性

background-image 属性可以把图像插入背景。background-size 属性可以给背景图设置大小。

举个例子！ 我们给 body 元素设置一个背景图像。

新建一个 index8.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>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
      }
    </style>
  </head>
  <body></body>
</html>

点击预览页面，实验效果如下：

图片描述

background-position 属性

通过 background-position 属性，可以改变图像在背景中的位置。

我们在 index9.html 中加入 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>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
        background-position: center;
      }
    </style>
  </head>
  <body></body>
</html>

效果如下：

图片描述

background-repeat 属性

background-repeat 属性是用来设置背景图像是否平铺。

下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。

可 取 值描 述
repeat背景图像将在垂直方向和水平方向重复（默认值）
repeat-x背景图像将在水平方向重复
repeat-y背景图像将在垂直方向重复
no-repeat背景图像将仅显示一次
我们规定应该从父元素继承 background-repeat 属性的设置。

我们在 index10.html 中加入 background-repeat 属性并设置值为不平铺(no-repeat)。

<!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 {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body></body>
</html>

效果如下：

图片描述
repeat-x：
在这里插入图片描述
repeat-y：
在这里插入图片描述

文本属性

文本属性用于定义文本的样式，通过文本属性，可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示：

属 性可 取 值描 述
line-heightnormal、number、length、%设置行高
text-indentlength、%设置文本缩进
text-alignleft、right、center、justify、start、end设置对齐方式
letter-spacingnormal、length设置字符间距
text-decorationline、color、style、thickness设置文本修饰
white-spacenormal、pre、nowrap、pre-wrap、pre-line、break-spaces规定如何处理空白
line-breakauto、loose、normal、strict、anywhere、unset处理如何断开带有标点符号的文本的行

line-height 的使用

line-height 用于设置多行元素的空间量，可取值具体说明如下：

  • normal：取决于用户端。
  • number：数字乘以元素的字体大小。
  • length：指定长度用于计算高度。
  • %：计算值是给定的百分比值乘以元素计算出的字体大小。

新建一个 index11.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line-height 的使用</title>
    <style>
      div {
        width: 300px;
        height: 400px;
        border: 1px solid;
        font-size: 15px;
        display: inline-block;
        vertical-align: top;
      }
      .div1 {
        line-height: 2; /*15 * 2*/
      }
      .div2 {
        line-height: 30%; /*15 * 30% */
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
    <div class="div2">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

text-decoration 的使用

text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：

  • text-decoration-line 设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。
  • text-decoration-color 设置线的颜色。
  • text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
  • text-decoration-thickness 设置线的粗细。

新建一个 index12.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-decoration 的使用</title>
    <style>
      .item1 {
        text-decoration: underline lime; /*下划线直线*/
      }
      .item2 {
        text-decoration: wavy overline lime; /*上划线波浪线*/
      }
      .item3 {
        text-decoration: line-through lime; /*中划线*/
      }
      .item4 {
        text-decoration: none; /*无样式*/
      }
      .item5 {
        text-decoration: dashed underline overline lime 5px; /*圆点上划线和下划线*/
      }
    </style>
  </head>
  <body>
    <p class="item1">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item2">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item3">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item4">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item5">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

字体属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：

属 性可 取 值描 述
fontfont-style、font-variant、font-weight、font-size（或 line-height）、font-family在一个声明中设置所有的字体属性
font-family字体名称、inherit设置字体类型
font-sizexx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit设置字体大小
font-weightnormal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）设置字体粗细
font-stylenormal、italic、oblique、inherit设置字体风格

新建一个 index13.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>
      h3 {
        font-size: 20px;
        font-family: 隶书;
        line-height: 28px;
      }
      span {
        font: italic 16px 华文彩云;
      }
    </style>
  </head>
  <body>
    <h3>Web 前端技术</h3>
    <span>在当今社会中，Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用
      系统，就必须掌握 Web 前端技术。</span>
  </body>
</html>

点击预览页面，实验效果如下：
在这里插入图片描述

链接中的伪类

在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。

状态效果
a:link普通的、未被访问的链接。
a:hover鼠标指针位于链接的上方。
a:active链接被单击的时刻。
a:visited用户已访问的链接。

针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。

状 态颜 色背 景 色文 本 修 饰
未访问蓝色无无下画线
鼠标移到黑色#DDDDDD下画线
正单击红色#AAAAAA删除线
已访问绿色无无下画线

对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。
顺序不要乱

新建一个 index14.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>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">这是一个链接</a>
  </body>
</html>

“#”的意思是链接当前页面。

在CSS中，（星号）是通用选择器，它匹配所有元素。当你使用选择器时，你可以同时对文档中的所有元素应用相同的样式。
*选择器被用来应用文本装饰属性text-decoration:none，这样就取消了所有元素的文本装饰效果。

开启 8080 端口，打开 Web 服务，效果如下：

图片描述
同学们可能很疑惑，我们为什么要按照这样的顺序来使用呢？🤔 我们调整一下这几个伪类的顺序，看看会发生什么。

我们把 a:link 放到最后，效果如下。

图片描述

从图中我们可以发现其中的样式属性都被覆盖了。

我们把 a:hover 放到 a:active 之后，效果如下。

图片描述

从图中我们可以发现 a:active 的属性样式被覆盖了。

通过上面的例子我们可以知道链接伪类的使用顺序是很重要的。

列表样式

属 性可 取 值描 述
list-stylelist-style-type、list-style-position、list-style-image在一个声明中设置所有的列表属性
list-style-imageURL、none设置图像为列表项标志
list-style-positioninside、outside、inherit设置列表中列表项标志的位置
list-style-typedisc（默认）、circle、square、decimal 等设置列表项标志的类型

新建一个 index15.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>
      ul {
        list-style-position: inside;
        list-style-image: url(list.gif);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>喵</li>
    </ul>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

盒模型

盒子模型就是用来装 HTML 元素的盒子，它用于描述一个装有 HTML 元素的矩形盒子。该模型包括边框（border）、内边距（padding）、内容（content）、外边距（margin）、宽和高等属性，下图显示了盒模型的结构。

图片描述

各部分的功能如下表：

区域功能
内容区内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。
内边距内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。
边框边框用于标识盒子的边界，介于内边距和外边距之间。
外边距外边距位于边框外部，是边框与周围之间的空间。

border 属性

border 属性用于设置元素的边框属性，其用法如下所示：

border: border-width border-style border-color;

属性值说明如下：

  • border-width：是边框宽度，宽度一般用数值即可。
  • border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
  • border-color：是边框线的颜色。

border、border-width、border-style、border-color 都是复合属性，我们也可以单独设置某条边框的样式。

在css3中，复合属性又称“简写属性”，指的是可以在一个声明中同时书写多个属性代码、控制多种样式的属性；例如border属性，就可以在一个声明中控制边框宽度、边框样式和边框颜色。

例如，border-color 可以写成：

border-top-color: 上边框颜色;
border-right-color: 右边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;

举个例子，新建一个 index.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>
      p {
        border-top-style: solid;
        border-right-style: dotted;
        border-bottom-style: dashed;
        border-left-style: double;
      }
    </style>
  </head>
  <body>
    <p>
      在当今社会中，Web 已经成为网络信息共享和发布的主要形式。 要想开发 Web
      应用系统，就必须掌握前端技术。 本书从 HTML、CSS 和 JavaScript
      三个方面系统地介绍了 Web 前端开发。
    </p>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

padding 属性

padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。

其使用格式如下所示：

padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;

新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top: thin solid red;
        border-right: medium dotted green;
        border-bottom: dashed thick blue;
        border-left: double 6px yellow;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      在当今社会中，Web已经成为网络信息共享和发布的主要形式。
      要想开发Web应用系统，就必须掌握前端技术。
      本书从HTML、CSS和JavaScript三个方面系统地介绍了Web前端开发。
    </p>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

margin 属性

margin 属性是用来设置元素的外边距的。

其使用格式如下：

margin: 上边距 右边距 下边距 左边距;

也可以省略写。

当左右边距值相同时，写法如下：

margin: 上边距 左右边距 下边距;

当上下边距值相同，左右边距值相同时，写法如下：

margin: 上下边距 左右边距;

当上下左右边距值均相同时，写法如下：

margin: 属性值;

从上面的内容，我们可以看出 margin 属性是个复合属性，我们可以分开设置上下左右的边距，写法如下：

/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;

新建一个 index2.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 {
        width: 200px;
        height: 100px;
        border: 1px solid blue;
      }
      p {
        width: 100px;
        height: 50px;
        background-color: darkgrey;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <p>蓝桥云课</p>
    </div>
  </body>
</html>

点击预览，效果如下：

图片描述

我们可以通过 margin 属性来改变 p 元素相对于 div 元素的位置。修改代码如下：

p {
  width: 100px;
  height: 50px;
  background-color: darkgrey;
  text-align: center;
  margin: 25px 50px;
}

修改之后，显示效果如下：

图片描述

display 属性

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

display 属性值的说明如下表所示。

属性值说明
block元素以块级方式展示。
inline元素以内联方式展示。
inline-block元素以内联块的方式展示。
none隐藏元素。

block 属性值

block 属性值可以让行内元素以块级元素的方式显示在页面上。

其使用格式如下：

display: block;

还记得前面学过的行内元素的概念吗？😜 行内元素就是可以和其他元素同处一行的元素，例如 span 标签元素。

新建一个 index.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>
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <span>蓝桥</span><span>云课</span>
  </body>
</html>

点击预览，效果如下：

图片描述

可以看到，原本 span 标签是行内元素，却因为设置 display: block; 导致「蓝桥」与「云课」分开了。

inline 属性值

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。

其使用格式如下：

display: inline;

新建一个 index1.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 {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div>蓝桥</div>
    <div>云课</div>
  </body>
</html>

在这里插入图片描述

看，原本霸道的大块头，也被 display 属性给治服了，「蓝桥」与「云课」又在一起了。

inline-block 属性值

我们的块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。

其使用格式如下：

display: inline-block;

那么到底在哪些情况下可以用到这个属性呢？

比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。

新建一个 index2.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 {
        text-decoration: none;
        background-color: rgb(95, 118, 160);
        display: inline-block;
        width: 70px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">展示</a>
    <a href="#">更多</a>
  </body>
</html>

点击预览，效果如下：

图片描述

none 属性值

none 属性值可以用来隐藏页面上的元素。

使用格式如下：

display: none;

新建一个 index3.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 {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>哈哈，看不见我🤫</div>
  </body>
</html>

点击预览，可以发现页面上空空的。

浮动 float

我们使用 float 属性指定元素沿其容器的左侧或右侧放置，浮动布局常见取值如下：

  • left（左浮动）
  • right（右浮动）

使用格式如下所示：

float: left|right;

新建一个 index.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>Document</title>
    <style>
      section {
        border: 1px solid green;
        width: 400px;
        float: left;
      }
      img {
        width: 120px;
        height: 120px;
      }
      img:first-child {
        float: left;
      }
      img:nth-child(2) {
        float: right;
      }
    </style>
  </head>
  <body>
    <section>
      <img src="https://labfile.oss.aliyuncs.com/courses/10532/lotus1.png" />
      <img src="https://labfile.oss.aliyuncs.com/courses/10532/lotus2.png" />
      <p>
        曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
      </p>
    </section>
  </body>
</html>

:first-child表示父元素的第一个子元素

img:nth-child(2) 是一个 CSS 选择器，用于选择其父元素的第二个子元素中的 <img> 元素。

nth-child(n) 表达式： nth-child(n) 是 CSS 中的伪类选择器，用于选择某个元素在其父元素中的特定位置。在这里，n 表示位置，可以是一个数字或关键词。当 n 是数字时，它表示所选元素在其父元素的子元素中的位置；当 n 是关键词时，比如 even(偶数)、odd（奇数）、first-child、last-child 等，它表示根据特定条件选择元素。

详细见：子元素伪类选择器

启动 8080 端口，打开 Web 服务，可以看到如下实验效果：

图片描述

下面我们来看看定位布局有什么不同之处～

定位 position 属性

  • 静态定位（inherit）
  • 相对定位（relative）
  • 绝对定位（absolute）
  • 固定定位（fixed）

top、right、left 和 bottom 是 CSS 中用于定位元素的属性，通常用于相对定位（position: relative;）或绝对定位（position: absolute;）的元素。

  • top 属性用于指定元素相对于其最近的已定位祖先元素（通常是其父元素）上边缘的偏移量。正值表示向下移动，负值表示向上移动。
  • right 属性用于指定元素相对于其最近的已定位祖先元素右边缘的偏移量。正值表示向左移动，负值表示向右移动。
  • left 属性用于指定元素相对于其最近的已定位祖先元素左边缘的偏移量。正值表示向右移动，负值表示向左移动。
  • bottom 属性用于指定元素相对于其最近的已定位祖先元素下边缘的偏移量。正值表示向上移动，负值表示向下移动。

这些属性常用于创建响应式布局或对元素进行精确的定位。例如，通过设置 top: 10px; 可以使元素向下移动 10px，通过设置 right: -20px; 可以使元素向左移动 20px。

静态定位 (inherit)

一般的标签元素不加任何定位属性时，默认都属于静态定位，静态定位在页面的最底层属于标准流（普通流），在页面中没有特殊的操作方式和显示效果。

固定定位 (fixed)

fixed 属性值用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置。

使用格式如下：

position: fixed;

新建一个 index1.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 {
        width: 100%;
        margin-left: 15%;
      }
      .ad-l {
        position: fixed;
        top: 100px;
        left: 0;
      }
      .ad-r {
        position: fixed;
        top: 100px;
        right: 0;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>

图片网址：
https://labfile.oss.aliyuncs.com/courses/2841/ad-l.png
https://labfile.oss.aliyuncs.com/courses/2841/ad-r.png
https://labfile.oss.aliyuncs.com/courses/2841/box.png

启动 8080 端口，打开 Web 服务，可以看到如下实验效果：

在这里插入图片描述

相对定位 (relative)

相对定位是该元素的位置相对于它原始的位置来计算的。position 属性为我们提供了 relative 属性值来设置元素的相对属性。

position: relative;

新建一个 index2.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 {
        width: 100%;
      }
      .ad-l {
        position: relative;

        left: -40px;
      }
      .ad-r {
        position: relative;

        left: 100px;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下实验效果：

图片描述

从效果中我们可以看到，两个广告图片相对于正常位置向两个方向分别移动了设置大小的像素值。

绝对定位 (absolute)

绝对定位，能把元素精确地放在任意位置。position 属性为我们提供了 absolute 属性值来设置元素的相对属性。

语法格式为：

position: absolute;

新建一个 index3.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 {
        width: 100%;
        margin-left: 180px;
      }
      .ad-l {
        position: absolute;
        left: 50px;
        top: 150px;
      }
      .ad-r {
        position: absolute;
        right: 30px;
        top: 150px;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>

启动 8080 端口，打开 Web 服务，可以看到如下实验效果：

图片描述

CSS3 新增选择器

在前面我们已经学习了元素选择器、id 选择器和类选择器，我们可以通过标签名、id 名、类名给指定元素设置样式。

现在我们继续选择器之旅，学习 CSS3 中新增的三类选择器，分别是：

  • 属性选择器
  • 子元素伪类选择器
  • UI 伪类选择器

属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。

在 CSS3 中新增了三种属性选择器，如下所示：

选择器描述
E[attr^=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。

新建一个 index.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[href^="#"] {
        color: rgb(179, 255, 0);
      }
      a[href$="org"] {
        color: rgb(195, 0, 255);
      }
      a[href*="un"] {
        background-color: rgb(0, 255, 149);
        color: white;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">本地链接</a></li>
      <li><a href="https://www.lanqiao.cn">蓝桥云课</a></li>
      <li><a href="https://developer.mozilla.org">MDN</a></li>
      <li><a href="https://unsplash.com">Unsplash</a></li>
    </ul>
  </body>
</html>

预览页面，效果如下：

图片描述

在上面代码中，我们
使用 a[href^="#"] 去匹配 a 标签中 href 属性值以 # 开头的元素。
使用 a[href$="org"] 去匹配 a 标签中 href 属性值以 org 结尾的元素。
使用 a[href*="un"] 去匹配 a 标签中 href 属性值包含 un 的元素。

子元素伪类选择器

子元素伪类选择器就是选择某元素的子元素的一种选择器。

在 CSS3 中，有以下几种子元素伪类选择器：

选择器描述
E:first-child选择元素 E 的第一个子元素。
E:last-child选择元素 E 的最后一个子元素。
E:nth-child(n)选择元素 E 的第 n 个子元素，n 有三种取值，数字、even(偶数)、odd（奇数）。注意第一个子元素的下标是 1。
E:only-child选择元素 E 下唯一的子元素。
E:first-of-type选择父元素下第一个 E 类型的子元素。
E:last-of-type选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)选择所有 E 元素倒数的第 n 个为 E 的子元素。

详细例子可见：一分钟理解:first-child :first-of-type,看完还不会 打我

新建一个 index1.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 {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background-color: rgb(0, 255, 242);
      }
      div:nth-child(2) {
        background-color: rgb(0, 255, 128);
      }
      div:nth-of-type(4) {
        background-color: rgb(111, 0, 255);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

预览页面，效果如下：

图片描述

  • 在代码中，我们使用 div:nth-child(2) 给 div 的第 2 个子元素添加绿色背景颜色。
  • 使用 div:nth-of-type(4) 给父元素下第 4 个 div 子元素添加紫色背景颜色。

UI 伪类选择器

UI 伪类选择器是通过元素的状态来选择的一种选择器。

在 CSS3 中有以下几种 UI 伪类选择器。

选择器描述
:focus给获取焦点的元素设置样式。
::selection给页面中被选中的文本内容设置样式。
:checked给被选中的单选框或者复选框设置样式。
:enabled给可用的表单设置样式。
:disabled给不可用的表单设置样式。
:read-only给只读表单设置样式。
:read-write给可读写的表单元素设置样式。
:valid验证有效。
:invalid验证无效。

练习一：属性有效性验证

页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。

新建一个 index2.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>
      /*格式错误*/
      input:invalid {
        background-color: red;
      }
      /*格式正确*/
      input:valid {
        background-color: green;
      }
    </style>
  </head>
  <body>
    电子邮箱：<input type="email" />
  </body>
</html>

预览页面，效果如下：

图片描述

练习二：获得焦点验证

页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变，

新建一个 index3.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>
      input:focus {
        background-color: rgb(255, 153, 0);
      }
    </style>
  </head>
  <body>
    姓名：<input type="text" /><br />
    密码：<input type="password" />
  </body>
</html>

预览页面，效果如下：

图片描述

文本阴影(text-shadow)

某些时候我们想让字体看起来更立体，更具艺术性，让人眼前一亮，可以给文字使用文本阴影属性。

在 CSS3 中，我们使用 text-shadow 属性来给文本内容添加阴影的效果。

文本阴影的语法格式如下：

text-shadow: x-offset y-offset blur color;
  • x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。
  • y-offset 是沿 y 轴方向的偏移距离，允许负值，必须参数。
  • blur 是阴影的模糊程度，可选参数。
  • color 是阴影的颜色，可选参数。

新建一个 index4.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 {
        font-size: 50px;
        color: rgb(0, 153, 255);
        text-shadow: 4px 4px 3px rgb(0, 255, 179);
      }
    </style>
  </head>
  <body>
    <div>蓝桥云课</div>
  </body>
</html>

预览页面，效果如下：

图片描述

  • 页面上有个包含「蓝桥云课」文字内容的 div 标签，我们使用 font-size 属性设置字体大小为 50px。
  • 使用 color 属性设置字体颜色。
  • 使用 text-shadow 属性添加文本阴影效果。

各位小伙伴们，你们可以自由改变 text-shadow 的属性值，来体验下各属性值带来的变化哦！

文本溢出(text-overflow)

text-overflow 属性可以设置超长文本省略显示，其语法如下所示：

text-overflow: clip|ellipsis;

其属性值的含义如下所示：

属性值描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。

新建一个 index5.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>
      p {
        border: 1px solid blue;
        width: 100px;
        height: 50px;
        overflow: hidden; /*隐藏超出文本*/
        white-space: nowrap; /*强制单行显示*/
      }
      .poem1 {
        text-overflow: clip;
      }
      .poem2 {
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <p class="poem1">木落雁南度，北风江上寒。我家襄水曲，遥隔楚云端。</p>
    <p class="poem2">乡泪客中尽，孤帆天际看。迷津欲有问，平海夕漫漫。</p>
  </body>
</html>

预览页面，效果如下：

图片描述

  • 在代码中，我们在 p 标签里分别放了一段诗，使用标签选择器给两个 p 标签定义了相同的样式。
  • 使用 text-overflow: clip 给 class=poem1 的 p 标签设置文本溢出时，修剪溢出的文本。
  • 使用 text-overflow: ellipsis 给 class=poem2 的 p 标签设置用省略号代替溢出的文本。

拓展overflow：

overflow 是 CSS 属性之一，用于控制元素内容超出容器时的显示和处理方式。它可以影响元素在内容溢出时的滚动、隐藏或者显示方式。以下是 overflow 属性的详细说明：

  1. visible： 默认值。内容溢出时会显示在容器外部，可能会遮盖其他内容或者超出容器边界。

  2. hidden： 内容溢出时会被隐藏，不会显示在容器外部，也不会出现滚动条。

  3. scroll： 内容溢出时会显示滚动条，用户可以通过滚动条查看超出容器的内容。即使内容未溢出，也会显示一个隐藏的滚动条占据空间。

  4. auto： 内容溢出时会显示滚动条，但只有当内容确实溢出时才会出现滚动条。如果内容未溢出，则不会显示滚动条。

  5. overlay： 内容溢出时会显示滚动条，但滚动条会覆盖内容，不会占据额外的空间。适用于绝对定位元素或者弹出框等情况。

overflow 属性可以应用于任何具有固定高度或者宽度的容器，例如 <div> 元素。通过设置不同的 overflow 值，可以控制内容溢出时的显示效果，从而实现滚动、隐藏或者覆盖等效果。

拓展white-space：

white-space 是 CSS 属性之一，用于控制文本在元素内部的空白符处理方式。它可以影响文本中的空格、换行符和制表符等空白字符的显示和处理方式。以下是 white-space 属性的详细说明：

  1. normal： 默认值。文本会根据需要自动换行，并且连续的空白符会被合并为一个空格，多余的空格会被忽略。换行符会按照文本的内容自动换行显示。

  2. nowrap： 文本不会自动换行，会在同一行上显示，直到遇到 <br> 标签或者换行符为止。

  3. pre： 保留空白符，但是会将连续的空白符合并为一个空格。文本中的换行符和空格会按照实际的位置显示，而不会根据需要自动换行。

  4. pre-wrap： 保留空白符，但是会将连续的空白符合并为一个空格。文本中的换行符和空格会按照实际的位置显示，并且可以根据需要自动换行。

  5. pre-line： 保留空白符，但是会将连续的空白符合并为一个空格。文本中的换行符和空格会按照实际的位置显示，并且可以根据需要自动换行，但是连续的换行符会被合并为一个换行符。

这些值可以单独使用，也可以组合使用。例如，white-space: nowrap; 可以防止文本自动换行，而 white-space: pre-line; 则可以保留换行符，并且根据需要自动换行。

圆角边框(border-radius)

在 CSS3 中，使用 border-radius 属性来设置圆角边框。

border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。

其语法格式为：

border-radius: 取值;

我们也可以分开设置四个角的属性值，语法如下所示：

border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;

新建一个 index6.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: rgb(17, 61, 117);
        border-radius: 140px 20px 30px 40px; /*四个圆角直径不同*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

预览页面，效果如下：

图片描述

盒子阴影(box-shadow)

box-shadow 属性可以用来设置一个或多个下拉阴影的框，视觉效果就像是盒子有了阴影一样。

其语法格式为：

box-shadow: h-shadow v-shadow blur spread color inset;

其属性值的意义如下所示：

值说明
h-shadow必选，水平阴影的位置，允许负值。
v-shadow必选，垂直阴影的位置，允许负值。
blur可选，模糊距离。
spread可选，阴影的大小。
color可选，阴影的颜色。
inset可选，将外部阴影改为内部阴影。

新建一个 index7.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 {
        width: 200px;
        height: 100px;
        text-align: center;
        background-color: green;
        box-shadow: 10px 10px 5px #26ad8c;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

预览页面，效果如下：

图片描述

页面上有一个宽为 200px、长为 100px 且具有绿色背景颜色的 div 元素，我们使用 box-shadow: 10px 10px 5px #26ad8c 设置了水平值为 10px，垂直值为 10px，模糊距为 5px，阴影颜色为 #26ad8c 的边框阴影。

挑战要求：

新建一个 index8.html 文件。页面上有一个高和宽均为 100px 的正圆形 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: 100px;
        height: 100px;
        border: 1px solid steelblue;
        border-radius: 100%;
        box-shadow: 5px 5px 10px seagreen;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

背景新属性

在 CSS3 中增加了背景属性，我们可以更加灵活地设置背景图片。

  • background-size
  • background-image
  • background-position
  • background-repeat

背景图像尺寸(background-size)

background-size 属性可以用来控制背景图像的显示大小。语法如下：

background-size: length|percentage|cover|contain;
值描述
length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为 auto（自动）。
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为"auto（自动）" 。
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

任务图片链接：
https://labfile.oss.aliyuncs.com/courses/3773/j.jpg

新建一个 index9.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 {
        width: 350px;
        height: 300px;
        border: 1px solid;
        color: rgba(0, 0, 0, 0.445);
        background-image: url("j.jpg");
        background-size: 350px 300px;
      }
    </style>
  </head>
  <body>
    <div>
      <h3>采桑子·荷花开后西湖好</h3>
      荷花开后西湖好，载酒来时。不用旌旗，前后红幢绿盖随。<br />
      画船撑入花深处，香泛金卮。烟雨微微，一片笙歌醉里归。
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

多图背景

在 CSS3 中，background-image 属性的属性值可以包含多个图片的地址。语法如下：

/*图片地址*/
background-image: url(), url(), ..., url();

若想让图片放在我们想要的位置，可以使用 background-position 属性设置图片显示的位置。语法如下：

/*图片显示的位置*/
background-position: position1, position2, ..., positionN;

若想要设置图片是否重复显示在页面上，我们可以添加 background-repeat 属性。语法如下：

/*图片是否重复*/
background-repeat: repeat1, repeat2, ..., repeatN;

任务图片链接：
https://labfile.oss.aliyuncs.com/courses/3429/icons8-rat-96.png
https://labfile.oss.aliyuncs.com/courses/3429/nemuel.jpg

新建一个 index10.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>
      #content1 {
        /*小图片来自 icons*/
        background-image: url("icons8-rat-96.png"), url("nemuel.jpg");
        background-position: right bottom, left top; /*相对于父元素大小，老鼠图片右下角显示，大背景图片在左上角显示*/
        background-repeat: no-repeat, no-repeat; /*两张图片不重复*/
        padding: 15px;
        width: 400px;
        height: 260px;
      }
    </style>
  </head>
  <body>
    <div id="content1"></div>
  </body>
</html>

点击预览页面，效果如下：

图片描述

渐变属性

有时候我们会看到一些好看的渐变色，在 CSS3 中也为我们提供了渐变色属性，用来设置背景的渐变色。有两种不同的渐变方式：

  • 线性渐变
  • 径向渐变

线性渐变 (linear-gradient)

线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。

其语法格式为：

background-image: linear-gradient(side-or-corner|angle, linear-color-stop);

参数说明如下：

  • side-or-corner 是描述渐变线的起始位置，它包含两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。
  • angle 是用角度值来指定渐变的方向。
  • linear-color-stop 是设置渐变的颜色值。

新建一个 index11.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>
      #linear {
        display: flex;
      }
      /*从上到下线性渐变*/
      .gradient1 {
        width: 100px;
        height: 100px;
        background-image: linear-gradient(#ff577f, #c6c9ff);
      }
      /*从左到右线性渐变*/
      .gradient2 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
      }
      /*从左上角到右下角的渐变*/
      .gradient3 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
      }
      /*定义角度的渐变*/
      .gradient4 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
      }
    </style>
  </head>
  <body>
    <div id="linear">
      <div class="gradient1"></div>
      <div class="gradient2"></div>
      <div class="gradient3"></div>
      <div class="gradient4"></div>
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

重复性线性渐变

重复性线性渐变是用重复的线性渐变组成的 <image>，它与线性渐变的区别在于，它会在所有方向上重复渐变来覆盖整个元素。

其语法格式为：

background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);

参数说明如下：

  • side-or-corner 是描述渐变线的起始位置，它包含 to 和两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。
  • angle 是用角度值来指定渐变的方向。
  • color-stop 是由一个 <color> 组成，并且跟随一个可选的终点位置。

新建一个 index12.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 {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin-left: 20px;
        margin-top: 20px;
      }
      .item1 {
        background-image: repeating-linear-gradient(
          45deg,
          #8843f8 0%,
          #ef2f88 5%,
          #f47340 10%,
          #f9d371 15%
        );
      }
      .item2 {
        background-image: repeating-linear-gradient(
          to left top,
          #8843f8 0%,
          #ef2f88 5%,
          #f47340 10%,
          #f9d371 15%
        );
      }
    </style>
  </head>
  <body>
    <div class="item1"></div>
    <div class="item2"></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

径向渐变 (radial-gradient)

径向渐变是由元素中间定义的渐变。

其语法格式为：

background-image: radial-gradient(shape, color-stop);

参数说明如下：

  • shape 设置渐变的形状，其取值有 circle（圆形） 和 ellipse（椭圆）。
  • color-stop 设置某个确定位置的颜色值。

新建一个 index13.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>
      #radial {
        display: flex;
      }
      /*均匀分布径向渐变*/
      .gradient1 {
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
      }
      /*不均匀渐变*/
      .gradient2 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
      }
      /*椭圆形渐变*/
      .gradient3 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
      }
      /*圆形渐变*/
      .gradient4 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
      }
    </style>
  </head>
  <body>
    <div id="radial">
      <div class="gradient1"></div>
      <div class="gradient2"></div>
      <div class="gradient3"></div>
      <div class="gradient4"></div>
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

重复性径向渐变

重复性径向渐变是用重复性的径向渐变组成的图像。它与径向渐变的区别在于，它会从原点开始重复径向渐变来覆盖整个元素。

其语法格式为：

background: repeating-radial-gradient(extent-keyword, color-stop);

background 和 background-image 的主要区别在于它们可以设置的属性范围不同。在 CSS 中，background 是一个复合属性，可以用来设置多个背景相关的属性，如背景色、背景图片、背景位置等。而 background-image 是 background 属性中的一个子属性，专门用来设置背景图片。

参数说明如下：

  • extent-keyword 是描述边缘轮廓的具体位置，关键字常量如下所示：

    图片描述

  • color-stop 是某个确定位置的固定颜色值。

下面，我们来举个例子吧～

新建一个 index14.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 {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin-left: 20px;
        margin-top: 20px;
      }
      .gradient1 {
        background: repeating-radial-gradient(
          closest-corner,
          #8843f8 0%,
          #ef2f88 5%,
          #f47340 10%,
          #f9d371 15%
        );
      }
      .gradient2 {
        background: repeating-radial-gradient(
          farthest-side,
          #8843f8,
          #ef2f88,
          #f47340,
          #f9d371
        );
      }
    </style>
  </head>
  <body>
    <div class="gradient1"></div>
    <div class="gradient2"></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

元素转换

transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。

在我们的实验中，会学到以下三种转换函数：

  • 旋转函数（rotate）
  • 移动函数（translate）
  • 缩放函数（scale）

旋转函数 (rotate)

在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕原点旋转，主要在二维空间内进行操作。

图片描述

其语法格式如下所示：

transform: rotate(角度); /*元素按照指定角度旋转*/

这里的角度可以是正值也可以是负值。

正负值意味着不同的旋转方向，规定参数为正时，顺时针旋转；参数为负时，逆时针旋转。

新建一个 index15.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 {
        width: 50px;
        height: 50px;
        margin: 20px;
        display: inline-block;
        background-color: chartreuse;
      }
      /*向右旋转 60 度*/
      .c1 {
        background-color: #ffe6e6;
        transform: rotate(60deg);
      }
      /*向左旋转 60 度*/
      .c2 {
        background-color: #a7c5eb;
        transform: rotate(-60deg);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div></div>
    <div class="c2"></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

rotateX 和 rotateY 的使用

除了使用 rotate 函数绕原点来旋转指定元素外，我们还可以围绕指定轴来旋转元素。

rotateX 函数可以让指定元素围绕横坐标（X 轴）旋转。其使用格式如下所示：

transform: rotateX(角度);

rotateY 函数可以让指定元素围绕纵坐标（Y 轴）旋转。其使用格式如下所示：

transform: rotateY(角度);

新建一个 index16.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>
      .c1 {
        transform: rotateX(70deg);
      }
      .c2 {
        transform: rotateX(180deg);
      }
      .c3 {
        transform: rotateY(45deg);
      }
      .c4 {
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c1"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c2"
      />
    </div>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c3"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c4"
      />
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

同学们对上面的结果可能很疑惑，想象不出具体是怎么旋转的，下面我用动图来给大家展示一下旋转过程。

沿 X 轴旋转 180deg 的过程如下所示：

图片描述

沿 Y 轴旋转 180deg 的过程如下所示：

图片描述

移动函数 (translate)

translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。

其语法格式为：

transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/

新建一个 index17.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 {
        width: 50px;
        height: 50px;
      }
      /*沿 X 轴向右移动 20 个像素*/
      .c1 {
        background-color: #51adcf;
        transform: translateX(20px);
      }
      /*沿 Y 轴向下移动 30 个像素*/
      .c2 {
        background-color: #ffe5b9;
        transform: translateY(30px);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

页面上有两个 div 元素块，
使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；
使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。

缩放函数 (scale)

scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。

其语法格式为：

transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/

新建一个 index18.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 {
        width: 50px;
        height: 50px;
        margin: 30px;
      }
      .c1 {
        background-color: rgba(179, 153, 38, 0.651);
      }
      /*沿着 X 和 Y 轴进行缩放*/
      .c2 {
        background-color: #9088d4;
        transform: scale(2);
      }
      /*沿着 X 轴进行缩放*/
      .c3 {
        background-color: #ffe5b9;
        transform: scaleX(2);
      }
      /*沿着 Y 轴进行缩放*/
      .c4 {
        background-color: #1c8181;
        transform: scaleY(2);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

  • 在页面上有四个 div 元素块，第一个是宽和高均为 50 个像素的正方形元素块，我们另外三个元素块在此基础上进行缩放。
  • 第二个元素块使用 transform: scale(2) 让元素同时沿着 X 轴和 Y 轴扩大 2 倍。
  • 第三个元素块使用 transform: scaleX(2) 让元素沿着 X 轴扩大 2 倍。
  • 第四个元素块使用 transform: scaleY(2) 让元素沿着 Y 轴扩大 2 倍。

过渡 (transition)

CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。

其语法如下所示：

transition: 指定属性 持续时间 速度曲线 开始时间;

它是一个复合属性，我们也可以如下分开使用这几个属性。

transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/

新建一个 index19.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 {
        margin-top: 40px;
        margin-left: 40px;
        width: 50px;
        height: 50px;
        background-color: #51adcf;
        /*ease-in-out 慢速开始慢速结束*/
        transition: transform 1s ease-in-out;
      }
      div:nth-child(2) {
        transform: rotate(-60deg);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

代码说明如下：

  • 在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
  • 在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
  • 使用 transition 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function 属性的属性值。

transition-timing-function 属性

接下来给大家介绍一下 transition-timing-function 属性的取值吧！

transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。

属性值说明
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
steps(int,start 或者 end)steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。
step-start相当于 steps(1, start)。
step-end相当于 steps(1, end)。
cubic-bezier(n,n,n,n)规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
initial规定使用默认值。
inherit规定从父元素继承该属性值。

transition-timing-function 属性有这么多的属性值，我们用 steps 来练习一下吧～

新建一个 index20.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 {
        width: 50px;
        height: 50px;
        margin: 50px;
        background-color: cornflowerblue;
        transition: transform 4s steps(4);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。

动画 (@keyframes)

@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示：

@keyframes 动画名
{
    0% {样式属性：属性值;}
    25% {样式属性：属性值;}
    50% {样式属性：属性值;}
    100% {样式属性：属性值;}
}

这里的百分比是用来规定动画发生变化的时间的，0% 代表动画的开始，100% 代表动画的结束，中间的可以自定义。

将 @keyframes 创建的动画绑定到选择器上，通过 animation 属性就能实现动画效果了，其语法格式为：

animation: 动画名 完成动画的周期 是否重复;

animation 属性是一个复合属性，它的子属性如下所示。

属性描述
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function规定动画的速度曲线。默认是 “ease”。
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。

新建一个 index21.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>
      .circle {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background-color: #ffd8a6;
        animation-name: action;
        animation-duration: 9s;
        animation-iteration-count: 10;
      }
      @keyframes action {
        0% {
          margin-left: 400px;
        }
        25% {
          background-color: #dd7631;
        }
        50% {
          border-radius: 10%;
        }
        100% {
          margin: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

总结（新增选择器~动画）

本节实验主要给大家介绍了 CSS3 中的常用新特性，内容比较多，这里我们一起来总结一下：

  • CSS3 新增选择器：包括新增属性选择器、子元素伪类选择器、UI 伪类选择器。
  • 文本阴影：使用 text-shadow 属性给文本内容设置阴影效果。
  • 文本溢出：使用 text-overflow 属性设置当内容溢出容器时，在页面上的显示方式。
  • 圆角边框：使用 border-radius 属性设置圆角边框。
  • 盒子阴影：使用 box-shadow 属性给元素添加阴影效果。
  • 背景属性：包括 background-size、background-image、background-position、background-repeat。
  • 渐变属性：包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。
  • 元素转换：包括元素旋转（rotate）、元素移动（translate）、元素缩放（scale）。
  • 过渡属性：使用 transition 属性过渡的效果。
  • 动画：使用 @keyframes 来定义动画。

CSS3弹性盒子 flex

  • flex-direction
  • flex-wrap
  • align-items
  • align-content

在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。

flex 主要由两个轴来控制布局，如下图所示。

图片描述

上图说明如下：

  • main axis 是主轴，该轴的开始为 main start，结束为 main end。
  • cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
  • flex item 是 flex 容器中的元素。

flex-direction 属性

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。

其语法格式为：

flex-direction: row | row-reverse | column | column-reverse;

其属性值的意义如下所示：

属性值描述
row横向从左到右排列（左对齐），默认的排列方式。
row-reverse反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column纵向排列
column-reverse反转纵向排列，从后往前排，最后一项排在最上面。

新建一个 index.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>
      .content1 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row; /*默认值，行对齐，主轴起点与终点相同*/
      }
      .content2 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse; /*行对齐，主轴起点与终点相反*/
      }
      .content3 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column; /*列对齐，主轴起点与终点相同*/
      }
      .content4 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse; /*列对齐，主轴起点与终点相反*/
      }
      .box {
        width: 50px;
        height: 50px;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="content1">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content2">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content3">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content4">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
  </body>
</html>

点击预览页面，效果如下。

图片描述

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

其属性值的意义如下所示：

属性值描述
nowrap默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse反转 wrap 排列。

新建一个 index1.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 {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

点击预览页面，查看效果如下：

图片描述

align-items 属性

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

其语法格式为：

align-items: flex-start | flex-end | center | baseline | stretch;

其属性值的意义如下所示：

属性值描述
flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。
`

新建一个 index2.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 {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

点击预览页面，查看效果如下。

图片描述

real_Moke
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值