web--CSS3
CSS3
CSS基本概念
CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
background-color: teal;
}
h1 {
color:white;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS让网页样式更丰富</h1>
</body>
</html>
我们在HTML文档的<head>元素中，加入了<style>元素，设置其属性type为text/css，表示此处内容为CSS。
我们在此CSS代码中，指定了：body背景颜色为蓝绿色(teal)；h1标题的字体颜色为白色(white)，字体大小为36px并且在网页中居中对齐。
CSS基础语法
由上面的实例，我们可以看出CSS语法主要包括两部分：选择器和声明。
基本格式如下：选择器 {声明1} 选择器
选择器用于指定我们要修改的HTML元素。例如，在上述实例中，body和h1就是选择器。在之后的实训中，我们也会学习使用多种更复杂的选择器。
声明
通过声明，我们定义要改变的元素样式。声明由属性和值构成，包含在花括号中，基本格式如下：{属性: 值;}例如，在上述实例中：{background-color: teal;},这一声明，指定了body元素的背景颜色为蓝绿色(teal)。同样的，我们对h1添加了多行声明：
{
/* 声明代表`h1`的字体颜色设置为白色*/
color: white;
/* 字体大小(font-size)为36px*/
font-size: 36px;
/*文字居中方式(text-align)为居中 */
text-align: center;
}
在平时开发网站时，建议每个声明通常单独列为一行，有助于阅读。当网站发布时，可以使用工具压缩，将多行声明写在一行，使得CSS文件大小更小，加载速度更快。
提示：语句最后的分号可以不写。如果多个声明写在一行，就必须书写。一般情况下，建议都书写。
CSS样式引入方式
样式引入方式 CSS样式有三种引入方式：内部样式表：如同之前实例中所示，在文档头部中引入；外部样式表：通过外部文件引入；内联样式：直接在特定元素中引入。
内部样式表 首先，对于内部样式表，书写的方式是直接在HTML文件的头部，添加<style type="text/css"> </style>元素。
举例如下：
<head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> /*样式添加在这里*/ </style> </head>
外部样式表 第二种方式，是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的<head>中添加CSS文件链接。
<head> <meta charset="utf-8"> <title>Hello World</title> /* 引入外部的CSS文件 */ <link rel="stylesheet" href="style.css" /> </head>
属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。
例如，当HTML文件与要引入的CSS文件不在同一文件夹时：
可以如下书写：
<link rel="stylesheet" href="CSS/style.css" /> 在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。
内联样式 内联样式是指直接在标签内添加样式属性。
举例如下：
<p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p> 显示如下：
通用的书写格式：
<tag style="样式表"> <tag style="样式表"></tag>
在实际开发过程中，通常建议使用第二种外联样式表的方式。
主要优点如下：
-
内容与样式分离；
-
易于开发和维护样式。
-
样式易于复用；
-
可在多个HTML文件中引入相同的样式文件。
-
加载更快。
如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。
样式的优先级顺序 三种样式引入的优先级顺序是：外部样式< 内部样式 < 内联样式。也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。
CSS 元素选择器
元素选择器 最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。
例如对于HTML页面：
<body> <h1>标题1</h1> <h2>标题2</h2> <p>普通段落中<a href="#">删除的引用。</a></p> </body>
使用元素选择器添加元素样式：
<style type="text/css"> html {color:black;} h1 {color:darkcyan;} h2 {color:lightSeaGreen;} p {color:grey;} a {text-decoration:line-through;} </style>
<style type="text/css">
html {color:black;}
h1 {color:darkcyan;}
h2 {color:lightSeaGreen;}
p {color:grey;}
a {text-decoration:line-through;}
</style>
当我们指定一个元素，并设置样式属性之后，文档中该元素便会应用样式。例如，我们设置p元素的颜色为灰色(grey)，在没有其他样式覆盖的情况下，文档中所有的p元素都将为灰色。如果想要多种元素应用同一样式，可以直接使用组合元素选择器。将多个要应用样式的元素用逗号隔开。
例如对于HTML页面：
<html> <body> <h1>组合选择器</h1> <p>组合选择器，可以将样式同时运用于多个元素。</p> </body> </html>
使用元素选择器添加元素样式：
<style type="text/css">
/* 组合元素选择器 */
/*将`h1`、`p`元素的颜色同时设置为灰色*/
h1,p {color:grey;}
</style>
注意：多个元素之间的逗号是必不可少的，如果缺失了逗号将表示其他含义。 元素选择器语法 我们可以看出元素选择器的语法规则如下：
/*单个元素选择器*/
元素 {样式声明}
/*组合元素选择器*/
元素1，元素2 {样式声明}
CSS 类选择器
类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。
例如，对于HTML页面:
<body> <div class="main"> <article class="news"> <h1>地震自救指南</h1> <p>大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先，在重心较低、且结实牢固的桌子下面躲避，并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合，无论如何，也要用坐垫等物保护好头部。</p> </article> </div> </body>
在该页面中，我们将第一个div元素的class设置为main，article元素的class值设置为news。通常设置class名字时，不要设置已有元素名，例如p、articel。
之后，添加页面样式:
<style type="text/css">
.main {
background-color: ivory;
margin: 10px;
}
.news {
padding: 10px;
color: black;
font-weight: bold;
}
p {
color: grey;
}
</style>
与元素选择器不同，对同一类的元素应用样式，需要在类名前加上一个点号（.），然后书写相应的样式声明。
类选择器语法 所以，我们可以看出，类选择器的语法规则如下：
-
首先，将html中想要应用类样式的元素，指定类名；
<元素名 class="指定的类名"></元素名> <元素名 class="指定的类名">
-
然后，书写相应类的样式；
.指定的类名 {样式声明}
CSS id选择器
id选择器 id选择器与我们上一关中学习的类选择器类似，但在使用上有不同。使用类选择器时，指定一个元素属于某类，使用的是关键字class，例如:
<body> <h1 class="important">温馨提示</h1> <p>少一串脚印，多一份绿意。</p> </body>
而在使用id选择器时，使用的是关键字id。对于上面类选择器的例子，用id选择器书写：
<body> <h1 id="important">温馨提示</h1> <p>少一串脚印，多一份绿意。</p> </body>
在样式表中，指定对应id名元素的样式，使用#符号，也称为棋盘号或井号。
#important {
color: red;
font-weight: bold;
}
id选择器语法 同理，我们可以看出，id选择器的语法规则如下：
首先，将html中想要应用类样式的元素，指定id名。
<元素名 id="指定的类名"></元素名> <元素名 id="指定的类名">
然后，书写相应类的样式。
#指定的类名 {样式声明}
类选择器与id选择器的区别
它们最大的区别在于，在一个 HTML 文档中，可以为任意多个元素指定类，但id选择器只能使用一次，一个id只能运用于一个元素。一般情况下，都推荐使用类选择器。而在一些特定情况下，我们才会建议使用id选择器。例如，通过id选择器在页面中定义锚，在编写 JavaScript 为指定的页面元素应用特殊行为时。
背景颜色
背景色 我们可以使用background-color为元素设置背景色，通常属性值为颜色名称或颜色编码。因为HTML文档中body元素包含了HTML文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置body元素的background-color属性。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
background-color: lightyellow;
}
h1 {
color: gray;
background-color: palegreen;
}
p {
background-color: lightgray;
}
</style>
</head>
<body>
<div>
<h1>CSS让网页样式更丰富</h1>
<p>这是一个段落</p>
</div>
</body>
</html>
背景图片
背景图片 设置背景图片:我们可以使用background-image属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过url指定图片链接。书写格式：
background-image: url("图片链接")
例如：
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
/*设置背景图片*/
background-image: url("./Assert/memphis-colorful.png")
}
div {
width:90%;
height: 100%;
margin: auto;
background-color: #FCFDF8;
}
</style>
</head>
本例设置了body背景图像。
平铺背景图像 指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置background-repeat属性。具体属性值设置如下：
| 样式 | 属性值 |
|---|---|
| 水平平铺重复 | repeat-x |
| 垂直平铺重复 | repeat-y |
| 不重复平铺 | no-repeat |
例如：
<!--默认平铺-->
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
}
repeat-x
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-x;
}
repeat-y
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-y;
}
no-repeat
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: no-repeat;
}
背景定位与背景关联
背景定位 当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用background-position属性改变图像在背景中的位置:举例如下：
body {
/*设置背景图片*/
background-image: url("https://www.educoder.net/attachments/download/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09");
background-repeat: no-repeat;
background-position: right top;
}
本例中，设置right top代表放置在元素内边距区的右上角。
对于具体位置，大家可以使用如下关键字的组合：
| 属性值 |
|---|
| top left |
| top center |
| top right |
| center left |
| center center |
| center right |
| bottom left |
| bottom center |
| bottom right |
如果值定义了一个关键词，那么第二个值将是"center"。当然也可以使用百分比和长度值，现在只作为了解。
背景关联 当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性，将其值设置为fixed。
body {
background-image: url("https://data.educoder.net/api/attachments/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09");
background-repeat: no-repeat;
background-attachment: fixed;
}
简写背景 从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。
例如：
body {
background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}
使用简写属性时，属性值的顺序为：
background-color；<!--设置背景色-->
background-image；<!--设置背图-->
background-repeat；<!--设置背图模式-->
background-attachment；<!--设置背景图定位-->
background-position。<!--设置背景关联-->
以上属性无需全部使用，大家可以按照页面设置使用。
表格边框
下面是HTML 页面表格代码：
<body> <table width="400"> <!-- 表标题 --> <caption>通讯录</caption> <!-- 表头 --> <tr> <th scope="col">姓名</th> <th scope="col">电话</th> <th scope="col">备注</th> </tr> <tr> <td>李雯</td> <td>18012311234</td> <td>家人</td> </tr> <tr> <td>王谦</td> <td>17812311234</td> <td>同事</td> </tr> <tr> <td>周佳</td> <td>17413511234</td> <td>高中同学</td> </tr> </table> </body>
表格边框 我们使用 border 属性为表格添加边框，这样HTML表格才会看起来更符合我们平时使用的表格。border属性值可以按顺序设置的属性为：border-width、border-style和border-color。一般情况下会省略属性名，直接设置属性值。
其中，border-style可以取如下四种值：dotted: 点状；solid: 实线；double: 双线；dashed: 虚线。
例如，对上面的通讯录表格应用如下样式：
th,
td {
border: 1px solid #000; /*设置边框1px粗的黑色实线*/
}
折叠边框 但是，这样设置的通讯录表格有双边框。这是因为表格与th/td元素都有独立的边界。所以，我们可以使用 border-collapse 属性设置折叠边框。折叠边框代表边框是否被折叠为一个单一的边框或相互隔开。
同样的，对上面的通讯录表格应用如下样式：
table {
border-collapse: collapse; /*设置折叠边框*/
}
th,
td {
padding: .5em .75em;
border: 1px solid black; /*设置边框1px粗的黑色实线*/
}
表格颜色、文字与大小
表格颜色 表格颜色设置十分简便，与设置文字颜色的方式相同。在对应的表格元素标签中，使用color属性设置表格中的文字颜色，使用background属性可以设置表格元素的背景色。
例如，对于如下含表格的HTML页面：
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>HTML – 简单表格</title> </head> <body> <table width="400"> <caption>运动会跑步成绩</caption> <thead> <!-- 表格头部 --> <tr> <th scope="col">长度</th> <th scope="col">李雯</th> <th scope="col">王谦</th> <th scope="col">周佳</th> </tr> </thead> <tbody> <!-- 表格主体 --> <tr> <th scope="row">100米</th> <td>14s</td> <td>16s</td> <td>13s</td> </tr> <tr> <th scope="row">200米</th> <td>26s</td> <td>23s</td> <td>25s</td> </tr> <tr> <th scope="row">400米</th> <td>70s</td> <td>73s</td> <td>69s</td> </tr> </tbody> <tfoot> <!-- 表格尾部 --> <tr> <th scope="row">总用时</th> <td>110s</td> <td>112s</td> <td>107s</td> </tr> </tfoot> </table> </body> </html>
我们设置其CSS样式如下：
table {
border-collapse: collapse;
}
th,
td {
border: 2px solid black;
}
th
{
background-color:lightblue; /*表格头部背景颜色*/
color:white; /*表格头部字体颜色*/
}
表格文字对齐与文字粗细 表格单元格默认为左对齐。在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用text-align属性。同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用font-weight属性。
例如，对于运动会成绩表格，设置其CSS如下：
table {
border-collapse: collapse;
}
caption {
font-weight: bold; /*表格标题文字加粗*/
}
th,
td {
border: 2px solid black;
}
th {
text-align: center; /*表格头部居中对齐*/
background-color:lightblue; /*表格头部背景颜色*/
color:white; /*表格头部字体颜色*/
}
td {
text-align: right; /*表格主体右对齐*/
}
tfoot {
font-weight: bold; /*表格尾部文字加粗*/
}
表格宽度和高度 在表格元素中使用width和height属性设置表格的宽度与高度。
例如，对于运动会成绩表格，设置其CSS如下：
table {
width: 98%; /*表格整体宽度*/
border-collapse: collapse;
}
caption {
height: 30px;
font-weight: bold; /*表格标题文字加粗*/
}
th,
td {
height: 35px; /*表格高度*/
border: 2px solid black;
}
th {
text-align: center; /*表格头部居中对齐*/
background-color:lightblue; /*表格头部背景颜色*/
color:white; /*表格头部字体颜色*/
}
td {
text-align: center; /*表格主体居中对齐*/
}
tfoot {
font-weight: bold; /*表格尾部文字加粗*/
}
透视盒模型：居中的的盒子页面
盒模型 盒模型(Box Model)，是CSS中重要的基础之一。浏览器在对文档进行布局时，会根据CSS盒模型将所有元素，表示为一个矩形盒子(Box)。换句话说，每个元素都是一个盒子。盒模型描述了元素所占空间的内容。每个盒子有四个边：外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content)。
基础实例 使用如下HTML实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <link rel="stylesheet" href="./CSS/style.css"> </head> <body> <h1>盒模型</h1> <div id="box1">盒子一宽度为200px，内间距为25px，外间距为20px、边框为25px。</div> </body> </html>
其中style.css文件初始内容为：
*{
margin: 0;
padding: 0;
}
#box1 {
background-color: whitesmoke;
}
内容区域 (Content Area) 内容区域包含盒子的内容，显示文本和图像。一般使用width和height指定大小。
例如，指定box元素内容宽度：
#box1 {
background-color: whitesmoke;
width: 200px;
}
内边距(Padding) 内边距(Padding) 是指内容周围的区域，内边距默认是透明的。如果内容区域设置了背景、颜色或者图片，这些样式将同样延伸应用到内边距上。可以使用padding-top, padding-right, padding-bottom, padding-left，分别指定内容区域的上边、右边、下边和左边的内边距。
例如，指定box元素内边距：
#box1 {
background-color: whitesmoke;
width: 200px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
为书写简洁，也可以使用padding简写内边距。内边距简写时指定的顺序为顺时针。如果四个边边距相同，只需要指定一个值。
例如，上面的例子可以简写为：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
}
其中 20px 10px 15px 10px 依据顺时针方向，分别对应为 上、右、下和左内边距。
边框(Border) 边框(Border)是围绕在内边距和内容外的边框。使用border属性指定样式。其指定方式与我们在上一节表格样式中讲解相同，所以在此不再赘述。
例如，指定box元素边框：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
border: 25px dotted yellowgreen;
}
外边距(Margin) 外边距(Margin) 是指边框外的区域，外边距默认也是透明的。
可以使用 margin-top, margin-right, margin-bottom, margin-left分别指定外边距区域的上边、右边、下边和左边的内边距。同样的，属性顺序为顺时针。
例如，指定box元素外边距：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
border: 25px dotted yellowgreen;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
同样的，也可以使用简写属性 margin。同内边距一样，外边距简写时指定的顺序为顺时针。如果四个边边距相同，只需要指定一个值。
例如，上面的例子可以简写为：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
border: 25px dotted yellowgreen;
margin: 20px; /*外边框四个边同时设置为20px*/
}
确定盒模型元素大小
确定元素大小 在 CSS 的默认盒子模型中，当我们指定一个CSS元素的高度与宽度时，只是指定了内容的宽度和高度。一个元素的大小，还包括其外边距、内边距和边框。通过box-sizing 属性可以更改计算元素宽度和高度的默认的 CSS 盒子模型。
box-sizing box-sizing 属性值可以 设置为 content-box 或者 border-box。
/* 关键字 值 */ box-sizing: content-box; box-sizing: border-box;
其分别含义如下：
content-box 如果设置 content-box 的 宽度为 width，高度为 height，元素实际布局占得宽度为 Width，高度为 Height。元素布局的实际大小，需要加上padding和border的大小。
所以，元素布局所占宽度Width计算方法为：
Width = width + padding-left + padding-right + border-left + border-right
元素布局所占高度Height计算方法为:
Height = height + padding-top + padding-bottom + border-top + border-bottom
border-box 如何设置 border-box 的 宽度为 width，高度为 height，元素实际布局占得宽度为 Width，高度为 Height。元素布局的实际大小和 border-box 设置相同。
所以,布局所占宽度 Width计算方法为：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度 Height计算方法为:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
修改bix-sizing中width和height属性，使得box-sizing类的元素内容大小与content-sizing的内容大小相同。
带侧边栏布局：带导航的网页
HTML(HyperText Markup Language) 使用HTML定义页面的结构，包括侧边栏、导航栏和主内容区域。并创建链接（<a>标签）用于导航。HTML页面代码如下：
<!DOCTYPE html> <html> <head> <title>带侧边栏布局：带导航的网页</title> <meta charset="UTF-8"> </head> <body> <!-- 侧边栏 --> <div class="sidebar"> <a href="#">Sidebar Link 1</a> <a href="#">Sidebar Link 2</a> <a href="#">Sidebar Link 3</a> <!-- 根据需要添加更多侧边栏链接 --> </div> <!-- 内容区 --> <div class="content"> <!-- 导航 --> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> <!-- 根据需要添加更多导航链接 --> </nav> <!-- 主要内容 --> <h1>Main Content</h1> <p>This is the main content of the page.</p> </div> </body> </html>
CSS（Cascading Style Sheets）： 使用CSS为页面的不同部分（侧边栏、导航栏、主内容区域）设计样式，包括背景颜色、字体样式、边距等。 使用CSS Flexbox布局实现网页的整体布局，包括侧边栏和主内容区域的定位和排列。 使用CSS Position属性来定位侧边栏和导航栏，使其固定在页面的位置。 CSS具体实现代码如下：
<style>
/* 设置侧边栏样式 */
.sidebar {
width: 250px; /* 侧边栏宽度 */
background-color: #111; /* 侧边栏背景颜色 */
color: #fff; /* 文字颜色 */
padding-top: 20px; /* 顶部内边距 */
}
/* 设置侧边栏链接样式 */
.sidebar a {
padding: 5px 10px; /* 链接的内边距 上下填充是5px 左右填充是 10px */
text-decoration: none; /* 取消下划线 */
color: #ccc; /* 链接文字颜色 */
display: block; /* 将链接转换为块级元素 */
}
/* 导航样式 */
nav {
background-color: #333; /* 导航背景颜色 */
padding: 20px; /* 导航内边距上下左右填充都是20px */
}
/* 导航链接样式 */
nav a {
color: white; /* 导航链接文字颜色 */
padding: 10px 20px; /* 导航链接内边距 */
text-decoration: none; /* 取消下划线 */
}
</style>
相对与绝对布局：悬浮的提示框页面
HTML和CSS基础: HTML：用于创建网页结构和按钮(button)元素。 CSS (<style>)：用于定义页面的样式，包括字体、颜色、内边距、外边距等。 HTML页面结构如下：
<!DOCTYPE html> <!-- 定义HTML5文档类型 --> <html> <head> <title>相对与绝对布局</title> <meta charset="UTF-8"> </head> <body> <div class="container"> <button class="trigger">Hover me for a tooltip</button> <!-- 按钮触发显示tooltip --> <div class="popup">This is a tooltip!</div> <!-- tooltip内容 --> </div> </body> </html>
CSS选择器: 类选择器 (.class)：用于选择具有特定类的HTML元素，并为其应用样式。相邻兄弟选择器 (+)：用于选择紧接在另一个元素后的元素，这里用于在按钮悬停时显示提示框。
<style>
.trigger {
background-color: #3498db; /* 设置背景颜色为蓝色 */
color: #fff; /* 设置文字颜色为白色 */
padding: 10px 20px; /* 设置内边距 */
border: none; /* 移除边框 */
cursor: pointer; /* 设置鼠标指针样式为手型 */
}
.popup {
display: none; /* 默认隐藏弹出框 */
position: absolute; /* 设置绝对定位 */
background-color: #fff; /* 设置背景颜色为白色 */
border: 1px solid #ccc; /* 设置边框 */
padding: 10px; /* 设置内边距 */
width: 200px; /* 设置宽度为200像素 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
z-index: 1; /* 设置堆叠顺序 */
top: 100%; /* 位于触发元素下方 */
left: 50%; /* 位于触发元素水平居中 */
transform: translateX(-50%); /* 水平居中 */
}
.trigger:hover + .popup {
display: block; /* 鼠标悬停时显示弹出框 */
}
</style>
盒子模型: padding：元素内容与边框之间的空间。 border：边框样式，可以设置边框的宽度、样式和颜色。 width：元素的宽度。 box-shadow：创建元素的阴影效果。 定位: position: relative：设置元素相对定位，相对于其正常位置进行定位。 position: absolute：设置元素绝对定位，相对于最近的已定位祖先元素进行定位。 z-index: 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注意：z-index只能用在被定位的元素上。 伪类: :hover：应用于元素，当鼠标悬停在该元素上时应用样式。
瀑布流布局：图片浏览页面
HTML(HyperText Markup Language) 使用HTML中的 <img> 元素来插入图片，通过设置图片的 src 属性指定图片来源，alt 属性提供图片的替代文本，以确保良好的可访问性。HTML页面代码如下：
<!DOCTYPE html> <html> <head> </head> <body> <div class="gallery"> <img src="1.jpeg" alt="Image 1"> <img src="2.jpeg" alt="Image 2"> <img src="3.jpeg" alt="Image 3"> <img src="4.jpeg" alt="Image 4"> <!-- Add more images as needed --> </div> </body> </html>
瀑布流布局： 瀑布流布局是一种动态排列方式，其中每个元素（这里是图片）按照设定的列数依次排列，每列的高度会根据元素的高度动态调整，以实现整齐的展示效果。使用CSS样式属性如 column-count 和 column-gap 来设置瀑布流布局的列数和列间距。具体代码如下所示
<style>
.gallery {
column-count: 2; /*用于设置列数*/
column-gap: 20px; /*用于设置列间距*/
}
.gallery img {
/*将图片的宽度设置为其父元素（.gallery）的100%。
意味着图片将填满其父元素的宽度，这里是瀑布流列的宽度。
这样做可以确保图片在列中铺满宽度，使其适应不同屏幕尺寸或不同列数的布局。*/
width: 100%;
/*设置了图片的底部外边距为20像素。*/
margin-bottom: 20px;
}
</style>
考虑不同屏幕尺寸，使用响应式设计原则确保瀑布流布局能在不同设备上呈现良好的效果，比如通过设置图片宽度为百分比值或者自适应列数。
简单的小动画
创建动画 用 @keyframes来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。
基本的html结构如下：
<p>@keyframes</p>
p{ font-size: 14px}
先用@keyframes创建一个动画，这个动画表示字体会从20px变成40px。代码如下：
@keyframes bigfonts{
from { font-size: 20px;}
to { font-size: 40px;}
}
说明：@keyframes表示创建动画，动画名称是 bigfonts；from表示这个动画的开始，to表示这个动画的结束；动画发生的时间也可以用百分比来表示，0%是动画的开始，100%是动画的结束。from和to相当于0%和100%； 绑定元素 然后将动画bigfonts绑定到p元素上就可以了。代码如下：
p:hover{
animation: bigfonts 2s ease;
}
效果已经实现了。这里说明一下animation的属性值：bigfonts是动画的名称；2s是动画一次完成的时间；ease表示动画的速度曲线，动画以低速开始，然后加快，在结束前变慢。默认也是ease。
CSS3动画延迟和完成后状态的保持
动画状态 这里以绿色小球的移动来说明小球的状态。小球向右移动是利用定位来改变它的left值来实现的。（transform:translateX();也是可以的）。
基本的结构如下（这里省略了部分样式）：
<div class="greenBall"></div>
.greenBall{
position: absolute;
left: 100px;
top: 100px;
}
运用第一关学到的知识，先创建一个动画名称为greenBall的动画。代码如下：
@keyframes greenBall{
0% { left: 200px; background: yellow;}
100%{ left: 400px; background: red;}
}
然后把这个动画绑定到class="greenBall"元素上就可以了。代码如下：
.greenBall{
animation: greenBall 2s ease-in;
}
这里以颜色来说明其中的几个状态：
-
绿色是小球本身的状态；
-
黄色是小球动画开始时的状态；
-
红色是小球动画结束时的状态；
-
在动画结束后，会回到小球本身的状态；
动画完成时的状态 上面已经实现了绿色小球向右移动的动画， 怎么在绿色小球动画完成时保持这个状态呢？ 这里介绍一个属性：animation-fill-mode。 它规定了动画在播放之前或之后，其动画效果是否可见。其属性值如下：
-
none，不改变默认行为；
-
forwards，动画完成后，保持其在100%设置时的状态；
-
backwards，在延迟的时间内，在动画显示之前，应用其在0%时设置的状态；
-
both，向前和向后模式都被应用；
绿色小球在移动后保持动画完成时的状态，实现代码如下：
.greenBall{
animation: greenBall 2s ease-in forwards;
}
动画延迟 红色小球和绿色小球的动画基本是一样的，调整一下位置就可以了。不同点在于红色小球有 2s的延迟。
这个可以利用属性animation-delay来实现，它定义了动画在何时开始，默认为0。实现代码如下：
.redBall{
animation: redBall 2s ease-in 2s forwards;
}
这里说明一下动画简写的顺序：
-
redBall是动画名称；
-
2s是动画完成的时间；
-
ease-in是动画完成的速度曲线，表示动画从低速开始；
-
2s是动画延迟时间；
-
forwards是动画完成后保持其在100%设置时的状态；
CSS3动画执行次数和逆向播放
动画执行次数 动画从开始到结束（0%到100%）称为一个动画的周期，也就是说，动画执行了一次。
基本的结构如下（这里省略了部分样式）：
<div class="box">
<span>0%</span>
<span>100%</span>
</div>
.box{ width: 0px;}
先创建一个动画名称为progress的动画。代码如下：
@keyframes progress{
0% { width: 0px; }
100%{ width: 300px; }
}
然后把这个动画绑定到class="box"元素上就可以了。代码如下：
.box{
animation: progress 2s ease;
}
可以看出，这里动画只执行了一次。如何让它执行多次呢？这里用到animation-iteration-count属性，它的值有：
-
n， 表示动画播放次数的数值；
-
infinite，表示动画无限次播放；
这里先执行3次，代码如下：
.box{
animation: progress 2s ease 3;
}
动画反向播放 上面进度条从100%到0%时是直接消失的，让它逐渐消失:
-
第一种思路：把从0%到100%，100%到0%看作动画的一个周期。这时总完成时间就会翻倍。实现代码如下：
@keyframes progress{
0% { width: 0px;}
50%{ width: 300px;}
100%{ width: 0px;}
}
.box{
animation: progress 4s ease;
}
因为这里的动画比较简单，这样写没什么问题。但动画效果比较复杂时，需要计算的东西就比较多了，也比较麻烦。
-
第二种思路：利用属性animation-direction，它规定了动画是否在下一周期逆向播放。它的值有：
normal，默认值，表示正常播放； reverse，表示动画反向播放； alternate，动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放； 可以利用animation-direction: alternate; 让动画第二次反向播放。
实现代码如下：
.box{
animation: progress 2s ease 3 alternate;
}
注意：alternate这个值在 动画次数≥2 的时候才有效果。
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)