前端HTML/CSS

网课学习链接：https://www.bilibili.com/video/BV1i7411Z7d8?from=search&seid=8366974428184480871

前言

  • 互联网产品

  • 前端开发

    • 页面、功能开发

  • 岗位

    • CEO：产品意向决策
    • 产品经理：需求分析、产品原型图
    • 后端工程师：数据库设计、业务功能开发
    • UI设计师：UI图（PS）
    • 前端工程师：UI图 => 静态页面、动画效果
    • 测试工程师：测试报告
    • 运维工程师：产品上线、运维、推广
    • 架构师：软件项目总设计师

  • 前端开发需要的技术

    • PS：切图，注意图片大小
    • HTML\HTML5：网页布局
    • CSS\CSS3：页面美化
    • 布局知识：PS+HTML/HTML5+CSS/CSS3
    • Bootstrap：UI框架、开发多个平台使用
    • Javascript：逻辑（难点）
    • jQuery：JS的封装，用JS开发为原生开发、用jQuery简化开发
    • Ajax：基于jQuery的封装、做页部请求（登陆流程）
    • 模块开发、组件化开发框架

学会使用Typora

支持多种导出格式

word、pdf、图片、markdown、Picogo图片自动上传服务

插图片：ctrl+shift+I

第一章 HTML

1.1 认识HTML

1.1.1 HTML概述

HTML：超文本标记语言，一种标识性语言，非编程语言，不能进行逻辑运算。通过标签将网络上的文档格式进行统一，使得分散的网络资源连接为一个逻辑整体。

**超文本**：一种组织信息的方法，通过超级链接将多种媒介关联起来。

**标记**：标签，用<>包裹的具有一定含义的内容，比如：

<?>---</?>

1.1.2 HTML功能

1.展示在线文档，包含标题、文本、表格、列表、图片、视频。

2.超链接检索在线信息

3.为远程服务而设计表单，可用于检索信息、订购产品。

4.文档直接包含电子表格、视频剪辑、声音剪辑以及一些其他的应用。

1.1.3 HTML历次版本（略）

1.1.4 HTML与互联网（略）

1.1.5 动态网页与静态网页

静态网页：HTML代码、内容完成后，页面内容和显示效果就基本不会变化，除非修改网页源代码

动态网页：页面代码虽然没变，但是显示内容可以随着时间、环境或者数据库操作的结果变化而改变。

注意：不要将动态网页理解为页面有动画效果。

​ 反例：网页幻灯片效果、文字滚动效果，如果内容没有变化，那么也是静态网页。

1.1.6 浏览器概念

概念：解释和执行HTML源码的工具。

主流Explore：IE、Chrome、Opera、FireFox、Safari

1.1.7 浏览器内核——引擎装置

浏览器内核组成：渲染引擎+JS引擎

image-20220121215537942

浏览器一般由七个模块组成，User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（js解释器）、UI Backend（UI 后端）、Date Persistence（数据持久化存储）

Trident：IE内核，微软

Gecko：FireFox

WebKit：用于Mac OS

Blink/chromium：Chrome、Opera

1.2 HTML文档结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<!--表示声明的意思，声明下面的文档标签将以html5规范去解析-->
<html lang="en">
<head>
    <meta charset="UTF-8"><!--汉字编码--><!--meta:源，主要用来完成对应设置-->
    <meta name="keywords" content=""><!--设置一个网站的搜索关键词-->
    <title>前端之旅</title><!--    网站的内容描述-->
    <link rel="shortcut icon" href="https://s3.ax1x.com/2021/03/08/6lSgHK.jpg" type="image/jpg">
    <style>
        /*--书写样式*/
    </style>
    <link rel="stylesheet" href="style.css"><!--用来引入外部样式文件-->
</head>
<body>
<!--主体部分，文档区域-->
<p>这是一个段落</p>
</body>
<script>
<!--放脚本代码-->
</script>
</html>

快捷创建模板：

1
！`+`Tab` /`html:5`+`Tab

快捷复制：Ctrl+D/Ctrl+鼠标右键

快捷注释：Ctrl+Shift+//Ctrl+/

1.2.1 基本标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--div：用来布局，没有具体含义-->
    <div>
        abc
        <div>
            def
        </div>
    </div>
    <!--hx:标题，从1级到6级，1大6小，会自动加粗，有默认字号-->
    <h1>
        前端开发
    </h1>
    <h2>
        Java
    </h2>
    <h6>
        大前端开发
    </h6>
    <!--p:表示段落，相当于一个ENTER-->

    <p>在学习英语时所说的国际音标是指应用于英语的国际音标，我们也称它为英语国际英语。48个国际音标表也被称作48个音标表、48个英语音标表</p>
    在学习英语时所说的国际音标是指应用于英语的国际音标，我们也称它为英语国际英语。
    48个国际音标表也被称作48个音标表、48个英语音标表

    <!--br:换行符号，为单标签-->
    <p>在学习英语时所说的国际音标是指应用于英语的国际音标，我们也称它为英语国际英语。
        <br>48个国际音标表也被称作48个音标表、<br/>
        48个英语音标表</p>

    <!--hr:生成一条水平线，起分隔装饰作用,为单标签-->
    <hr/>
    <hr width="80%" align="right" color="red" height="1000px"/>

    <!--设置超文本链接-->
    <a href="https://miketaylorjuly123.cn" title="博客" target="_blank">个人小站</a>
    <!--_blank：浏览器总是在新打开、未命名的窗口载入目标文档-->
    <a href="https://miketaylorjuly123.cn" title="博客" target="_self">个人小站</a>
    <!--_self：浏览器总是在当前窗口载入目标文档-->
    <!--target其他值：_parent/_top-->

    <!--img:图片用来加载外部图像，src属性：用来设置加载图片或图像的路径-->
    <!--alt属性：当图片或图像加载不成功时，将显示其内容，否则将不会显示-->
    <img src="https://s3.ax1x.com/2021/03/08/6lSgHK.jpg" alt="美图" title="爱情" width="40%">

    <!--span：作用与div，都用来布局，不同的是<div>会单独占据一行，而<span>不会-->
    <!--span:用于行列布局-->
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
    <br><br><br><br><br>

    <!--ul/ol列表：前者是无序列表，后者是有序列表，它们的列表内容都用的是li标签-->
    <!--ul>li{li$}*3+tab-->
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <!--快捷键：ctrl+D-->
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>
    
    <!--注释方式：浏览器不会解析注释-->

</body>
</html>

1.2.2 标签属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标题属性</title>
</head>
<body>
    <!--标签属性：
        1.通常由属性名=”属性值“组成
        2.起附加说明信息作用
        3.不是所有属性都有属性，如<br/>
        -->
    <p title="段落" class="content" id="content">这是一个测试段落</p>
</body>
</html>

1.2.3 文本格式化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!--文本格式化标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--文本格式化标签：通过标签美化文本外观-->
    <!--b/strong：都有加粗作用，都是行级标签（不会自动换行）。但strong除此之外还有强调作用。
        注释：主要用于SEO优化时，便于提取关键字-->
    <b>加粗</b>
    <br/>
    <strong>加粗且强调</strong><br/>

    <!--和em：使文字倾斜，为行级标签，em附加强调作用，简单倾斜，使用i标签即可，比如添加图标等-->
    <i>倾斜</i>
    <em>倾斜且强调</em>

    <!--pre：预格式化文本，通常会保留空格和换行符以及宽度，文字字号会较小
        为块级标签，在浏览器中会独占一行-->
    <pre>预格式   化文本
        通常会保留空格   和换行符以及
        宽度
    </pre>
    <!--small/big：分别让文字缩小或放大一号，行级标签（不会占行，不识别宽高）
        big：被淘汰，但未被删除，后期开发尽量不要使用淘汰标签
        浏览器支持的最小字号为12px号，若要显示比12px号还小的文字效果，需要进行处理
        small还可以用来加载图片-->
    <small>
        小号
    </small>
    <p>正常</p>
    <big>
        大号
    </big><br>

    <!--sub/sup：设置文本为下标和上标，用来调整文本正常显示的基线，且文字会自动小一号-->
    <p>X<sub>1</sub> +Y<sub>2</sub>=Z<sub>1</sub></p>
    <p>X<sup>2</sup>+Y<sup>6</sup>=Z<sup>2</sup> </p>

</body>
</html>

1.2.4 HTML单双标记的区别

单标记：由一个标签组成。
比如：

<br/>:换行符

<hr/>：水平线
<img/>：图片标签
<link/>：文本标签

：元信息标签

双标签：由开始标签和结束标签两部分构成，必须成对使用。
例：略

1.2.5 HTML实体字符转义

实体字符 编译后的字符
< 小于号（<）
> 大于号（>）
空格
& 与号（&）
© 版权号（©）
× 乘号（X）
÷ 除号（÷）

1.2.6 HTML块级元素和行内元素及相互转化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--块级元素（相当于执行了display:block操作）：
    1.独占一行
    2.宽高可控，若没有设置其宽度，将默认铺满整行
    3.块级元素内可以包含块级和行级元素
    -->
<!--行级元素（相当于执行了display:inline操作）：
    1.不会独占一行，与相邻行级元素占同一行，直到行占满为止，占满后会自动到下一行
    2.宽高不可控
    3.只能包含行级元素
    -->

    <div>div</div>
    <div style="width: 300px;height: 50px;background: gray">div</div>
    <p>p</p>
    <p style="width: 300px;height: 50px;background: gray">p</p>
    <strong style="width: 300px;height: 50px;background: gray">strong</strong>
    <span style="width: 300px;height: 50px;background: gray">span</span>
    <!--可以发现后两个的宽高没有变化-->

    <!--1.块级标签转化为行级标签（display:inline）-->
    <span style="width: 300px;height: 50px;background: gray;display: inline;">块级标签转行级标签</span>
    <!--使得块级标签宽高失效-->

    <!--2.行级标签转化为块级标签-->
    <span style="width: 300px;height: 50px;background:lightgreen;display:block;">行级标签转块级标签</span>

</body>
</html>

W3C：万维网联盟
W3C标准由由结构、表现、行为三部分组成

嵌套规则：

  • 块级元素可以包含行级元素、但行级元素不能包含块级元素

  • 块级元素不能放在p标签内

    1
    2
    <p><ol><li><li><ol></p> ❌
    <p><div></div></p> ❌

  • 下列特殊块级元素只能包含行级元素，不能包含块级元素。

    特殊元素
    h1
    h2
    h3
    h4
    h5
    h6
    p
    dt

  • 块级元素与块级元素、内嵌元素与内嵌元素并列。

1
<div><h2></h2><span></span><div> ❌

1.2.7 HTML语义化标签

语义化：明白每个标签的用途

使用的好处：

  • 更容易被搜索引擎收录
  • 更容易让屏幕阅读器读出网页内容
  • 能够更好的体现页面的主题
  • 兼容性更好，支持更多的网络设备
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签</title>
</head>
<body>
    <!--点击图片跳转超链接-->
    <!--title属性：当鼠标滑过链接文字时会显示这个属性的文本内容
    可以方便了解链接的内容
    -->
    <a href="https://miketaylorjuly123.cn" title="爱情">
        <img src="https://s3.ax1x.com/2021/03/08/6lSgHK.jpg" alt="图片" width="99%">
    </a>

    <!--q标签：短文本引用-->
    <q>雨过天晴云破处</q>


    <!--address：为网页加入地址信息-->
    <address>
        <p>电话：211212054</p>
        <p>家庭住址：XXXXXXXXX</p>
    </address>

    <!--caption：为表格添加标题和摘要-->
    <table border="1">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>学号</th>
        </tr>
        <tr>
            <th>对我说</th>
            <th>12</th>
            <th>321</th>
        </tr>
    </table>
</body>
</html>

1.2.8 企业官网文件命名规范

项目开发时，文件中项目或目录名中不能出现汉字和空格之类的其他符号，文件和目录名一般以 字母/下划线_开头,其后可以出现字母，下划线。

页面 命名规范
首页 index.html
公司介绍 about.html
新闻列表 news.html
新闻详情页 about.html
产品列表 product.html
产品详情页 pro_details.html
联系我们 contact.html

课程提要

  • HTML标签属性
  • table表格标签
  • form表格标签
  • iframe框架标签

1.2.9 HTML标签通用属性

  • 标签组成：标签名、标签属性、文本内容三部分组成（单标签没有文本内容）
  • 标签属性是对标签的一种描述方式
  • 标签属性分为：通用属性、自有属性、用户自定义属性
  • 通用属性：所有标签都有的属性，包括：
    • id：ip属性，用于给标签取唯一的名称，在一个网页内是唯一的
    • class：用于给标签取类名，用于标签批量操作
    • style：用于设置标签的行列样式
    • title：当鼠标移到该标签上时所显示的提示内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签通用属性</title>
</head>
<body>
    <!--id：取一个标签起一个标识名-->
    <!--具有唯一性-->
    <p id="p1">段落一</p>
    <p id="p2">段落二</p>

    <!--class：给一组标签起一个类名-->
    <div class="box" >div</div>
    <p class="box"></p>

    <!--用来设置当前标签的样式，只能在当前标签内有效,也叫行列样式-->
    <p style="color: red;width: 200px;border :1px solid #00f;">这是一次测试</p>

    <!--title：给当前标签一个提示文本-->
    <p title="测试">title属性测试</p>
    

</body>
</html>

1.2.10 标签自定义属性

通常用于传值或用于图片懒加载等方面。

格式：data-*

1
2
<img data-src="图片名" alt="提示文本"/>
<p data-id="goodsid">---</p>

1.3 table表格

主要用于呈现格式化数据。表格由行、列组成。

  • 表格属性

    • width：设置表格边框，默认单位均为像素。

    • align：设置表格对齐。

    • cellpadding：设置单元格间距，默认单位均为像素。

    • cellspacing：设置像素间隔，默认单位均为像素。

    • border：表格边框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table表格</title>
</head>
<body>
   <!--
   table>tr*3>td{内容$}*3
   -->
   <table border="1" width="400" cellpadding="1" cellspacing="1" align="center">
       <tr>
           <!--th：表头，说明作用，th内容自动加粗居中-->
           <th>属性1</th>
           <th>属性2</th>
           <th>属性3</th>
       </tr>
       <tr>
           <td>内容1</td>
           <td>内容2</td>
           <td>内容3</td>
       </tr>
       <tr>
           <td>内容1</td>
           <td>内容2</td>
           <td>内容3</td>
       </tr>
   </table>


</body>
</html>

1.3.1表格中的跨行跨列

主要用来绘制复杂表格。

rowspan：跨行

colspan：跨列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格中的跨行跨列</title>
</head>
<body>
    <!--table[border=1 width=500 align=center>tr*3>td{内容$}*3-->
    <table border="1" width="500" align="center">
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>

        <!--rowspan-->
    </table><table border="1" width="500" align="center">
        <tr>
            <td rowspan="2" align="center" valign="middle">内容1</td>
            <!--valign：用于垂直对齐调整{top\bottom\middle}-->
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr align="center">
            <!--单行居中-->
            <td>内容1</td>
            <td>内容2</td>
            <!--<td>内容3</td>-->
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
    </table>

    <table border="1" width="500" align="center">
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
    </table>

    <!--colspan-->
    <table border="1" width="500" align="center">
        <tr align="center">
            <td>内容1</td>
            <td colspan="2">内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td colspan="3">内容1</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;内容2</td>
            <td>内容3</td>
        </tr>
    </table>

</body>
</html>

1.3.2绘制一张完整的表格

  • caption：标题
  • thead：表头
  • tbody：表体
  • tfoot：表尾

多处同时输入相同内容快捷键：Alt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完整表格</title>
</head>
<body>
    <!--table[border=1 width=500 align=center]>caption{学生信息表}+thead>tr>th*4-->
    <!--table[border=1 width=500 align=center]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=4])-->
    <table border="1" width="500" align="center">
        <caption>学生信息表</caption>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>家庭住址</th>
            <th>联系电话</th>
        </tr>
        </thead>
        <tbody align="center">
        <tr>
            <td>1</td>
            <td>李都*</td>
            <td>XXXXXX</td>
            <td>？</td>
        </tr>
        <tr>
            <td>2</td>
            <td>mike</td>
            <td>XXXXXXX</td>
            <td>?</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Taylor*</td>
            <td>XXXXX</td>
            <td>?</td>
        </tr>
        </tbody>
        <tfoot align="center">
        <tr>
            <td colspan="4">附注：*为优秀学生</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

1.3.3 form表单标签

form表单标签是所有标签最核心标签之一。用于实现前后端交互的重要组件。

常用属性：

  • name：表单名称
  • action：表单数据提交位置，通常为后台文件名（.jsp/.php/.asp/.aspx/.py或网址等） 如果是#号，表示提交到当前文件下。
  • method：前端提交数据到后端的方法，主要有：get,post，默认为get.

表单元素有：

  • input类

  • textarea类

  • button类

  • select类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
    <form name="StudentInformtion" action="https://miketaylorjuly123.cn" method="get">
        <!--get：明文传输-->
        <input type="submit">
        <input type="text" name="userName" placeholder="请输入您的姓名：">
    </form>

    <!--隐式传输：用于密码传输等-->
    <form name="StudentInformtion" action="https://miketaylorjuly123.cn" method="post">
        <input type="submit">
        <input type="text" name="userName" placeholder="请输入您的姓名：">
    </form>
</body>
</html>

1.3.4 input标签

input标签，根据不同的type属性，可以变化为多种状态输入方式。

主要用来输入、选择或者发出指令。

type值：

  • password：
  • text ：单行文本输入框，可以不写，因为默认text。
  • checkbox：
  • file：
  • button：
    • image：
  • submit：
  • reset：
  • radio:

text常用属性：

  • placeholder：提示文本
  • name：命名，便于传输，区别不同的文本传输
  • minlength：最少输入的字符个数
  • maxlegth：最多输入的字符个数
  • disabled：disabled=”disabled”，默认值disabled，不能选中，不能修改。
  • readonly：readonly=””readonly，默认值readonly，只读。
  • value：默认值
  • pattern：正则匹配

password常用属性：

与text一样

radio（单选钮）常用属性：

  • name：必须要有
  • value:
  • checked：默认选中某个按钮，只能有一个起作用
  • readonly
  • disabled

注释：添加label标签提示按钮作用或备注。

checkbox（复选框）常用属性：

可用于选择0/1/多项。

  • name：必须要有
  • value:
  • checked：默认选中某个按钮，可以多个起作用
  • readonly
  • disabled

file（文件上传按钮）

button（普通按钮）常用属性：

通常用来调用脚本代码。

  • value: 按钮标题
  • disabled

image（图片按钮）：

用法与botton相同。

特殊属性：src，用来加载提示图片，用它替换了value。

有提交功能，与submit按钮一样。

submit（提交按钮）：

用来将表单数据提交到后台。

reset（重置按钮）：

将表单所有组件输入的内容全部清空还原为初始状体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
<!--文本框-->
<form action="#" method="get" name="测试">
    <input type="text"> <br/>
    <input type="text" name="text" placeholder="请输入一个数字" value="100" disabled="disabled"> <br/>
    <input type="text" name="text" placeholder="请输入一个数字" value="100" maxlength="6" minlength="3">
</form>

<!--密码框-->
<form action="#">
    <br/><input type="password"><br/>
</form>

<!--单选按钮-->
<form action="#">
    <input type="radio" name="性别">男
    <input type="radio" name="性别" checked>女
    <!--若要相排斥，name需统一-->
<p></p>
<p></p>
    <input type="radio" name="选择题">A
    <input type="radio" name="选择题">B
    <input type="radio" name="选择题">C
    <input type="radio" name="选择题" checked>D
    <p></p>
    <p></p>
</form>

<!--复选框-->
<form action="#">
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">音乐
    <input type="checkbox" name="hobby">代码
    <input type="checkbox" name="hobby">洗澡
    <input type="reset" value="取消">
</form>

<!--file：文件上传按钮-->
<form action="#">
    <input type="file">
</form>
<br/>
<br/>
<!--button:普通按钮-->
<form action="#">
    <input type="button" value="登录">
</form>
<br/>
<br/>
<!--image（图片按钮）-->
<form action="">
    <input type="image" src="图片/3.bmp" title="刷新">
</form>
<br/>
<br/>

<!--提交按钮-->
<form action="demo.asp">
    <input type="submit">
</form>

<!--重置按钮-->
<form action="">
    <input type="reset" value="取消">

</form>
</body>
</html>

1.3.5 textarea（文本域）标签

也叫多行文本框，主要用来输入大批量的内容，可以输入回车。

常用属性：

  • name
  • id
  • rows/cols：行数/列数
  • placeholder
  • readonly
  • disabled
  • mixlength
  • maxlength
  • required：表示必须输入

1.3.6 select（下拉列表框）标签

默认用于单项选择（节省空间），用option呈现每一个选项。

属性：

  • multiple：选择可以实现多选
  • size：显示最多选项数量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea</title>
</head>
<body>
    <!--textarea-->
    <form action="">
        <textarea name="memo" id="memo" cols="30" rows="10">备注：</textarea>
        
    </form>
    <p></p>
    <p></p>

    <!--select-->
    <form action="">
        <label for="sex">性别：</label>
        <select name="" id="sex">
            <option value="male">男</option>
            <option value="female">女</option>
            <option value="female">d</option>
        </select>
    </form>
    <br/>
    <form action="">
        <label for="course">选课：</label>
        <select name="" id="course" multiple size="1">
            <option value="chinese">语文</option>
            <option value="math">数学</option>
            <option value="computer science">计算机</option>

        </select>
    </form>


</body>
</html>

1.3.7 button标签

普通按钮，具有提交功能。可以单独使用，不写在form元素中，如果写在form内有提交功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>

<body>
    <!--单独使用--> <button id="butok">确认</button>
    <!--调用js代码-->
    <!--在form中使用-->
    <form action="test.html"> <input type="submit" name="info"> <button>提交</button>
        <!--这里的button的功能与input中的submit按钮功能一样，-->
    </form>
</body>

</html>

表单通用属性：name value readonly disabled

1.4 iframe框架标签

<iframe>元素会创建包含另外一个包含一个文档的内联框架，也是镶嵌在一个网页中的另一个网页。相当于网页中嵌套了一个窗口。

iframe框架集：用来将多个网页文件组合成一个文件。

iframe标签属性：

  • src：规定在框架内显示文档的URL/引入外部html文件
  • name：规定框架名称
  • width：iframe设置高度（百分比或者px）
  • height：iframe：设置宽度
  • frameborder：设置框架边框（1/0）
  • scrolling：设置滚动条（yes/no/auto）
  • marginheight：框架离顶部和底部的距离（%/px）
  • marginwidth：框架离左边和右边的距离（%/px）

注意：在实际开发中，尽量减少使用iframe，因为它破坏网站的前进和后退功能，且不利于SEO（抓取关键字）。

1.5 第二次作业

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二次作业</title>
</head>
<body>
    <!--TABLE ONE-->
    <table border="1" style="color: lightskyblue;width:300px;height: 150px;border-color:deepskyblue">
        <tr align="center">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <br/>
    <br/>
    <br/>

    <!--TABLE TWO-->
    <table style="border-color: #87faf8;width:100%" border="1" cellspacing="1" cellpadding="20">
        <tr style="width:100%;height:200px" align="center">
            <td colspan="3"><strong>网站名称</strong></td>
        </tr>
        <tr style="width:100%;height:40px">
            <td>网站标题</td>
            <td colspan="2" align="right">搜索框</td>
        </tr>
        <tr style="width:100%;height:150px">
            <td align="left">左边</td>
            <td align="left">右边</td>
            <td align="left">中间</td>
        </tr>
        <tr style="width:100%;height:150px" align="center">
            <td colspan="3"><strong>网站底部信息</strong></td>
        </tr>
    </table>
    <br/>
    <br/>
    <br/>
    <!--TABLE THREE-->
    <table border="5" style="width:700px;height:400px;border-color: hotpink">
        <caption><strong>完整表格练习题</strong>
            <tr>
                <td rowspan="8" width="150px"><img src="https://smartdl.lenovo.com.cn/frontend/browser/hao.edge/image/af4616c312d.png" width="100px"  alt="练习"></td>
                <td rowspan="4" align="center">11</td>
                <td rowspan="2" align="center">12</td>
                <td align="center">13</td>
            </tr>
            <tr align="center">
                <td>13</td>
            </tr>
            <tr align="center">
                <td rowspan="2">12</td>
                <td>13</td>
            </tr>
            <tr align="center">
                <td>13</td>
            </tr>
            <tr align="center">
                <td rowspan="4">11</td>
                <td rowspan="2">12</td>
                <td>13</td>
            </tr>
            <tr align="center">
                <td>13</td>
            </tr>
            <tr align="center">
                <td rowspan="2">12</td>
                <td>13</td>
            </tr>
            <tr align="center">
                <td>13</td>
            </tr>
        </caption>
    </table>
    <br/>
    <br/>
    <br/>
    <br/>


    <!--表单-->
    <h1>表单信息</h1>
    <form action="" method="get" name="个人信息">
        <label for="1">账号：</label><input type="text" placeholder="请输入账号：" id="1"><br/>
        邮箱：<input type="email" placeholder="请输入邮箱："><br/>
        密码：<input type="password" placeholder="请输入密码：" minlength="6"><br/>
        性别：<input type="radio" name="性别" checked>男
        <input type="radio" name="性别">女 <br/>
        技能：<input type="checkbox" name="技能">html+css
        <input type="checkbox" name="技能">java
        <input type="checkbox" name="技能">php
        <input type="checkbox" name="技能">javascript
        <br/>
        头像：<input type="file"><br/>
        现居地：<select name="" id="省份">
        <option value="四川">四川</option>
        <option value="广东">广东</option>
        <option value="江苏">江苏</option>
        </select>
        <select name="" id="市">
        <option value="四川">成都市</option>
        <option value="广东">广州市</option>
        <option value="江苏">张家港市</option>
        </select>
        <select name="" id="县/区">
        <option value="四川">三台县</option>
        <option value="广东">天河区</option>
        <option value="江苏">保税区</option>
        </select><br/>留言：
        <br/><textarea name="" id="" cols="30" rows="10" placeholder="请输入留言内容"></textarea>
        <br/>
        验证码：<input type="text" placeholder="请输入验证码">
        <input type="image" src="https://smartdl.lenovo.com.cn/frontend/browser/hao.edge/image/af4616c312d.png" width="75px" title="验证码">
        <br/>
        <input type="submit"> <input type="reset">
    </form>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</body>
</html>

第三章 CSS基础

课程提要

  • CSS介绍
  • CSS字体
  • CSS背景
  • CSS伪选择器
  • CSS属性&&关系选择器
  • CSS伪元素

3.1CSS介绍

层叠样式表（CSS），又称串样式列表，由W3C定义维护，一种用来结构化文档（HTML文档或者XML应用）添加样式（字体、间距和颜色等）的计算机语言。

CSS能对网页中元素位置的排版进行像素级精确控制，几乎所有字体字号样式，拥有对网页对象和模型样式编辑的能力。

3.1.1 CSS的使用

使用CSS可以让结构（HTML）与表现（CSS）分离，方便维护。

过去我们写网站都用table来布局，然后样式都直接加在table上面，这样一来页面显得特别臃肿，然后想修改一下也显得十分困难。

后来W3C推出了CSS，把结构和样式分离，HTML只负责结构，样式交给CSS来实现。这样一来，开发者工作量和效率大大提升，页面维护也变得容易，想要修改某个字体或者样式，直接在CSS文件中修改，不需要修改HTML结构。

3.1.2 CSS基本语法

1
2
3
选择器{
		属性:属性值;
}

3.1.3 CSS的四种引用方式

CSS引用方式：内联样式、内部样式、外部样式、导入外部样式。

  • 内联样式（嵌入式样式）：直接在标签上书写样式。

  • 内部样式：在文件内部书写样式。

1
2
3
<style>
	样式内容
</style>

  • 外部样式：先创建一个CSS文件，再用link标签引入文件。

  • 导入外部样式：先创建一个CSS文件，在style标签中使用import导入这个样式文件。

以上四种CSS引用区别：

  • 行间样式只作用于当前标签；而内部样式只作用于当前文件；外部样式可以被多个HTML文件引用。

  • 在实际开发中，最好使用外部样式（link使用更多）。

  • 外部样式分为link引入和import引入两种方式。区别：

    • link是XHTML标签，除了加载CSS以外，还可以定义RSS等其他事物；@import属于CSS范畴，只能加载CSS。
    • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入后加载。
    • link是XHTML标签，无兼容性问题；@import是在CSS2.1提出，低版本浏览器不支持。
    • link支持使用Javascript控制DOM去改变样式；而@import不支持。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的四种引用方式</title>
    <!--引入外部样式文件-->
    <link rel="stylesheet" href="CSS/201.1.css">
    <style type="text/css">
        /*导入外部样式*/
        @import "CSS/201.2.css";
        p{
            background-color: #eeeeee;
            font-size:18px;
            font-style:italic;
        }
    </style>

</head>
<body>
    <!--1.行间样式-->
    <div style="color:olive;width:100px;border:1px solid blue;">行间样式测试1</div>
    <div>行间样式测试1</div>

    <!--2.内部样式表（见head部分）-->
    <p>段落一</p>
    <p>段落二</p>

    <!--3.外部样式-->
    <span>外部样式测试</span>
    <span>外部样式测试</span>
    <span>外部样式测试</span>
    <span>外部样式测试</span>

    <!--3.导入外部样式-->
    <div class="box">导入外部样式</div>
    <div class="box">导入外部样式</div>
    <div class="box">导入外部样式</div>

    <em class="box">你好鸭</em>

</body>
</html>

3.1.4 CSS选择器

1）*：匹配HTML中所有元素

​ 注意：*的性能很差，因为要匹配所有元素，所以开发时不建议使用。

2）标签选择器：用来匹配对应的标签。

3）类选择器：用来匹配class命名的标签元素。

4）ID选择器：用来选择用id命名的标签。

5）派出选择器：根据上下文来确定选择的标签。

6）伪类选择器：后续讲

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        /*!*1.* *!*/
        /**{*/
        /*   color: red;*/
        /*}*/

        /*2.标签选择器*/
        span{
            display: block;
            margin-right: 20px;
            border: 1px solid gray;
        }

        /*3.类选择器*/
        .wrapper{
            color: #87faf8;
        }

        /*4.ID选择器*/
        #content{
            color: pink;
        }

        /*5.派出选择器*/
        .box2 li{
            color: blue;
        }
    </style>
</head>
<body>
    <!--1.*-->
    <p>这是P标签</p>
    <strong>这是strong标签</strong>

    <!--2.标签选择器-->
    <span>这是span标签</span>
    <div>这是div标签</div>

    <div class="wrapper">这是div标签</div>

    <p id="content">这是一个段落</p>

    <ul class="box1">
        <li>bilibili1</li>
        <li>bilibili2</li>
        <li>bilibili3</li>
        <li>bilibili4</li>
    </ul>
    <ul class="box2">
        <li>bilibili1</li>
        <li>bilibili2</li>
        <li>bilibili3</li>
            <ul>
                <li>haha1</li>
                <li>haha2</li>
                <li>haha3</li>
            </ul>
    </ul>

</body>
</html>

3.1.5 选择器分组

对多个选择器进行分组，这样， 被分组的选择器就可以共享相同的声明。用逗号将需要的分组选择器分开。一般用于设置公共样式。

3.1.6 选择器继承

子元素可以继承元素的样式，反之不可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器分组和样式继承</title>
    <style type="text/css">
        /*分组操作*/
        h1,.box,p{
            color: red;
        }
        p{
            width:100px;
            background-color: #999999;
            color:blue;
        }
        /*样式继承*/
        .test{
            font-size: 18px;
        }
        .test span{
            font-weight: bold;
            font-size: 28px;/*改写父元素传入的样式*/
        }

    </style>
</head>
<body>
    <h1>h1</h1>
    <div class="box"> box内容</div>
    <p>p</p>

    <div class="test">这是一段测试<span>内容</span>。</div>
</body>
</html>

3.1.7 优先级

样式权重：

!important(10000)>内联样式（1000）>ID选择器（100）>类、伪类选择器（10）>标签选择器（1）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式权重</title>
    <style type="text/css">
        p{
            color:blue/*!important*/;
        }

        #content div.main_content h2{/*权重：100+1+10+1*/
            color: red;
        }
        #content .main_content h2{/*权重：100+1+10*/
            color:blue;
        }
    </style>
</head>
<body>
    <p style="color:red;">这是内容1</p>
    <p>这是内容2</p>
    <!--内联样式权重大于标签选择器-->

    <div id="content">
        <div class="main_content">
            52
            <h2>
              这是一个标题
            </h2>
        </div>
    </div>
</body>
</html>

3.2 CSS字体

  • font-size：字号

    • 属性值
      • {number+px}：固定尺寸像素
      • {number+%}：其百分比取值是基于父对象的尺寸大小

  • font-family：字体

    • 属性值
      • name：字体名称，按优先顺序排列，以逗号隔开。若字体名称包含空格，则应该使用引号括起来。

  • font-style：样式

    • 属性值
      • normal：默认值。正常字体。
      • italic：斜体，对于没有斜体变量的特殊字体，将应用oblique。
      • oblique：倾斜的字体。

  • font-weight：加粗

    • 属性值
      • normal：默认值，正常字体。
      • bold：加粗。
      • bolder：比bold更粗。
      • lighter：比normal细。
      • {100-900}：定义粗到细的字符。400=normal，700=bold。

  • line-height：行高，字体底端与字体内部顶端之间的距离。

    • 属性值
      • normal：默认行高，默认值。
      • {normal+px}：指定行高为长度像素。
      • {number}：指定行高为字体大小的倍数。

  • color：文字颜色

    • 属性值
      • name：颜色名称指定color。
      • rgb：指定颜色为RGB。（0-255，三个分量）
      • {颜色十六进制}：指定颜色为16进制。（#开头，后跟六位（#rrggbb）或者三位（#rgb）

  • text-decoration：文字修饰

    • 属性值
      • normal：默认值，无修饰。
      • underline：下划线。
        • line-through：贯穿线。
      • overline：上划线。

  • text-align：文本对齐方式

    • 属性值
      • left：默认值，左对齐。
      • center：居中对齐。
      • right：右对齐。

  • text-transform：字母大小写

    • none：默认值。
    • capitalize：将单词第一个字母转换成大写。
    • uppercase：所有文字转换成大写。
    • lowercase：所有文字转换成小写。

  • text-indent：文本缩进

    • 属性值
      • {number+px}：首行缩进number像素。
      • {number+em}：首行缩进number个字符。

  • font复合属性：

    1
    font:font-style font-variant font-weight font-size/line-height font-family;

    1）注意属性值的位置顺序。

    2）除了font-size和font-family，其他任何一个属性值都可以省略。

    3）font-variant：文本修饰，normal/small-caps（让大写字母变得小一些）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS字体属性</title>
    <style>
        p{
            font-size: 28px;
            font-family: 微软雅黑, 宋体, 黑体;
            /*font-style: italic;*/
            font-weight: 300;
            line-height: 2;
            color: #808011;
            text-align: center;
            text-transform: capitalize;
            text-indent: 2em;
        }
        p span{
            font-weight: 900;
            /*color: #87faf8;*/
            color: rgb(122,135,255);
            text-decoration: underline;
            /*text-decoration: line-through;*/
        }
        strong {
            font: italic small-caps bolder 8px/2 微软雅黑;
        }
    </style>
</head>
<body>
    <p>中国沙尘暴主要发生在春季的3月～5月。
        中国工程院院士、中国气象科学研究院研究员张小曳向
        <span>《中国新闻周刊》</span>介绍，这次沙尘暴的起源，
        主要是在蒙古国戈壁沙漠的中部和南部，以及内蒙古的中部和西部沙漠。
        此次沙尘暴基本上朝东移动，未来主要影响的是长江以北地区，
        包括辽宁、河北、河南、山东，以及江苏部分地区，
        3月16日，沙尘暴将影响到上海。今日傍晚，此次沙尘暴对北京的影响将会结束。
    </p>
    <p>text-decoration: line-through</p>
    <strong>辽宁、河北、河南、山东 hello</strong>
</body>
</html>

3.3 CSS背景

1）background-color：背景色（transparent/一种颜色）

2）background-image：背景图

  • none
  • url{url}(使用绝对或者相对url指定背景图片)

3）background-repeat:设置对象的背景图铺排方式

  • repeat：默认值（背景图像在纵向和横向平铺）
  • no-repeat：背景图像不平铺
  • repeat-x：背景图像仅在横向平铺
  • repeat-y：背景图像仅在纵向平铺

4）background-position：背景图像位置

  • {x-number|top|center|bottom} {y-number|left|right|center}

5）background-attachment：设置背景图像滚动的位置

  • scroll：默认值，背景图像会随着页面其余部分的滚动而滚动。
  • fixed：当页面的其余部分滚动时，背景图像不会移动。

6）background复合属性：设置背景的复合写法

顺序：背景色 图片url 是否平铺 是否固定滚动条 百分比 位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景</title>
    <style>
        /*body{*/
        /*    !*background-color: rgb(125,125,255);*!*/
        /*    background-image: url(https://s3.ax1x.com/2021/03/15/6Dxmyn.gif);*/
        /*    background-repeat: no-repeat;*/
        /*    background-position: top; !*如果只带一个参数，默认y方向为50%*!*/
        /*    background-attachment: fixed;!*scroll*!*/
        /*    height: 2000px;*/
        /*}*/
        body{
            background: #888888 url(https://s3.ax1x.com/2021/03/15/6Dxmyn.gif) repeat-y scroll 100px 200px;
        }
    </style>
</head>
<body>

</body>
</html>

3.4 CSS伪类选择器

伪类：专门用来表示元素的一种特殊状态。

常用的伪类选择器：

  • a标签的伪类：

    • a:visited：已被访问状态
    • a:link：未访问状态
    • a:hover：鼠标悬停状态
    • a:active：用户激活

  • 表单（:foucs）：表单获得焦点时的触发样式

  • first-child：（:first-child/:last-child/nth-child(num)伪类来选择元素的第一个/最后/中间某个子元素）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS伪类选择器</title>
    <style>
        a:link{
            /*link可以不写*/
            color: red;
        }
        a:visited{
            color:green;
        }
        a:hover{
            color: #8080ff;
        }
        a:active{
            color:deepskyblue;
        }
        input:focus{
            outline: 1px solid red;
        }
        ul li:first-child{
            color: yellow;
        }
        ul li:nth-child(3){
            color: #8080ff;
        }
        ul li:last-child{
            color:pink;
        }
    </style>
</head>
<body>
    <!---->
    <a href="#">单机我跳转</a>

    <input type="text">

    <ul>
        <li>num1</li>
        <li>num2</li>
        <li>num3</li>
        <li>num4</li>
    </ul>
</body>
</html>

3.5 属性和关系选择器

3.5.1 属性选择器

  • [属性名]：包含有指定属性名的元素
  • [属性名=值]：属性名的值为指定值的元素
  • [属性名~=值]：属性名的值包含指定值得到元素
  • [属性名^=值]：属性名的值以指定值开头的元素
  • [属性名$=值]：属性名的值以指定值结尾的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<style>
    div.content[title]{
        font-weight: bolder;
    }
    input[name="usr"]{
        background-color: #8080ff;
    }
    div[class^=box4]{
        background-color: #809999;
    }
    div[class~=box1]{
        background-color: #808000;
    }
    div[class$=box6]{
        background-color: #ff8070;
    }
</style>
<body>
<div class="content box1 box2" title="内容">content1</div>
<div class="box4 box2">content2</div>
<div class="content box3 box6">content3</div>

<form action="">
    <input type="text" name="usr">
    <input type="text" name="account">
</form>
</body>
</html>

3.5.2 关系选择器

1）空格：后代选择器

2）>：只选择儿子元素

3）+：兄弟选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /*!*后代选择器*!*/
        /*h1 strong{*/
        /*    background-color: #000;*/
        /*    color:#fff;*/
        /*}*/
        /*儿子选择器*/
        h1>strong{
            background-color: #000;
            color:#fff;
        }
        /*兄弟选择器*/

        ul li+li+li{
            color: #8080ff;
        }
    </style>
</head>
<body>

<h1><strong>关系一</strong><span><strong>关系二</strong></span></h1>

<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
</ul>
<!--
!!!!!
注意：从最后一个指出的兄弟开始生效，到第一个不同的兄弟终止。
-->
</body>
</html>

3.5.3 CSS伪元素

CSS引入伪类和伪元素概念为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

1）二者区别：

  • 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。他只有处于dom树无法描述的状态下才能为元素添加样式，所以称之为伪类。

  • 伪元素用于创建一些不在文档树中的元素，并为其添加样式，这个状态是根据用户行为而动态变化的。比如，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

2）伪类&伪元素的特点：

  • 伪元素和伪类都不会出现在源文档或者文档树中，鼠标无法选中。
  • 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面。
  • 伪元素名和伪类名都是大小写不敏感的。
  • 有一些伪类的互斥的，而其他的可以同时用在同一元素上（在规则冲突的情况下，常规层叠顺序决定结果）。

3）:before/:after/:first-letter/:first-line：前面可以是1个冒号，也可以是2个冒号。

4）::selection/::placeholder/::backdrop：前面只能是双冒号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS伪元素</title>
    <style>
        p:first-letter{
            font: 30px 宋体;
            color: #8080ff;
        }
        p:first-line{
            text-decoration: underline blue;
        }
        p:before{
            content: '☯';
        }
        p:after{
            content: '……';
        }

    </style>
</head>
<body>
        <p>与八代产品线相比（如 8750H），我们发现 9750H 与 9850H 之间的差距已经变得更小，
            这或许也是它被大多数游戏笔记本所采纳的原因。
            或许是感受到了大家对于“挤牙膏”的怨念，英特尔决定至少专门推出一款有实质性提升的 9 代笔记本标压处理器。
            现在看来，9750H 也是唯一获得了 10~20% 频率提升的芯片。
        </p>
</body>
</html>

第二次作业

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
h1{
    text-align: center;
    font-family: 宋体,微软雅黑;
    margin: 10px 0 20px;/*上边距20，左右边距0，下边距10*/
    font-size: 30px;
    font-weight: normal;
}
body{
    background-image: url("https://s3.ax1x.com/2021/03/16/6s31gg.png");
    background-repeat: repeat-y;
    background-position: 0 0;
    background-attachment: scroll;
    padding: 10px 0;
}
#author{
    text-align: center;
    font-weight: bolder;
}
a{
    text-decoration: none;
}
#my_site:link{
    color: #8080ff;
}
#my_site:visited{
    color: rgb(225, 230, 200);
}
#my_site:hover{
    color: #87faf8;
}
#my_site:active{
    color: rgb(255, 255, 0);
}
.content{
    color: orchid;
    text-align: left;
    text-indent: 2em;
    font-size: 30px;
    margin: 1.5em 0;
    line-height: 1.5em;
}
h1+p+p{
    font-size: 5px;
    border-top: 1px solid #010101;
    border-bottom: 1px solid #010101;
    padding: 30px 0;
    text-indent: 0;
    color: dodgerblue;
}
.main{
    border: 1px solid #87faf8;
    padding: 20px;
    margin: 0 auto;
    width: 800px;
}
.summary{
    color: red;
}
ul{
    color: gray;
    list-style-type: none;/*取消列表前的point*/
    text-indent: 2em;
    line-height: 2em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三次作业</title>
    <link rel="shortcut icon" href="https://s3.ax1x.com/2021/03/16/6s31gg.png">
    <link rel="stylesheet" href="./CSS/第三次作业.css">
</head>
<body>
<div class="main">
    <h1>3·15晚会已播30年 那些曾被点名的企业过得如何？</h1>
    <p id="author"><a id="my_site" href="https://miketaylorjuly123.cn" title="作者" target="_blank">张加林</a></p>
    <p id="abstract"><span class="summary">摘要</span>：奇奇怪怪，古古怪怪，嘻嘻哈哈，吞吞吐吐</p>
    <p class="content">盘点近10年来3·15晚会的“上榜”企业名单，作为一场维护普通消费者权益的公益晚会，3·15晚会所关注的领域，很多都与“衣食住行”相关。
        从数量来看，“衣食住行“这四个方面的企业和问题几乎就占据了3·15晚会“名单”的半壁江山。
        辣条生产乱象、山寨“六个核桃”、“化妆”鸡蛋等食品相关问题；H&M、ZARA、ARMANI等服装品牌抽检不合格；方太、美的、西门子等家用电器售后服务的“套路”……
        作为中国最大的毛巾生产基地，河北省高阳县的一些厂家生产的毛巾无法保证检测合格
        在我国主要海参养殖区域之一山东即墨，养殖户为了清除不利于海参生长的其他生物，往池塘里加入了不少敌敌畏；此外，快餐企业汉堡王也被爆出售食品中包含过期食材
        在广州市黄埔开发区，万科旗下的“精装修”房万科尚城被称为“惊装修”：存在卫生间、插座漏水的状况，甚至渗透出来的是排粪水
        上汽通用五菱旗下的“神车”宝骏560，被爆出变速箱故障：在高速路上会突然失去动力，维修后仍故障不断，更换变速箱后一个月内挂倒挡动力又失效</p>
    <ul>
        <li><a href="#">你可能感兴趣相关内容1</a></li>
        <li><a href="#">你可能感兴趣相关内容2</a></li>
        <li><a href="#">你可能感兴趣相关内容3</a></li>
        <li><a href="#">你可能感兴趣相关内容4</a></li>
    </ul>
</div>
</body>
</html>

开发思路：整体到局部，自上而下

选中标签中的所有内容快捷键：ctrl+Alt+T

section(区块标签)

display:block

导读标题到页内具体位置的操作

1
2
3
4
<a href="#title1"></a> <!--导读标题-->
<!--href表示锚点，实现页内跳转-->
<a name="title1"></a> <!--跳转处-->
<!--这里的a标签是一个锚点-->

第四章 CSS浮动布局&盒模型

课程提要

  • CSS 浮动介绍
  • CSS清除浮动
  • CSS盒子模型
  • CSS table样式
  • CSS 列表居中

4.1 CSS浮动介绍

4.1.1 简介

图像、文字都可以浮动，浮动元素会生成一个块级框。

值 效果描述
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不会浮动，并会显示在出现的位置
inherit 按规定应该从父元素继承float属性的值

浮动后不会占用文档

浮动：让块级标签不独占一行，目的是把块级标签排在一行上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动</title>
    <style>
        .wrapper{
            width: 600px;
            margin: 0 auto;
            border: 1px solid black;
        }
        .box1,.box2{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: red;
            float: right;
        }
        .box2{
            background-color: blue;
            float:left;
        }
    </style>
</head>
<body>
    <div class="wrapper">
    <div class="box1">box1</div>
    <!--这里的div是块级标签，会独占一行-->
    <div class="box2">box2</div>
    </div>
</body>
</html>

ne’xt复习

4.1.2 浮动原理

就是让元素脱离文档流，不占用标准流。

4.2 CSS清除浮动

问题：浮动后，后面的元素不管是块级元素还是行级元素，都不会显示在下一行。

清除浮动的目的：让后面元素自动掉到下一行。

方法：

  • 添加空标签，并设置样式：clear:both;

    • clear:left：清除左浮动
    • clear:right 清除右浮动
    • clear:none 清除左右浮动
    • clear:both 左右浮动都不清除

  • 在要清除浮动的父级添加样式：主要用于子元素的尺寸超过父元素时，需要预设父元素显示溢出的子元素的方式，可在浮动元素的父级添加 overflow:hidden;

    • overflow:visible：默认值，内容不会被剪裁，会呈现在元素框之外，不剪切也不加滚动条。
    • overflow:auto：不显示超出部分内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动。
    • overflow:hidden：内容会被修剪，并且其余内容不可见，此属性还有清除浮动，清除margin-top塌陷的功能。
    • overflow:scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。

  • 使用伪元素after：为了减少空标签的多余，可以采用父级的伪元素进行样式浮动清除。

    • 父元素:after{
    content:"";
    display:block;
    clear:both;
}

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71

        **注意：实际开发中首选第二种方案**

      ```html
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>CSS浮动</title>
          <style>
              .wrapper{
                  width: 600px;
                  margin: 0 auto;
                  border: 1px solid black;
                  /*overflow: hidden;*/
              }
              .wrapper:after{
                  content:"";
                  display:block;
                  clear:both;
              }
              .box1,.box2,.box3{
                  width: 200px;
                  height: 150px;
              }
              .box1{
                  background-color: red;
                  float: right;
              }
              .box2{
                  background-color: blue;
                  float:left;
              }
              .box3{
                  background-color: #87faf8 ;
              }
              .clear{
                  clear:both;
              }
          </style>
      </head>
      <body>
      <!--方法一-->
      <!--    <div class="wrapper">-->
      <!--    <div class="box1">box1</div>&lt;!&ndash;这里的div是块级标签，会独占一行&ndash;&gt;-->
      <!--    <div class="box2">box2</div>-->
      <!--&lt;!&ndash;    <div class="clear"></div>&lt;!&ndash;清除浮动方法一&ndash;&gt;&ndash;&gt;-->
      <!--    <div class="box3">box3</div>-->
      <!--    </div>-->

      <!--&lt;!&ndash;方法二&ndash;&gt;-->
      <!--    <div class="wrapper">-->
      <!--    <div class="box1">box1</div>&lt;!&ndash;这里的div是块级标签，会独占一行&ndash;&gt;-->
      <!--    <div class="box2">box2</div>-->
      <!--    </div>-->

      <!--    <div>-->
      <!--    <div class="box3">box3</div>-->
      <!--    </div> -->
      <!--方法三-->
          <div class="wrapper">
          <div class="box1">box1</div><!--这里的div是块级标签，会独占一行-->
          <div class="box2">box2</div>
          </div>

          <div>
          <div class="box3">box3</div>
          </div>
      </body>
      </html>
      Copy

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例：浮动布局</title>
    <style>
        .info-show{
            width: 600px;
            padding: 20px;
            border: 1px solid #cccccc;
            margin:0 auto;
            overflow: hidden;
        }
        .head-sculpture{
            float:left;
            text-align: center;
        }
        .description{
            float: left;
            width:370px;
            height: 300px;
            margin-left: 20px;
            border: 1px solid #ccc;
            padding:10px 0 0 0;/*上右下左*/
            text-align: center;
        }
        .photo{
            width:200px;
            height: 300px;
            border: 1px solid #ccc;
            /*设置垂直居中样式*/
            display: table-cell;/*步骤一*/
            vertical-align: middle;
            background-color: #eee;
        }
    </style>
</head>
<body>
<div class="info-show">
    <div class="head-sculpture">
        <div class="photo">头像</div>
        <div class="name">姓名</div>
    </div>
    <div class="description">自我描述</div>
</div>
</body>
</html>

4.3 盒子模型

每个元素都是一个盒子，一个盒子由外边距margin、边框线border、内边距padding、内容content组成。

区别外边距和内边距是以边框为参照。

系统默认外距为8px*

4.3.1 外边距

  • 外边距（margin）：指元素边框线之外的距离
    • margin-left：左边距
    • margin-right：右边距
    • margin-top：上边距
    • margin-bottom：下边距
    • margin可用来设置任意一个边的边距，可以带1~4个参数
      • 一个参数(apx)：表示上下左右都具有这样一个外边距
      • 两个参数(apx,bpx)：上下外边距为apx，左右边距为bpx
      • 三个参数(apx,bpx,cpx):上外边距apx，下外边距cpx，左右边距为bpx
      • 四个参数(apx,bpx,cpx,dpx):顺序为上apx右bpx下cpx左dpx

4.3.2 内边距

  • 内边距(padding)：指的是元素文本内容与边框之间的距离。它的用法与margin完全一致。
    • padding-left：左边距
    • padding-right：右边距
    • padding-top：上边距
    • padding-bottom：下边距
    • padding可用来设置任意一个边的边距，可以带1~4个参数
      • 一个参数(apx)：表示上下左右都具有这样一个外边距
      • 两个参数(apx,bpx)：上下外边距为apx，左右边距为bpx
      • 三个参数(apx,bpx,cpx):上外边距apx，下外边距cpx，左右边距为bpx
      • 四个参数(apx,bpx,cpx,dpx):顺序为上apx右bpx下cpx左dpx

4.3.3 边框

  • 边框：就是围绕元素内容和内边距的一条或多条线，设置边距的最简单方法就是使用

    1
    border

    属性，允许规定元素边框的样式、宽度和颜色。

    • none：默认值，无边框
    • solid：定义实线边框
    • double：定义双实线边框
    • dotted：定义点状边框
    • dashed：定义虚线边框
    • border-color：定义边框颜色
    • 简写border: width style color，它们没有位置之分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
        div{
            width:800px;
            height: 400px;
            border: 1px solid red;
            /*margin: 200px;*/
            /*overflow: scroll;*/
        }
        .span{
            /*display: block;*/
            /*将span标签转换为块级标签*/
            width:300px;
            height:300px;
            /*margin:10px 20px 30px 40px;*/
            display: inline-block;
            margin-right: 20px;
            padding: 10px 20px 30px 40px;
            border: 1px dashed black;
        }
        .content{
            height:200px;
            width: 100px;
            background-color: #216454;
            display: inline-block;
        }
        .txt{
            width:100px;
            height:100px;
            background-color: #808000;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="span">
            <p class="txt"></p>
        </div>
        <div class="content"></div>
    </div>

</body>
</html>

4.3.4 盒子真实尺寸

盒子宽度=width+padding左右+border左右

盒子高度=height+padding上下+border上下

4.3.5 display属性

用来设置元素显示方式。

常用属性值：

  • none：不显示元素，动态应用。
  • block：块显示，在元素前后设置换行符，目的：将行级元素转换为块级标签（因为行级标签不识别宽高，而块级标签识别宽高），转换后，行级标签也可以设置宽高
  • inline：行内显示，将块级标签转换为行级，同时删除换行符。与浮动区别在于不脱离文档流。
  • inline-block：将块级标签或行级标签转换为行内块级标签。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: green;
            display: inline-block;
            /*注意：display:inline会导致不显示*/
            /*原因：行级标签不识别宽高，要有内容才会显示,高度恒定，width自适应*/
        }
        div:first-child{
            background-color: yellow;
            margin-right: -5px;
        }
        span{
            width: 200px;
            height: 100px;
            background-color: blue;
            display: inline-block;
            margin-left: -5px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span</span>
</body>
</html>

4.3.6 table样式

table一般不用布局，主要用来格式化数据。

table属性：

  • width：宽度
  • height：高度
  • border-collapse：单线边框
  • border：添加边框线

td\tr\th属性：

  • width：宽度
  • height：高度
  • border：添加边框线
  • text-align：文本左右对齐方式（left\right\center）
  • vertical-align：文本垂直对齐方式（top/middle（默认值）/bottom）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table样式</title>
    <style>
        table,td,th{
            border: 1px dashed red;
            /*vertical-align: top;*/
            vertical-align: middle;
            /*设置在行上也是没有问题的*/
        }
        table{
            border-collapse: collapse;/*生成单线边框*/
            margin:0 auto;/*页面实现居中*/
            width: 500px;
            height: 300px;
            text-align: center;/*表格数据居中*/
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
        <th>标题4</th>
    </tr>
    <tr>
        <td>具体内容1</td>
        <td>具体内容2</td>
        <td>具体内容3</td>
        <td>具体内容4</td>
    </tr>
    <tr>
        <td>具体内容1</td>
        <td>具体内容2</td>
        <td>具体内容3</td>
        <td>具体内容4</td>
    </tr>
</table>
</body>
</html>

4.5 CSS列表水平居中

不是描述性的文本的任何内容都可以是列表。比如：菜单、商品列表等。

  • 列表类型：无序(ul)、有序(ol)、用户自定义列表(dl)

    • ul和ol的列表项都是用li表示的，而dl是由一个dt和多个dd组成的。dl一般用来设定一个定义，比如名词解释等。dt：标题，dd：描述，用来对dt的内容进行解释并说明的。

  • 样式（用来修改标识类型）

    • list-style-image:用图像表示标识。
    • list-style-position:标识的位置（inside/outside默认值）
    • list-style-type:表示类型
    • 简写:list-style:list-style-image list_style-position list-style-type顺序可以随意或者单个省略，只要提供一个值，其他会自动默认

  • list-style-type的属性值：

    有序 decimal(默认) decimal-leading-zero lower-roman upper-romanlower-alpha upper-alpha lower-greek lower-latin upper-latin

    无序 disc(默认) square circle

    共有 none()，用于去除表示符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表样式</title>
        <style>
            ul{
                /*list-style-type: disc;!*默认disc*!*/
                list-style-type:circle;
                list-style-position: inside;/*由outside/和inside两种，outside不会占用文本空间，而inside会*/
                /*list-style-image: url("三国杀.bmp");!**!*/
            }
            ol{
                list-style-type: lower-greek;
            }
            dt{
                font-size: 28px;
                font-weight: bold;
            }
            dd{
                margin-left: 1px;
            }
        </style>
    </head>
    <body>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ol>
    <dl>
        <dt>张加林大笨蛋</dt>
        <dd>我是傻逼</dd>
        <dd>我是废物</dd>
        <dd>我是小丑</dd>
    </dl>
    </body>
    </html>

    4.6 轮播图

作用：主要用于产品展示或者公司相关宣传
组成：

  • 轮播的组图（至少两张以上，不能太多）
  • 控制器
  • 计数器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/*轮播图*/
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none ;
}
a{
    text-decoration: none;
}
.carousel{
    height:412px;
    width: 581px;
    margin: 0 auto;
    background-color: #8080ff;
    /*position: relative;!*相对定位*!*/
    overflow: hidden;
}
.carousel-imgs img{
    width:100%;
    height:412px
}
.carousel-imgs li{
    float: left;
}
.carousel-imgs{
    width: 9999px;
}

/*控制器*/
.prev{
    width:45px;
    height: 40px;
    position: absolute;/*绝对定位,脱离文档流*/
    background-image: url("../imgs/img.png");
    background-size:100%;
    top:20%;
}
.next{
    background-image: url("../imgs/img_1.png");
    position: absolute;/*绝对定位,脱离文档流,相对于position:relative定义的元素进行定位*/
    width:45px;
    height: 45px;
    background-size:100%;
    right:190px;
    top:20%;
}

/*计数器*/
.count{
    height:10px;
    position:absolute;
    width:1000px;
    bottom:470px;
}
.count ul{
    width: 60px;
    margin: 0;
    background-color: #111111;
    height: 10px;
}
.count ul li{
    width: 10px;
    height: 10px;
    background-color: #87faf8;
    margin-right: 10px;
    float: left;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;/*将鼠标形状设置为手形*/
}
.count ul li.active{
    background-color: red;
    opacity: 1;/*不透明度 0-1之间取值*/
}

4.7 兼容性（略）

4.8 作业

4.8.1 实训一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./CSS/作业四.css">
    <meta charset="UTF-8">
    <title>第四次作业</title>
</head>
<body>
<div class="wrapper">
    <!--标题部分-->
    <h1>页面标题</h1>
    <!--核心内容-->
    <div class="content">
        <div class="aside aside-left">
            <!--左侧栏-->
            <h4>左侧栏</h4>
            <ul>
                <li><a href="" class="herf">链接1</a></li>
                <li><a href="" class="herf">链接2</a></li>
                <li><a href="" class="herf">链接3</a></li>
                <li><a href="" class="herf">链接4</a></li>
                <li><a href="" class="herf">链接5</a></li>
            </ul>
        </div>
        <!--内容区-->
        <div class="main">
            <h4>主体内容的标题</h4>
            <p>我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物</p>
            <p>我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物</p>
            <p>我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物</p>
            <p>我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物我是废物</p>
        </div>
        <div class="aside aside-right">
            <!--右侧栏-->
            <h4>右侧栏</h4>
            <ul>
                <li><a href="" class="herf">链接1</a></li>
                <li><a href="" class="herf">链接2</a></li>
                <li><a href="" class="herf">链接3</a></li>
                <li><a href="" class="herf">链接4</a></li>
                <li><a href="" class="herf">链接5</a></li>
                <li><a href="" class="herf">链接6</a></li>
                <li><a href="" class="herf">链接7</a></li>
            </ul>   
        </div>
    </div>
    <!--尾部-->
    <div class="footer">页脚
    </div>
</div>
</body>
</html>
Copy
*{
    margin: 0;
    padding: 0;
}
body{
    padding-top: 10px;
}
.wrapper{/*内容区一般不给出高度，高度由内容自行撑开.*/
    width: 700px;
    border: 1px solid black;
    margin: 0 auto;
}
h1{
    font-size: 20px;
    font-family: 黑体;
    font-weight: normal;
    background-color: #eee;
    text-align: center;
    padding: 20px 0;
}
.aside{
    background: url("../imgs/三国杀二乔.jpg") repeat-x #8080ff;
    width: 150px;
    height: 400px;
    float: left;
}
h4{
    padding: 20px 0 15px 10px;
}
ul{
    padding-left: 30px;
}
li{
    height: 1.5em;
    font-size: 14px;
}
a{
    text-decoration: none;
    color: #010101;
}
a:link{
    color: black;
}
a:hover{
    color: #87faf8;
}
a:active{
    color: red;
}
.main{
    background: #8080ff url("../imgs/三国杀夏侯氏.png") repeat-x;
    height: 400px;
    width: 400px;
    float: left;
}
.main p{
    text-indent: 2em;
    line-height: 1.5em;
    padding: 10px 20px 10px 10px;
    font-size: 14px;
}
.footer{
    background: #ccc;
    padding: 20px 0 15px 10px;
    font-size: 15px;
}

4.8.2 实训二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四次作业2</title>
    <link rel="stylesheet" href="./CSS/作业四2.css">
</head>
<body>
    <div class="wrapper">
        <!--导航栏-->
        <div class="nav">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">HTML咨询</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="">HTML论坛</a></li>
            </ul>
        </div>
        <!--主体部分-->
        <div class="content">
            <!--左侧内容-->
            <div class="article">
                <h2>开展党史学习教育的根本遵循</h2>
                <h3>开展党史学习教育的根本遵循</h3>
                <p>一百年来，我们党团结带领人民接续奋斗，创造了伟大历史，建立了伟大功业，铸就了伟大精神，形成了宝贵经验。在庆祝中国共产党百年华诞的重大时刻和“两个一百年”奋斗目标历史交汇的关键节点，党中央决定在全党开展党史学习教育，要求全党学史明理、学史增信、学史崇德、学史力行，从党的百年伟大奋斗历程中汲取继续前进的智慧和力量。</p>
                <p>2021年2月20日上午，党史学习教育动员大会在北京召开。习近平总书记出席会议并发表重要讲话，站在统筹中华民族伟大复兴战略全局和世界百年未有之大变局的时代高度，对开展好党史学习教育作出全面动员和部署：</p>
                <p>——用“三个必然要求”深刻阐明开展党史学习教育的重大意义，强调这是牢记初心使命、推进中华民族伟大复兴历史伟业的必然要求，是坚定信仰信念、在新时代坚持和发展中国特色社会主义的必然要求，是推进党的自我革命、永葆党的生机活力的必然要求。</p>
                <h3>最生动的教科书</h3>
                <p>1844年2月，恩格斯在《德法年鉴》上发表《英国状况——评托马斯·卡莱尔的〈过去和现在〉》一文。在这篇文章中，恩格斯提出一个重要思想，即“历史就是我们的一切”，表现了伟大的马克思主义创始人对“历史的启示”的重视。</p>
                <p>注重从历史中总结经验教训，是马克思主义政党的优良传统和独特政治优势。厚重的百年党史中蕴含着丰富的经验和智慧，是我们取之不尽、用之不竭的精神财富和力量源泉，是中国人民和中华民族继往开来、奋勇前进的现实基础。</p>
                <p>“党的历史是最生动、最有说服力的教科书。”在这篇重要讲话中，习近平总书记回顾毛泽东、邓小平、江泽民、胡锦涛同志在不同历史时期关于学党史、用党史的重要论述，深刻指出：“我们党历来重视党史学习教育，注重用党的奋斗历程和伟大成就鼓舞斗志、明确方向，用党的光荣传统和优良作风坚定信念、凝聚力量，用党的实践创造和历史经验启迪智慧、砥砺品格。”</p>
                <h3>总书记主要从9个方面作出全面梳理和归纳</h3>
                <p>第一，“我们党已经发展成为一个走过百年光辉历程、在最大的社会主义国家执政70多年、拥有9100多万党员的世界上最大的马克思主义执政党，中国共产党立志于中华民族千秋伟业，百年恰是风华正茂，要始终站在时代潮流最前列、站在攻坚克难最前沿、站在最广大人民之中，永远立于不败之地”。</p>
                <p>第二，“历史是最好的老师，我们党的历史是中国近现代以来历史最为可歌可泣的篇章，历史在人民探索和奋斗中造就了中国共产党，我们党团结带领人民又造就了历史悠久的中华文明新的历史辉煌。一切向前走，都不能忘记走过的路，走得再远、走到再光辉的未来，也不能忘记走过的过去，不能忘记为什么出发”。</p>
                <p>第三，“学习党的历史，是坚持和发展中国特色社会主义、把党和国家各项事业继续推向前进的必修课，这门功课不仅必修，而且必须修好”。</p>
            </div>
            <!--侧栏-->
            <div class="asiderbar">
                <div class="aside">
                    <h2>参考</h2>
                    <ul>
                        <li><a href="">相关1</a></li>
                        <li><a href="">相关2</a></li>
                        <li><a href="">相关3</a></li>
                        <li><a href="">相关4</a></li>
                        <li><a href="">相关5</a></li>
                        <li><a href="">相关6</a></li>
                        <li><a href="">相关7</a></li>
                        <li><a href="">相关8</a></li>
                    </ul>
                </div>
                <div class="aside">
                    <h2>扩展阅读</h2>
                    <ul>
                        <li><a href="">扩展1</a></li>
                        <li><a href="">扩展2</a></li>
                        <li><a href="">扩展3</a></li>
                        <li><a href="">扩展4</a></li>
                        <li><a href="">扩展5</a></li>
                        <li><a href="">扩展6</a></li>
                        <li><a href="">扩展7</a></li>
                        <li><a href="">扩展8</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--尾部-->
        <div class="footer">
            <p>版权声明 &copy;2021</p>
        </div>
    </div>
</body>
</html>
Copy
*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #f6f6f6;
    padding-top: 10px;
    font-size: 12px;
}
.wrapper{
    width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border:1px solid #ccc;
    overflow: hidden;/*一定要清除浮动*/
}
.nav{
    background-color: dodgerblue;
}
.nav ul{
    list-style: none;
    padding: 8px 0 8px 20px;
}
.nav li{
    display: inline-block;/*非常灵性的操作*/
    margin: 0 12px;
}
.nav a{
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.nav a:hover{
    color: #8080ff;
}
.nav a:active{
    color: red;
}
.content{
    overflow: hidden;
}
.article{
    padding: 5px 10px 5px 15px;
    border-right: 1px dotted #ccc;/*添加单侧边框*/
    width: 520px;
    float: left;
}
.article h2{
    text-align: center;
    font-size: 26px;
    margin: 30px 0 20px;
    font-family: 黑体;
}
.article h3{
    font-size: 15px;
    font-family: 微软雅黑;
    text-indent: 2em;
    margin: 20px 0 10px;
    font-weight: bold;
}
p{
    text-indent: 2em;
    margin: 10px 0;
}
.asiderbar{
    float: right;
    width: 240px;
    margin: 85px 0 0 10px;
}
.aside{
    margin-bottom: 10px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.asiderbar h2{
    background-color: deepskyblue;
    font-size: 12px;
    color: #f5f5f5;
    padding: 5px 0 5px 10px;
}
.aside ul{
    margin-left: 30px;
}
.aside li{
    margin: 8px 0;
}
.aside a{
    color: black;
    text-decoration: none;
}
.aside a:hover{
    color: #87faf8;
    text-decoration: underline purple;
}
.aside a:active{
    color: red;
}
.footer p{
    background-color: mediumpurple;
    color: white;
    padding: 8px 0 8px 15px;
    margin-bottom: 20px;
}

第五章 CSS定位布局

课程提要

  • 定位：position
  • 网站整体布局
  • BFC
  • IFC

5.1 定位（position）

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或者固定元素会生成一个块级框，而无论该元素是什么类型。相对定位元素会相对于它正常流中的默认位置偏移。

属性值：

  • static：静态定位，默认值，没有定位，不能设置偏移值（left/right/top/bottom），静态定位会占用标准流（文档流）

  • relative：相对定位，会占用文档流（原位置不能被其他元素占用），会出现在文档流中它该出现的位置，可以设置偏移值改变它的位置。它相对于自身所在的位置做偏移。

    • absolute：绝对定位，会脱离文档流（浮在文档流上），相对于body偏移。绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素，即relative的元素是absolute的元素的父级。项目开发中一般relative和absoute结合使用

  • fixed：固定定位，脱离文档流，相对浏览器左上角（0，0）进行定位，它与relative设定的对象没有关系，即它和父级定位没有任何关系，一般用于开发各种固定导航栏。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>relative/static/absolute</title>
        <style>
            .wrapper{
                width: 600px;
                height: 400px;
                border:1px solid deepskyblue;
                margin: 0 auto;
            }
            .box1,.box2,.box3{
                width: 150px;
                height: 150px;
                border: 1px dotted red;
                display: inline-block;
            }
            /*.box2{*/
            /*    position: static;!*无效的left和top操作，因为已经是static了*!*/
            /*    left: 100px;*/
            /*    top: 200px;*/
            /*}*/
            /*.box2{*/
            /*    position: relative;!*相对于本来的位置进行偏移，*!*/
            /*    left: -100px;!*原位置相对与偏移后位置的方向：距离*!*/
            /*    top: 100px;*/
            /*}*/
            .box2{
                position: absolute;
                left: 100px;
                top: 10px;
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>absolute与relative结合使用</title>
        <style>
            .wrapper{
                width: 600px;
                height: 400px;
                border:1px solid deepskyblue;
                margin: 0 auto;
                position: relative;/*父级*/
            }
            .box1,.box2,.box3{
                width: 150px;
                height: 150px;
                border: 1px dotted red;
                display: inline-block;
            }
            .box2{
                position: absolute;/*相对偏移*/
                left: 100px;
                top: 10px;
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>fixed定位</title>
        <style>
            .wrapper{
                width: 600px;
                height: 400px;
                border:1px solid deepskyblue;
                margin: 0 auto;
                position: relative;/*父级*/
            }
            .box1,.box2,.box3{
                width: 150px;
                height: 150px;
                border: 1px dotted red;
                display: inline-block;
            }
            .box2{
                position: fixed;
                left: 100px;
                top: 10px;
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    </body>
    </html>

5.2 z-index

当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。

注意：

  • z-index仅能在定位元素上奏效（例如：position:absolute/relative/fixed;）
  • 元素可以拥有负的z-index的值
  • 一般元素为普通流，普通流的z-index默认是0，脱离了普通流，在普通流之上（定义，浮动）z-index为0-1之间。如果z-index的值设置为大于或等于1，元素将会在定位或者浮动流之上。
  • 用在static上将会无效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        .wrapper{
            width: 600px;
            height: 400px;
            border:1px solid deepskyblue;
            margin: 0 auto;
            position: relative;
        }
        .box1,.box2,.box3{
            width: 150px;
            height: 150px;
            border: 1px dotted red;
            display: inline-block;
            position: absolute;
        }
        .box2{
            background-color: blueviolet;
            left: 100px;
            top: 100px;
            z-index: 3;
        }
        .box1{
            background-color: red;
            left: 50px;
            z-index: 2;
        }
        .box3{
            background-color: #0ff;
            left: 150px;
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>
</html>

5.3 双飞翼布局

网站开发策略：先整体再局部，自顶向下，逐步细化。

5.3.1 双飞翼布局

由三列组成，两端固定，中间自适应。即左右列宽度恒定，中间列的宽度根据浏览器窗口大小自适应。

优点：

  • 兼容性好，可以兼容所有主流浏览器，包括万恶的IE。
  • 因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        .container{
            width: 100%;
            overflow: hidden;/*清除浮动，让后面的内容掉到下一行*/
        }
        .column{
            float: left;
            height: 200px;
        }
        .left{
            width: 300px;
            background-color: #f00;
            margin-left: -100%;
        }
        .center{
            width: 100%;
            background-color: #0f0;
        }
        .right{
            width: 300px;
            background-color: #00f;
            margin-left: -300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column center"></div>
        <div class="column left"></div><!--设定公共类名-->
        <div class="column right"></div>
    </div>
</body>
</html>

5.3.2 圣杯布局(思路是重点中的重点)

由三列组成，两端固定，中间自适应，外观与双飞翼相同。

布局里，与双飞翼相比，增加了定位和偏移设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        /*头部加尾部*/
       .header,.footer{
           width: 100%;
           height: 100px;
           background-color: mediumspringgreen;
           text-align: center;
           font-size: 30px;
           line-height: 100px;/*让文字在内容盒子里垂直居中*/
       }
        *{
            margin: 0;
            padding: 0;
        }
        /*主体部分*/
       .container{
           overflow: hidden;
           padding: 0 200px;
       }
       .column{
           float: left;
           height: 300px;
           position: relative;/*相对于container*/
       }
       .left{
           width: 200px;
           background-color: red;
           margin-left: -100%;
           left: -200px;
       }
       .center{
           width: 100%;
           background-color: blue;
       }
       .right{
           width: 200px;
           background-color: #8080ff;
           margin-left: -200px;
           left: 200px;
       }
       body{
           min-width: 600px;/*限制使用者的最小放缩大小*/
       }
    </style>
</head>
<body>
<!--一个网页通常由上中下三部分组成-->
<!--1.header头部部分-->
<div class="header">#header</div>
<!--2.主体内容区container-->
<div class="container">
    <div class="column center"></div>
    <div class="column left"></div><!--设定公共类名-->
    <div class="column right"></div>
</div>
<!--3.尾部footer-->
<div class="footer">#footer</div>
</body>
</html>

5.3.3 侧边栏布局

可以在空位紧缺的界面内提供更多的快捷入口和用户操作，简化了操作层级。

  • 两栏布局

    • 左侧宽度固定，右侧自适应
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两栏布局 左固定</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body{
                font-size: 18px;
                min-width: 600px;
            }
            .container{
                width: 100%;
                overflow: hidden;
            }
            .left{
                width: 150px;
                height: 200px;/*实际开发中不要给出高度，高度由内容自行撑开*/
                float: left;
                background-color: pink;
                color: white;
                position: relative;
                margin-right: -150px;
            }
            .right{
                width: 100%;
                height: 200px;/*实际开发中不要给出高度，高度右内容自行撑开*/
                float: left;
                background-color: #87faf8;
                color: white;
                margin-left: 180px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">左侧固定</div>
            <div class="right">右侧自适应</div>
        </div>
    </body>
    </html>

    • 右侧宽度固定，左侧自适应
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两栏布局 右固定左侧自适应</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body{
                font-size: 18px;
                min-width: 600px;
            }
            .container{
                overflow: hidden;
                padding: 0 150px 0 0;
            }
            .column{
                height: 200px;/*实际开发中不要给出高度，高度右内容自行撑开*/
                float: left;
                position: relative;
            }
            .left{
                width: 100%;
                background-color: pink;
                color: white;
            }
            .right{
                width: 150px;
                background-color: #87faf8;
                color: white;
                margin-left: -150px;
                left: 150px;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="column left">左侧自适应xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxsssssssssssssssssssssssssssssssssssssss</div>
        <div class="column right">右侧固定</div>
    </div>
    </body>
    </html>
    • 左右均固定
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两栏布局 左右均固定</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body{
                font-size: 18px;
                min-width: 600px;
            }
            .container{
                overflow: hidden;
                width: 1200px;
            }
            .column{
                height: 500px;/*实际开发中不要给出高度，高度右内容自行撑开*/
                float: left;
                font-size: 28px;
                position: relative;
            }
            .left{
                width: 560px;
                background-color: pink;
                color: white;
            }
            .right{
                width: 600px;
                background-color: #87faf8;
                color: white;
                float: right;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="column left">左侧固定</div>
        <div class="column right">右侧固定</div>
    </div>
    </body>
    </html>

  • 三栏布局

    • 两端固定，中间自适应

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>三栏布局 左右均固定中间自适应</title>
          <style>
              *{
                  padding: 0;
                  margin: 0;
              }
              .container{
                  overflow: hidden;
                  padding: 0 200px;
              }
              .column{
                  float: left;
                  line-height: 200px;
                  position: relative;
              }
              .right,.left{
                  width: 200px;
                  color: white;
              }
              .left{
                  background-color: darkorange;
                  margin-left: -100%;
                  left: -200px;
              }
              .right{
                  background-color: lime;
                  margin-left: -200px;
                  left: 200px;
              }
              .center{
                  width: 100%;
                  line-height: 200px;
                  background-color: #8080f0;
              }
              .content{
                  color: white;
              }
              body{
                  min-width: 600px;/*很重要！！！！！*/
              }
          </style>
      </head>
      <body>
      <div class="container">
          <div class="column center">
          <div class="content">中间自适应</div>
          </div>
          <div class="column left">左侧固定</div>

          <div class="column right">右侧固定</div>
      </div>
      </body>
      </html>

    • 左侧自适应，中间、右侧固定

      • 写法一

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        57
        58
        59
        60
        61
        62
        63
        64
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>三栏布局 左侧自适应 中间右侧固定 写法2</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                .container{
                    color: white;
                    overflow: hidden;
                }
                .left{
                    width: 100%;
                    background-color: #8080ff;
                    float: left;
                    height: 200px;
                    margin-right: -300px; /*重点和难点！！！！！*/
                    line-height: 200px;
                }
                .right,.center{
                    float: right;
                    width: 150px;
                    height: 200px;
                    line-height: 200px;
                }
                .center{
                    background-color: yellow;
                }
                .right{
                    background-color: deeppink;
                }
                .content{
                    margin-right: 300px;
                }
            </style>
        </head>
        <body>
        <div class="container">
            <div class="left">
                <div class="content">
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                    左侧自适应
                </div>
            </div>
            <div class="column right">右侧固定</div>
            <div class="center">中间固定</div>

        </div>
        </body>
        </html>

      • 写法二

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>三栏布局 左侧自适应 中间右侧固定</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                .container{
                    overflow: hidden;
                    padding: 0 200px;
                }
                .column{
                    float: left;
                    line-height: 200px;
                    position: relative;
                }
                .left{
                    width: 100%;
                    background-color: darkorange;
                    left: -200px;
                }
                .right{
                    background-color: lime;
                    margin-left: -200px;
                    left: 200px;
                    width: 200px;
                    color: white;
                }
                .center{
                    width: 200px;
                    line-height: 200px;
                    background-color: #8080f0;
                    margin-left: -200px;
                }
                .content{
                    color: white;
                }
                body{
                    min-width: 400px;/*很重要！！！！！*/
                }
            </style>
        </head>
        <body>
        <div class="container">
            <div class="column left">左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应</div>
            <div class="column center">
                <div class="content">中间固定</div>
            </div>
            <div class="column right">右侧固定</div>
        </div>
        </body>
        </html>

        可以看出，它们都有各自的特点

    • 右侧自适应，中间、左边固定

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>三栏布局 左侧固定中间固定 右侧自适应</title>
          <style>
              *{
                  padding: 0;
                  margin: 0;
              }
              .container{
                  overflow: hidden;
              }
              .left,.center{
                  color: white;
                  width: 150px;
                  height: 200px;
                  line-height: 200px;
                  float: left;
              }
              .left{
                  background: chartreuse;
              }
              .center{
                  background-color: blueviolet;
              }
              .right{
                  background-color: yellow;
                  color: red;
                  height: 200px;
                  line-height: 200px;
                  width: 100%;
              }
          </style>
      </head>
      <body>
      <div class="container">
      <div class="left">左侧固定</div>
      <div class="center">中间固定</div>
      <div class="right">
          <div class="content">右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应</div>
      </div>
      </div>
      </body>
      </html>

5.4 BFC&IFC

BFC：fomatting context格式上下文，CSS2.1中的概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC，分别为Block Fomatting Context和Inline Fomatting Context。

5.4.1BFC — 块级格式化上下文

  • 形成BFC的条件（满足一个即可）
    • 必须是一个浮动元素（float除none之外的值）
    • 定位元素（position中的absolute/fixed）
    • display的值为inline-block/table-cell/table-caption
    • overflow的值为hidden/auto/scroll
  • BFC特性/规则
    • 内部的盒子会在垂直方向一个接一个放置
    • 垂直方向上的距离由会叠加，将由margin的最大值决定（如果不想要margin值叠加，需要将其变成一个独立的容器）
    • BFC的区域不会与float元素区域重叠
    • 计算BFC的高度时，浮动元素也参与计算
    • BFC就是页面上独立的一个容器，容器里面的元素不会影响到外面的元素
  • BFC的作用
    • 解决margin重叠问题（添加独立BFC）
    • 解决浮动高度塌陷父级未被撑开问题（在父级添加样式overflow:hidden）
    • 解决侵占浮动元素的问题（添加overflow:hidden）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC规范</title>
    <style>
        /*!*内部的盒子会在垂直方向一个接一个放置*!*/
        /*.box1,.box2{*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    border: 10px solid black;*/
        /*}*/

        /*垂直方向上的距离由margin的最大值决定*/
        /*如果不想要margin值叠加，需要将其变成一个独立的容器*/
        /*.container{*/
        /*   overflow: hidden;*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    background-color: red;*/
        /*}*/
        /*.box1{*/
        /*    margin: 20px 0;*/
        /*    height: 20px;*/
        /*    background-color: greenyellow;*/
        /*}*/
        /*.box2{*/
        /*    margin: 10px 0;*/
        /*    height: 20px;*/
        /*    background-color: cyan;*/
        /*}*/

        /*!*BFC的区域不会与float元素区域重叠*!*/
        /*.box1{*/
        /*    float: left;*/
        /*    width: 200px;*/
        /*    height: 100px;*/
        /*    background-color: greenyellow;*/
        /*}*/
        /*.box2{*/
        /*    overflow: hidden;*/
        /*    height: 200px;*/
        /*    background-color: red;*/
        /*}*/

        /*计算BFC的高度时，浮动元素也参与计算*/
        .box2{
            width: 200px;
            height: 100px;
            background-color: greenyellow;
            float: left;
        }
        .container{
            width: 300px;
            border: 5px solid black;
            overflow: hidden;/*如果想让父级也被撑开，就必须把它设置成一个BFC*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<!--<div class="container">-->
<!--    <div class="wrapper">-->
<!--    <div class="box1"></div>&lt;!&ndash;如果不想要margin值叠加，需要将其变成一个独立的容器&ndash;&gt;-->
<!--    </div>-->
<!--    <div class="box2"></div>-->
<!--</div>-->
</body>
</html>

5.4.2 IFC — 行级（内联）格式化上下文

  • 形成IFC的条件
    • font-size
    • line-height
    • height
    • vertical-height:top/middle/bottom
  • IFC特性/规则
    • IFC的元素会在一行上从左至右排列
    • 在一行上的所有元素会在该区域形成一个行框line box
    • 行框的高度为包含框的高度，高度为行框中最高元素的高度
    • 浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
    • 行框的宽度容纳不下子元素时，字元素会自动换行显示，并且会产生新的行框
    • 行框的元素内遵循text-align和vertical-align
  • 从上到下的四条线：顶线 中线 基线 底线，行高是指上下文本行的基线间的垂直距离。
  • 容器高度height=line-height+vertical-align
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFC特性/规范</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        /*IFC的元素会在一行上从左至右排列*/
        span{
            font-size: 30px;
            background-color: greenyellow;
            /*width: 300px;!*注意行级标签不识别宽高，实在要改，可以用display更改*!*/
            /*display: inline-block;*/
        }
        strong{
            background-color: lightpink;
            font-size: 18px;
            vertical-align: top;
        }
        .box{
            float: left;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <span>span</span>
    <strong>strong</strong>
    <em class="box">box</em>
</body>
</html>

5.5 实训

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第五次实训</title>
    <link rel="stylesheet" href="./CSS/作业五.css">
    <link rel="Shortcut Icon" href="./imgs/img.png" >
</head>
<body>
<!--页面-->
<div class="mysite">
    <!--头部-->
    <div class="head">

        <a href="#"><img src="./imgs/三国杀二乔.jpg" alt="三国杀"></a>
        <a href="#"><img src="./imgs/三国杀夏侯氏.png" alt="三国杀"></a>
    </div>
    <div class="banner">
        <div><ul class="main">
            <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>
        <ul class="sub">
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
                <li><a href="#">导航4</a></li>
                <li><a href="#">导航5</a></li>
                <li><a href="#">导航6</a></li>
        </ul></div>
    <!--主体部分-->
    </div>
    <div class="content">
        <div class="left"><!--侧栏-->
            <ul class="sides">
                <li><a href="">文章索引1</a></li>
                <li><a href="">文章索引2</a></li>
                <li><a href="">文章索引3</a></li>
                <li><a href="">文章索引4</a></li>
                <li><a href="">文章索引5</a></li>
                <li><a href="">文章索引6</a></li>
                <li><a href="">文章索引7</a></li>
                <li><a href="">文章索引8</a></li>
                <li><a href="">文章索引9</a></li>
                <li><a href="">文章索引10</a></li>
                <li><a href="">文章索引11</a></li>
                <li><a href="">文章索引12</a></li>
            </ul></div>
        <!--内容区-->
        <div class="main">
            <h2> 习近平反复强调这个高校立身</h2>
            <div>
                4月6日，习近平总书记致信祝贺厦门大学建校100周年，向全体师生员工和海内外校友致以热烈的祝贺和诚挚的问候。
            </div>
            <div>总书记在贺信中指出，我国已开启全面建设社会主义现代化国家新征程。希望厦门大学全面贯彻党的教育方针，切实落实立德树人根本任务，为党育人、为国育才，与时俱进建设世界一流大学。</div>
            <div>“高校立身之本在于立德树人。”党的十八大以来，习近平总书记高度重视高等教育事业发展，多次强调立德树人这个根本任务，指出只有培养出一流人才的高校，才能够成为世界一流大学。</div>
            <div>央视网《联播+》特梳理总书记在考察、会议、回信中对高校关于“立德树人”的要求和嘱托，一起感受总书记对教育事业的深深牵挂</div>
        </div>
    </div>
    <!--尾部-->
    <div class="footer">

    </div>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
*{
    padding: 0;
    margin: 0;
}
body{
    font-size: 18px;
    background-color: lightgray;
}
.mysite{
    width: 1000px;
    margin: 0 auto;
}
img{
    width: 20%;
}
img[src="./imgs/三国杀二乔.jpg"]{
    border-right: #8080ff 5px solid;
}
.banner{
    border-bottom: #87faf8 solid 2px;
}
.banner ul.main{
    list-style: none;
    width: 100%;
    background-color: #8080ff;
}
.banner ul li{
    margin: 15px auto;
    display: inline-block;
    padding: 0 30px 0 20px;
    border-right: red 1px solid;
}
.banner ul li:last-child{/*伪元素选择器*/
    border-right: none;
}
ul li a{
    text-decoration: none;
    color: white;
}
ul li a:hover{
    color: red;
}
ul li a:active{
    color: #87faf8;
}
.banner ul.sub{
    list-style: none;
}
.banner ul.sub li{
    margin: 0 25px;
}


.content{
    overflow: hidden;
}
.left{
    float: left;
    margin-right: 20px;
    position: relative;
}
.main{
    width: 800px;
    float: left;
}
.sides{
    background-color: black;
    width: 100px;
}
.content ul.sides{
    list-style: none;
}
.content ul.sides li{
    padding: 10px 0;
}
h2{
    border-bottom: black solid 2px;
    margin: 10px 0 10px 0;
}
.main div{
    margin: 0 0 20px 0;
}

第六章 HTML5新特性

课程提要

  • HTML5介绍
  • HTML5网页标准结构
  • HTML5多媒体标签
  • HTML5新增常用属性
  • HTML5新表单操作
  • HTML5代码规范

6.1 HTML5介绍

HTML5成为HTML、XHTML以及HTML DOM的新标准。

HTML5是W3C和WHATWG合作研发的结果，于2014年正式发布。

HTML5成为了新一代网页开发的标准。

HTML5主要新功能：

  • 音频视频播放：视频已经在Web上广泛流行，但是其格式几乎都是专有的。YouTube使用Flash，Microsoft使用Windows Media，Apple使用QuickTime。所以在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。而HTML5新增的 <audio>和 <video>标签使得浏览器不需要插件既可播放视频、音频，抛弃了flash。

  • 动画canvas：HTML5引进了很多新的特性，其中最令人期待的之一就是canvas元素。HTML5 canvas提供了Javascript绘制图形的方法，此方法使用简单但功能强大。每一个canvas元素都有一个“上下文（context）”（想象成绘画板上的一页），在其中可以绘制任意的图形。浏览器支持多个canvas上下文，并通过不同的API提供图形绘制功能。绘画，制作动画（如小游戏开发等）

  • 地理信息：HTML5的另一个功能是地理信息定位功能，一些浏览器提供了geolocation API，这个API也由W3C管理，可以结合HTML5实现你当前地理位置的定位。
    Google Maps在使用该功能，在Google地图上，你可以通过相关操作告诉Google地图你的当前地理位置信息。目前，geolocation API并没有被众多桌面浏览器广泛但采用（只有Chrome和FireFox 3.6+采用了），但Google Gears插件可以帮助那些旧浏览器实现该功能。
    例如，Twitter借此实现地理信息感知的tweets消息，当浏览器支持geolocation API的时候，会自动使用该API，否则，使用Google Gears。

  • 硬件加速：Web开发人员只需要使用HTML5标记就可以利用硬件加速优势以及可以通过多种设备数据的强大云环境。
    针对网站，使用像SVG这样的技术来优化包括台式机和笔记本电脑等尺寸较大的电脑，以及智能手机和平板电脑等更多便携设备上的体验。

  • WebSocket：是HTML5开始有提供的一种在单个TCP连接上进行全双工通讯的协议。
    在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就可以数据相互传送。
    浏览器通过Javascript向服务器发出建立WebSocket连接请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。
    当你获取WebSocket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。
    创建WebSocket对象：

    1
    var Socket = new WebSocket(url, [portocol]);

  • 本地离线应用程序：新增了一个API，利用本地缓存机制，为离线的Web应用程序开发提供了可能。
    为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，Javascript脚本文件放在本地缓存中，当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行Web应用程序。

  • 本地存储：相对于HTML4只能使用cookie在客户端存储数据，大小受限制，占用带宽，操作复杂的情况。HTML5支持使用Web Storage在客户端进行存储数据，容量更大，减轻带宽压力，操作简便。

  • 语义化标记：HTML5最大的意义在于改变了WEB文档的结构方式，借助header、footer、section、article这些标签，我们可以实现更具结构化、语义化的文档。这样，搜索引擎可以更容易索引Web站点，我们也可以搜索更快、获得更准确的信息。

  • HTML5与Flash：HTML5免费、但是不能做特效。

HTML5的优势：

  • 提高可用性和改进用户的友好体验
  • 新标签有助于开发人员定义重要的内容
  • 可以给站点带来更多的多媒体元素（视频和音频）
  • 可以很好的代替FLASH和Silverlight
  • 当涉及到网站的抓取和索引时，对于SEO很友好
  • 大量应用于移动程序和游戏

HTML5的劣势：

  • HTML5本身还在发展中，它不是用户应用的最迫切需求，更多是厂商视图改变软件生态格局的战略需求
  • HTML5的兼容性受限于各大浏览器表现，例如微软的IE和firefox之间存在很多差别
  • HTML5需要一个成熟完整的开发环境，目前还缺少
  • HTML5功能的暴增，浏览器必须有一个高效的图形引擎和脚本引擎
  • HTML5需要杀手级应用来吸引和引导用户升级浏览器，最终完成HTML5终端的部署（通过HTML升级带动浏览器升级）

6.2 HTML5网页标准结构

6.2.1 网页布局标签

  • header：页首
  • nav：导航栏
  • aside：侧边栏
  • main：主体
  • section：区块
  • article：文章
  • footer：页尾

ctSB5T.png

6.2.2 语义化标签

  • <mark>：高亮显示，行级标签
  • <summary>（摘要）和 <details>（描述） ：一般用于名词解释，或用于封装一个区块。大前端开发》组件化开发+模块化开发+自动化开发+后台开发
  • <meter>：定义度量衡。有属性value/min/max/low/high
  • <progress>：显示进度条。有属性value/min/max
  • <dialog>：对话框或窗口
  • <figure>：figure标签用于对元素进行组合，一般用来组合一张图的标题、图片和图片描述等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签</title>
    <style>
        dialog{
            position: relative;
        }
        dialog span{
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;/*添加手形*/
        }
        figure{
            width: 10px;
            height: 100px;
            text-align: center;
        }
        figure{
            width: 100%;
        }
    </style>
</head>
<body>
<!--mark标签：高亮显示-->
    <p><mark>核心价值观</mark>是一个民族赖以维系的精神纽带，是一个国家共同的思想道德基础。能否构建具有强大感召力的核心价值观，关系社会和谐稳定，关系国家长治久安。</p>

<!--`<summary>（摘要）`和 `<details>（描述）` ：一般用于名词解释-->
    <details>
        <summary>
            内容
        </summary>
        <h2>社会主义核心价值观</h2>
        <
    </details>

<!--meter-->
<meter value="110" min="80" max="120" ></meter>公里/h

<!--progress:进度条-->
<p>任务已完成：</p><progress value="80" max="100"></progress>80%

<!--`<dialog>`：对话框或窗口-->
<dialog open>
    <span>&times;</span>
    <h2>社会主义核心价值观</h2>
    <ul>
    <li>富强</li>
    <li>民主</li>
    <li>文明</li>
    <li>和谐</li>
    <li>自由</li>
    <li>平等</li>
    <li>公正</li>
    <li>法治</li>
    <li>爱国</li>
    <li>敬业</li>
    <li>诚信</li>
    <li>友善</li>
    </ul>
</dialog>

<!--`<figure>`：figure标签用于对元素进行组合-->
<figure>
    <h4>游戏</h4>
    <img src="imgs/三国杀.bmp" alt="测试"/>
    <p>三国杀，谋略智慧游戏</p>
</figure>
</body>
</html>

6.3 HTML5多媒体

  • <audio>：播放音乐或音频。IE9以下的版本不支持。

    • 支持的格式：.mp3/.ogg/.wav
      Ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的
      MP3：一种音频压缩技术。它被设计用来大幅度降低音频数据量
      WAV：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几
    • 属性：
      src：加载文件路径
      autoplay：自动播放
      loop：循环
      controls：控制条
      muted：静音
      preload：预加载（当使用autoplay时，preload自动失效）

  • <video>：加载视频

    • 支持的格式.mp4/.ogg/.webm
      mp4：带有H.264视频编码和ACC音频编码的MPEG4文件
      WEBM：带有VP8视频解码和Vorbis音频编码的WebM文件
      Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件

    • 属性

      src：加载文件路径
      autoplay：自动播放
      loop：循环，默认无限循环
      controls：控制条
      muted：静音
      preload：预加载（当使用autoplay时，preload自动失效）
      width/height：设置视频宽高
      poster：海报

  • <embed>：加载插件，嵌入内容。(不常用)

    • 属性
      src：加载文件路径
      width：宽度
      height：高度
      type：类型
      loop
      hidden
      autostart
      starttime
      controls

  • <canvas>：画布，是一个容器元素，

    • 注意：
      单独使用canvas毫无意义，它必须结合JavaScript使用。它的具体功能体现是通过javascript脚本体现的。
      canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
    <style>
        
    </style>
</head>
<body>
<!--音频-->
<audio src="C:\Users\LEGION\Downloads\小时姑娘 - 爱殇.mp3" controls autoplay loop="2" muted preload="auto"></audio>

<!--视频-->
<video src="F:\开发学习资料\英语六级\03.20年12月有道六级\02.基础班\听力基础包\六级真题核心句1.mp4" width="400pxhg" autoplay controls poster="imgs/三国杀.bmp"></video>

<!--embed：加载插件，嵌入内容-->
<embed src="run.swf" type="application/x-shockwave-flash">
<embed src="movie.ogg" type="video/ogg" autostart="true">

<!--canvas-->
<canvas width="400" height="200" style="background-color: cyan"></canvas>
</body>
<script>/*script用来包裹脚本代码*/
    var canvas = document.getElementsByTagName('canvas')[0];//脚本DOM操作，用来获取canvas这个标签元素
    var ctx = canvas.getContext('2d')//绘制2d图
    ctx.fillStyle = '#ff0000'//设置填充色
    ctx.fillRect(50,0,200,100)//绘制一个矩形
</script>
</html>

6.4 HTML5新增常用属性

  • contenteditable：属性只能是true或者false，几乎可以为任何元素指定。用于将元素设为可编辑模式，可用于所有标签。
  • hidden：属性规定对元素进行隐藏，一般用来传值，或者当某个条件成立，执行内容显示，属性默认值为hidden。
  • data-*：属性用于存储页面或应用程序的私有自定义数据。一般用于传值。
  • multiple：规定输入域可选择多个内容。用于表单组件中，如file/select。
  • required：属性约束表单元在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。
  • pattern：属性规定用于验证输入字段模式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5新增属性</title>
</head>
<body>
    <!--contenteditable-->
    <p contenteditable="true">contextEditable</p>

    <!--hidden-->
    <div class="box">box1</div>
    <div class="box" hidden>box2</div>
    <div class="box">box3</div>

    <!--data-*：属性用于存储页面或应用程序的私有自定义数据。一般用于传值-->
    <p data-id="0001">只是撒</p>

    <!--multiple：规定输入域可选择多个内容。用于**表单组件**中，如file/select。-->
    <!--按住ctrl实现多选-->
    <select name="" id="" multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <!--required：属性约束表单元在提交前必须输入值。-->
    <form action="#">
        <input type="text" placeholder="请输入用户名：" required><br/><!--为正则写法-->
        <input type="email" placeholder="请输入邮箱："><br/>
        <input type="submit">
    </form>

    <!--pattern：属性规定用于验证输入字段模式。-->
    <form action="#">
        <input type="text" placeholder="请输入用户名：" required pattern="[A-Za-z0-9] {4,6}"><br/><!--为正则写法-->
        <input type="email" placeholder="请输入邮箱："><br/>
        <input type="submit">
    </form>
</body>
</html>

6.5 HTML5新表单操作

6.5.1 表单组件

  • color：颜色

  • email：邮箱，自带邮件格式验证

  • url：网址，自带格式验证

  • tel：电话号码

  • number：数字，自带格式验证
    有属性min/max/step

  • range：范围

  • search：搜索

  • date：日期

  • datetime：日期时间

  • datetime-local：本地日期时间

  • year：年份

  • time：时间

  • month：月份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5新表单操作</title>
</head>
<body>
<!--* color：颜色-->
<form action="#">
    <input type="color"><br>
</form>
<!--* email：邮箱-->
<form action="#">
    <input type="email"><br>
    <input type="submit"><br>
</form>
<!--* url：网址-->
<!--* tel：电话号码-->
<!--* number：数字-->
<!--* range：范围-->
<!--* search：搜索--><!--* date：日期-->
<!--* date：日期-->
<!--* datetime：日期时间-->
<!--* datetime-local：本地日期时间-->
<!--* year：年份-->
<!--* time：时间-->
<!--* month：月份-->
<form action="#">
    <input type="tel"><br>
    <input type="url"><br>
    <input type="number" step="10" min="100" max="200"><br>
    <input type="range" class="type" value="20"><br>
    <input type="search"><br>
    <input type="date"><br>
    <input type="datetime"><br>
    <input type="datetime-local"><br>
    <input type="week"><br>
    <input type="time"><br>
    <input type="month"><br>
    <input type="submit"><br>
</form>
</body>
</html>

6.5.2 form属性

  • formaction：属性，表单请求地址，更改表单的action属性值（数据提交位置）
  • formenctype：修改表单请求类型
  • formmethod：修改数据提交方法
    • get方式：以字节为单位提交（只接受ASCII）；以明文提交；提交信息会显示在地址栏中；在浏览器中回退是无害的；get会被浏览器主动缓存；get和post在传输字节上一般都没有限制，但不排除个别浏览器，可以理解为，get一般不超过2K，post一般不超过2M；get一般不用于传输一些敏感数据，因为传输的数据是裸露的。
    • post方式：以字符为单位提交；以暗文方式提交；在浏览器中回退，post会再次提交请求；post不会被被浏览器主动缓存，除非手动设置。
    • 默认以get方式发请求或者提交
  • form：设置表单元素属于哪个表单
  • novalidate：不验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单属性</title>
</head>
<body>
<!--* formaction：属性，表单请求地址，更改表单的action属性值（数据提交位置）-->
<form action="//baidu.com">
    <input type="submit" formaction="//163.com">
</form>

<!--* formenctype：修改表单请求类型-->
<form action="#" enctype="application/x-www-form-urlencoded"><!--application/x-www-form-urlencoded：普通表单类型-->
    <input type="submit" formenctype="multipart/form-data"><!--multipart/form-data：文件上传的类型-->
</form>

<!--* formmethod：修改数据提交方法-->
<form action="#" method="get">
    <input type="text" name="username">
    <input type="submit" formmethod="get">
</form>

<!--* form：设置表单元素属于哪个表单-->
<form action="#" method="get" id="user-info">
    <input type="text" name="username">
    <input type="submit">
</form>
<input type="password" name="userpwd" form="user-info">

<!--* novalidate：不验证-->
<form action="#" method="get" novalidate>
    <input type="email" name="useremail">
    <input type="submit">
</form>
</body>
</html>

6.5.3 input属性

  • autocomplete：规定输入字段是否应该启用自动完成。
    自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项（值：on/off，默认为on）
    用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用
    为保护敏感数据，如用户账号密码等，避免本地浏览器对他们不安全存储，一般需要关闭
  • autofocus：规定当前页面加载时，input元素应该自动获得焦点，如果使用该属性，则input元素会获得焦点
  • step：规定输入字段的合法数字间隔（step=”3”，合法数字应该为-3，0，3，6，9……），一般搭配max/min属性配合使用，以创建合法值得范围
  • mutiple：多选
  • pattern：正则匹配
  • placeholder：输入提示（也可以用label标签包裹）
  • required：必须输入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input属性</title>
</head>
<body>
<!--autocomplete：规定输入字段是否应该启用自动完成。-->
<form action="#">
    <input type="text" name="username" autocomplete="on">
    <input type="submit">
</form>

<!--autofocus：规定当前页面加载时，input元素应该自动获得焦点-->
<form action="#">
    <input type="text" name="username" autofocus autocomplete="on">
    <input type="submit">
</form>

<!--placeholder：输入提示-->
</body>
</html>

6.6 HTML5代码规范

  • 正确使用文档类型
    请始终在文档首行声明文档类型：<!DOCTYPE html>/<!doctype html>

  • 使用小写元素名，属性名

  • 关闭所有HTML元素

  • 关闭空的HTML元素

  • 属性值引号 双引号

  • 等号后少用空格

  • 图片要加alt属性；定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁

  • 避免长代码

  • HTML注释

  • 样式表

    • 开括号与选择器在同一行上
    • 在开括号之前用一个空格
    • 使用两个字符的缩进
    • 在每个属性与其值之间使用冒号加一个空格
    • 在每一个逗号或者分号之后使用空格
    • 在每一个属性值对（包括最后一个）之后使用分号
    • 只在值包含空格时使用引号来包围值
    • 把闭括号放在新的一行，之前不用空格
    • 避免每行超过80个字符

6.7 课后实训

摘要：

  • 需要引入外部字体link

  • text-shadow: 横向偏移 纵向偏移 模糊度 颜色
    例如：text-shadow: 1px 1px 1px #fff

  • 删除 <audio>被激活后的边框

    1
    2
    3
    4
    audio,video,img {
    	border: 0;
    	outline: none;
    }

  • 加载flash动画和视频，记得给出宽高，因为这样可以有效避免闪烁问题（网速较慢，视频后于文字加载，当视频加载成功，会占据文字位置）

  • 加载flash动画的一种办法

1
2
3
4
5
<section>
    <object data="audio_video/spring.swf" type="application/x-shockwave-flash" width="719" height="428">
        <param name="movie" value="spring.swf">
    </object>
</section>

第七章 CSS3新特性

课程提要

  • 认识CSS3
  • CSS3选择器
  • CSS3文本（加阴影）
  • CSS3边框
  • CSS3背景
  • CSS3颜色
  • CSS3渐变
  • CSS3盒模型

7.1 CSS3简介

CSS3是CSS2.1（层叠样式）技术的升级版本，是对CSSS的一个扩展，1999年开始制订，2001年W3C完成CSS3的工作草案，主要包括：列表模块、盒子模型、语言模型、文字特效、背景和边框、文字特效、多栏布局等模块。

CSS3的主要新特性：

  • 选择器
  • 阴影
  • 形状转换（2D转换为3D）
  • 变形
  • 动画（过渡动画、帧动画）
  • 边框
  • 多重背景
  • 反射
  • 文字
  • 颜色函数（不透明度，rgba、hsl、hsla）
  • 滤镜(filter)
  • 弹性布局
  • 多列布局
  • 盒模型
  • Web字体
  • 媒体查询

CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常做法：加厂商前缀。

  • 主流浏览器内核（面试点）

    • Trident：IE内核
    • Webkit：Chrome和Safari内核
    • Gecko：FireFox内核
    • Blink（Webkit的分支）：Google/Opera内核
    • Tips：
      • 目前国内的浏览器大多都是双核的（IE+Chrome内核）
      • Chrome开发速度最快，市场占有率最高

  • 厂商前缀

    • IE：-ms-

    • Chrome/Safari：-webkit-

    • Firefox：-moz-

    • Opera：-o-

    • (兼容低版本)

7.2 CSS3选择器

高级选择器非常有用，可以减少在标签中的class和ID数量，并让设计师更方便地维护样式表。

  • 属性选择

    • [属性名]

    • [属性名 = 属性值]

    • [属性名 ^= 属性值]

    • [属性名 *= 属性值]

    • [属性名 $= 属性值]

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>CSS3选择器</title>
          <style>
              /*属性选择器*/
              /*
              p[class]{
                  color: #8080ff;
              }*/
              /*p[class^=content]{!*class属性值以content开头*!*/
              /*    color: #8080ff;*/
              /*}*/
              /*p[class$=content]{!*class属性值以content结尾*!*/
              /*    color: #8080ff;*/
              /*}*/
              /*p[class*=p]{!*class属性值以中包含有p*!*/
              /*    color: #8080ff;*/
              /*}*/
          </style>
      </head>
      <body>
      <div class="container">
          <p class="content p1">段落1</p>
          <p class="p2 content">段落2</p>
          <p class="content">段落3</p>
          <p class="content">段落4</p>
          <p class="content p5">段落5</p>
      </div>
      </body>
      </html>

  • 结构性伪类

    • root：匹配html标签,与body选择器效果一样
    • first-child：第一个子元素
    • last-child：最后一个子元素
    • :nth-last-child(n)：倒数第n个子元素
    • :nth-child(n)：第n个子元素
    • :nth-of-type类
    • :nth-of-type(n)
    • :nth-last-of-type(n)
    • :only-child:父元素中仅有一个子元素,不要去考虑子元素
    • :only-of-type:父元素中仅有一个该类元素
    • :empty:没有任何元素，包括文本元素，即查找空元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3选择器</title>
        <style>
            /*结构性伪类*/
            /*1.root：匹配html标签,与body选择器效果一样*/
            :root{
                background-color: black;
            }

            /*2.子元素选择：匹配父元素中连续的子元素
            first-child：第一个子元素
            last-child：最后一个子元素
            :nth-last-child(n)：倒数第n个子元素
            :nth-child(n)：第n个子元素
            */
            /*p:first-child{*/
            /*    color: white;*/
            /*}*/
            /*p:last-child{*/
            /*    color: red;*/
            /*}*/
            /*p:nth-child(3){*/
            /*    color: deepskyblue;*/
            /*}*/
            /*p:nth-last-child(2n){!*2n表示2的倍数：1、2、4、6……或者3n+1：3的倍数加1*!*/
            /*    color: #8080ff;*/
            /*}!*注意：如果p标签不连续，效果可能不好。*!*/

            /*3.
                :nth-of-type类
                :nth-of-type(n)
                :nth-last-of-type(n)
            */
            /*p:nth-of-type(3){!*找的是p标签中的第三个兄弟标签，如果第3个不是p标签，将跳过，继续向下查询，直到找到为止*!*/
            /*    color: #8080ff;*/
            /*}*/
            /*p:nth-child(2){!*找第三个子元素，如果是p标签，就找到了；如果不是，就没找到，且不再继续查找。*!*/
            /*    color: white;*/
            /*}*/
            /*p:nth-last-of-type(2n){!*找的是p标签中的倒数第四个兄弟标签，如果不是p标签，将跳过，继续向上查询，直到查到为止*!*/
            /*    color: red;*/
            /*}!*注意：其实区别就在于到底在选择时无不无视非p标签,p:nth-child(2n)的结果很重要！！！*!*/

            /*4.其他
            :only-child:父元素中仅有一个子元素,不要去考虑子元素
            :only-of-type:父元素中仅有一个兄弟元素
            :empty:没有任何元素，包括文本元素，即查找空元素
            */
            /*p:only-child{!*查找父元素中只有一个标签，且为p标签的元素，不允许有其他标签存在，但在p标签中，可以有子标签。*!*/
            /*    width: 200px;*/
            /*    border: 2px white solid;*/
            /*    color: cyan;*/
            /*}*/
            p:only-of-type{/*选择父元素中，p标签是唯一的，可以有其他标签存在*/
                width: 200px;
                border: 2px white solid;
                color: cyan;
            }
            div:empty{
                width: 200px;
                height: 100px;
                background-color: #8080ff;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <p class="content p1">段落1</p>
        <p class="p2 content">段落2</p>
        <div class="box">div-box</div>
        <p class="content">段落3</p>
        <p class="content">段落4</p>
        <p class="content p5">段落5</p>

        <div><p>pppppppp</p></div>
        <div><p>pppppppp <span>span</span></p></div>
        <div><p>pppppppp</p><div>div</div></div>
        <div><p>pppppppp</p><p>div</p></div>

        <div class="test"></div>
    </div>
    </body>
    </html>

  • 目标伪类

    • :target：匹配URL指向的元素。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>CSS3选择器</title>
          <style>
              p,div{
                  height: 600px;
              }
              /*3.目标伪类
              :target：匹配URL指向的元素。
              */
              p:target{
                  color: deeppink;
              }
          </style>
      </head>
      <body>
          <a href="#jump1">跳转1</a><!--页内跳转-->
          <a href="#jump2">跳转2</a>
          <a href="#jump3">跳转3</a>
          <br><br><br><br><br>
          <br><br><br><br><br>
          <p id="jump1">这是段落1的内容</p><!--这里的ID表示设置了一个锚点，用来实现页内跳转的。-->
          <div id="jump2">这是段落2的内容</div>
          <p id="jump3">这是段落3的内容</p>
      </body>
      </html>

  • UI元素状态伪类

    • :checked：只在Opera浏览器中有效
    • :enabled
    • :disabled
    • :selection：设置选中对象颜色

  • 否定伪类

    • :not()

  • 通用兄弟元素选择器

    • EF： EF 选择E元素之后的F元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3选择器</title>
    <style>
        /*3.目标伪类
        :target：匹配URL指向的元素。
        */
        /*p,div{*/
        /*    height: 600px;*/
        /*}*/
        /*p:target{*/
        /*    color: deeppink;*/
        /*}*/

        /*4.UI元素（表单元素）状态伪类*/
        input:disabled{
            background-color: #8080ff;
        }
        input:enabled{
            background-color: lightcoral;
            color: white;
        }
        input:checked{/*只在Opera浏览器中有效*/
            color: greenyellow;
        }
        ::selection{/*高亮显示被选中文本，注意是双冒号！！！*/
            color:salmon;
        }

        /*5.否定伪类*/
        /*.container :not(p){!*注意：要有空格！！！！！！！*!*/
        /*    background-color: black;*/
        /*    color: white;*/
        /*}*/

        /*6.通用兄弟元素选择器：E~F  选择E元素之后的F元素*/
        .div1 ~ .div2{
            color: red;
        }

    </style>
</head>
<body>
    <a href="#jump1">跳转1</a><!--页内跳转-->
    <a href="#jump2">跳转2</a>
    <a href="#jump3">跳转3</a>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p id="jump1">这是段落1的内容</p><!--这里的ID表示设置了一个锚点，用来实现页内跳转的。-->
    <div id="jump2">这是段落2的内容</div>
    <p id="jump3">这是段落3的内容</p>

    <form action="">
        <input type="text" disabled> <br>
        <input type="text"> <br>
        <input type="text"> <br>
        <input type="checkbox" name="face" checked>党员
        <input type="checkbox" name="face">共青团员
        <input type="checkbox" name="face">无党派人士 <br>

        <select>
            <option>大前端开发</option>
            <option selected>大数据开发</option>
            <option>UI设计</option>
        </select>
    </form>

    <div class="container">
        <p>p1</p>
        <p>p2</p>
        <span>span</span>
        <em>em</em>
    </div>

    <div class="test">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <strong>strong</strong>
        <div class="div3"><span>div3</span></div>
    </div>
</body>
</h

7.3 CSS文本

7.3.1 文本阴影

主流浏览器都支持，不需要去做兼容！

1
text-shadow: h-shadow v-shadow blur spread color inset;

属性值：

  • h-shadow：必须。水平阴影位置。允许负值，指定阴影水平的偏移，即阴影在x轴的位置。值为正数时，阴影在元素右侧；值为负数时，阴影在元素的左侧。
  • v-shadow：必须。垂直阴影位置。允许负值，指定阴影垂直的偏移，即阴影在y轴的位置。值为正数时，阴影在元素下侧；值为负数时，阴影在元素的上侧。
  • blur：可选。模糊距离。设置阴影的模糊半径，值为0意味着该阴影是固态而锋利的，完完全全没有模糊效果。blur值越大，阴影则更不锋利而更朦胧/模糊。负值是不合法的，会被自动修正为0。
  • spread：可选。阴影的尺寸。改变阴影的大小，其值可以是正负值，如果为正，整个阴影都会延展扩大，反之值为负值，则缩小。
  • color：可选。阴影的颜色。
  • inset：可选。将外部阴影(outset)改为内部阴影。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3文本阴影</title>
    <style>
        h1{
            text-shadow: -2px -3px 5px #8080ff;
        }
    </style>
</head>
<body>
    <h1>这是文本阴影测试！</h1>
</body>
</html>

7.3.2 文本自动换行

主流浏览器都支持，不需要去做兼容！

1
word-wrap: normal | break-word;

属性值word-wrap允许长单词或者URL换行到下一行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3文本自动换行</title>
    <style>
        p[id="1"]{
            width: 200px;
            border: 1px black solid;
            word-wrap: normal;
            -ms-word-wrap: normal;/*兼容IE*/
        }
        p[id="2"]{
            width: 200px;
            border: 1px black solid;
            word-wrap: break-word;
            -ms-word-wrap: break-word;/*兼容IE*/
        }
    </style>
</head>
<body>

    <p id="1">
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit.
    </p>

    <p id="2">
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit.
    </p>
</body>
</html>

7.3.3 单词拆分

主流浏览器都支持，不需要去做兼容！

1
word-break: normal|break-all|keep-all;

属性值：

  • normal：使用浏览器默认的换行规则。
  • break-all：允许在单词内换行。
  • keep-all：只能在半角空格或连字符处换行。（中英文逗号均无效！）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3单词拆分</title>
    <style>
        p[id="0"]{
            width: 200px;
            border: 1px black solid;
        }
        p[id="1"]{
            width: 200px;
            border: 1px black solid;
            word-break: break-all;
        }
        p[id="2"]{
            width: 200px;
            border: 1px black solid;
            word-break: keep-all;
        }
        p[id="3"]{
            width: 200px;
            border: 1px black solid;
            word-break: normal;
        }
    </style>
</head>
<body>

<p id="0">
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit.
</p>
<p id="1">
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit.
</p>
<p id="2">
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit.
</p>
<p id="3">
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit.
</p>
</body>
</html>

7.3.4 文本拆分(略)

所有主流浏览器都不支持，需要去做兼容！

1
text-wrap: naormal|none|unrestricted|suppress;

属性值：

  • normal：只在允许的换行点进行换行
  • none：不换行。元素无法容纳的文本会溢出。
  • unrestricted：在任意两个字符间换行。
  • suppress：压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

7.3.5 文本溢出（重要）

1
text-overflow: clip|ellipsis|string;

属性规定当文本溢出包含元素发生的事情。

属性值：

  • clip：修剪文本。
  • ellipsis：显示省略号来代表被修剪文本。
  • string：使用给定的字符串代表被修剪文本。

单行文本溢出

1
text-overflow: clip|ellipsis|string;

处理文字溢出样式：

1
2
3
4
5
width: px/%/em/rem;
white-space: nowrap; /*不允许折行*/
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;

多行文本溢出（IE9以下版本不支持，主要是谷歌支持）

1
2
3
4
5
6
div{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 行数;
	overflow: hidden;
}

处理文字溢出样式：

1
2
3
4
5
width: px/%/em/rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 行数;
overflow: hidden;

7.4 CSS3边框处理

CSS3对网页中的边框进行了一些改进，主要包括：支持圆角边框、多层边框、边框色彩与图片等。在CSS3中，最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义。

7.4.1 圆角边框

border-radius：属性是一个简写属性，用于设置四个border-*radius属性。

1
border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置radius的四个值。如果省略bottom-left，则与top-right相同；如果省略top-right，则与top-left相同。

四个方位词：

  • top-left
  • top-right
  • bottom-left
  • bottom-right

属性值：

  • length：定义圆角的形状

  • %：以百分比定义圆角的形状

  • 注意：想要形成圆形边框，可以使border-radius为1/2长/宽。

    ​ 或者使border-radius为50%。

实例1：

1
border-radius: 20px;

等价于：

1
2
3
4
border-top-left: 20px;
border-top-right: 20px;
border-bottom-left: 20px;
border-bottom-right: 20px;

实例2：

1
border-radius: 20px 30px;/*左上+右下  右上+左下*/

等价于：

1
2
3
4
border-top-left: 20px;
border-top-right: 30px;
border-bottom-left: 30px;
border-bottom-right: 20px;

实例3：

1
border-radius: 20px 30px 40px;/*左上  右上+左下 右下*/

等价于：

1
2
3
4
border-top-left: 20px;
border-top-right: 30px;
border-bottom-left: 30px;
border-bottom-right: 40px;

实例4：

1
border-radius: 20px 30px 40px 50px;/*左上  右上 右下 左下*/

等价于：

1
2
3
4
border-top-left: 20px;
border-top-right: 30px;
border-bottom-left: 50px;
border-bottom-right: 40px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        .div1{
            width: 600px;
            height: 200px;
            border: 1px solid violet;
            margin: 100px auto;
            -webkit-border-radius: 10px;/*兼容谷歌*/
            -moz-border-radius: 10px;/*兼容火狐*/
            border-radius: 10px;/*默认*/
        }
        .div2{
            width: 200px;
            height: 200px;
            border: 1px solid violet;
            margin: 100px auto;
            -webkit-border-radius: 10%;/*兼容谷歌*/
            -moz-border-radius: 10%;/*兼容火狐*/
            border-radius: 10%;/*默认*/
        }
        .div3{
            width: 200px;
            height: 200px;
            border: 1px solid violet;
            margin: 100px auto;
            -webkit-border-top-left-radius: 50%;/*兼容谷歌*/
            -moz-border-radius-topleft: 50%;/*兼容火狐*/
            border-top-left-radius: 50%;/*默认*/
        }
        img{
            width: 528px;
            height: 326px;
            margin: 100px auto;
            display: block;
            -webkit-border-radius: 0;/*兼容谷歌*/
            -moz-border-radius: 0;/*兼容火狐*/
            border-radius: 0;/*默认*/
        }
        img:hover{/*选中激活圆角*/
            -webkit-border-radius: 50%;/*兼容谷歌*/
            -moz-border-radius: 50%;/*兼容火狐*/
            border-radius: 50%;/*默认*/
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <img src="./imgs/三国杀文姬甄姬.png" alt="测试">
</body>
</html>

7.4.2 CSS3边框阴影(IE9以上支持)

box-shadow：属性向边框添加一个或多个阴影。

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

注释：box-shadow向边框添加一个或多个阴影，该属性由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度为0。

属性值：

  • h-shadow：必须。水平阴影位置。允许负值，指定阴影水平的偏移，即阴影在x轴的位置。值为正数时，阴影在元素右侧；值为负数时，阴影在元素的左侧。
  • v-shadow：必须。垂直阴影位置。允许负值，指定阴影垂直的偏移，即阴影在y轴的位置。值为正数时，阴影在元素下侧；值为负数时，阴影在元素的上侧。
  • blur：可选。模糊距离。设置阴影的模糊半径，值为0意味着该阴影是固态而锋利的，完完全全没有模糊效果。blur值越大，阴影则更不锋利而更朦胧/模糊。负值是不合法的，会被自动修正为0。
  • spread：可选。阴影的尺寸。改变阴影的大小，其值可以是正负值，如果为正，整个阴影都会延展扩大，反之值为负值，则缩小。
  • color：可选。阴影的颜色。
  • inset：可选。将外部阴影(outset默认，但是没有outset值！！！)改为内部阴影。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 边框阴影</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: #8080ff;
            -webkit-box-shadow: 3px 3px 50px 30px deeppink inset;
            -moz-box-shadow: 3px 3px 50px 30px deeppink inset;
            box-shadow: 3px 3px 50px 30px deeppink inset;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

7.4.3 边框图片（IE11.0版本及以上支持）

border-image：属性是一个简写属性。用于设置以下属性：

  • border-image-source：图片路径
  • border-image-slice：图片边框向内偏移
  • border-image-outset：边框图像区域超出边框的量
  • border-image-width：图片边框的宽度
  • border-image-repeat：图片边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

如果省略，设置其默认值

语法

1
border-image: source slice width outset repeat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 边框图片</title>
    <style>
        div,img{
            width: 300px;
            height: 150px;
            border: 10px solid transparent;
        }
        .div1{
            -webkit-border-image: url(./imgs/三国杀文姬甄姬.png) 10 round;/*不要带单位px!!!!!*/
            -moz-border-image: url(./imgs/三国杀文姬甄姬.png) 10 round;/*不要带单位px!!!!!*/
            -o-border-image: url(./imgs/三国杀文姬甄姬.png) 10 round;/*不要带单位px!!!!!*/
            border-image: url(./imgs/三国杀文姬甄姬.png) 10 round;/*不要带单位px!!!!!*/
        }
        .div2{
            -webkit-border-image: url(./imgs/三国杀文姬甄姬.png) 10 repeat;/*不要带单位px!!!!!*/
            -moz-border-image: url(./imgs/三国杀文姬甄姬.png) 10 repeat;/*不要带单位px!!!!!*/
            -o-border-image: url(./imgs/三国杀文姬甄姬.png) 10 repeat;/*不要带单位px!!!!!*/
            border-image: url(./imgs/三国杀文姬甄姬.png) 10 repeat;/*不要带单位px!!!!!*/
        }
        .div3,img{
            -webkit-border-image: url(./imgs/三国杀文姬甄姬.png) 10 stretch;/*不要带单位px!!!!!*/
            -moz-border-image: url(./imgs/三国杀文姬甄姬.png) 10 stretch;/*不要带单位px!!!!!*/
            -o-border-image: url(./imgs/三国杀文姬甄姬.png) 10 stretch;/*不要带单位px!!!!!*/
            border-image: url(./imgs/三国杀文姬甄姬.png) 10 stretch;/*不要带单位px!!!!!*/
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <br>
    <div class="div2"></div><br>
    <div class="div3"></div>

    <img src="./imgs/img_1.png" alt="">
</body>
</html>

7.5 CSS3背景

CSS3允许使用多个属性（比如：background-image、background-repeat、background-size、background-position、background-origin、background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发人者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本。

  • 多重背景
    background：背景色 背景图片 平铺方式 位置,背景色 背景图片 平铺方式 位置……

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多重背景</title>
        <style>
            .div1{
                width: 600px;
                height: 600px;
                margin: 100px auto;
                background-color: #8080ff;
                /*background: url(./imgs/img_1.png) no-repeat,url(./imgs/img.png) no-repeat 0 0,url(./imgs/三国杀夏侯氏.png) no-repeat 0 0;*/
                background-image: url(./imgs/img_1.png) ,url(./imgs/img.png),url(./imgs/三国杀夏侯氏.png);
                background-position: 50% 100%,0 0,0 0;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="div1">

        </div>
    </body>
    </html>

  • background-size：设定背景图像的尺寸。

    语法

    1
    background-size: 固定长度|percentage|cover|contain;

    cover：将背景图扩展至足够大，以使背景图完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。（例如：满足了宽度，但是没有满足高度）

    contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（优先显示完整图像，有空缺就平铺）

  • background-image

    属性值

    • url
    • none
    • inherit：指定背景图像应该从父元素继承。

  • background-origin：指定了背景图像的位置区域。

    语法

    1
    background-origin: padding-box|border-box|content-box;
    • 属性值
      • padding-box：背景图像相对于内边距来定位。（不会填充到边框里面去！）
      • border-box：背景图像相对于边框盒子来定位。
      • content-box：背景图像相对于内容框来定位。（以内容区域为起点）

  • background-clip：设定背景图像的绘制区域。

    语法

    1
    background-clip: border-box|padding-box|content-box;
    • 属性值
      • padding-box：不会填充到边框上。
      • border-box：超出border部分裁剪。
      • content-box：超出内容部分被裁剪。
      • text：文字

  • 区别：clip是裁剪，origin是隐藏。

  • 渐变背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3背景属性</title>
    <style>
        p{
            color: white;
            width: 500px;
            margin: 100px auto 0;
            padding: 10px;
            border: 10px solid rgba(150,150,255,0.46);
            background: url("./imgs/三国杀夏侯氏.png");
            -webkit-background-size: cover;
            background-size: cover;
        }
        /*
        1.background-size：设定背景图像的尺寸。
        2.background-origin：指定了背景图像的位置区域。
        3.background-clip：设定背景图像的绘制区域。
        */
        .div1{
            color: white;
            width: 500px;
            margin: 100px auto 0;
            padding: 10px;
            border: 10px solid rgba(150,150,255,0.46);
            background-image: url(./imgs/三国杀二乔.jpg);
            -webkit-background-origin: padding-box;
            background-origin: padding-box;
            background-repeat: no-repeat;
        }
        .div2{
            color: white;
            width: 500px;
            margin: 100px auto 0;
            padding: 10px;
            border: 10px solid rgba(150,150,255,0.46);
            background-image: url(./imgs/三国杀.bmp);
            -webkit-background-clip: content-box;
            background-clip: content-box;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit</p>
    <div class="div1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit</div>
    <div class="div2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. Dancing is a popular pastime to many people all over the world. Way back to past centuries, and even today, tribal people engage in dancing as a form of worship or as a part of a ceremony in a celebration. On such occasions, dancing can be very solemn. In modern times, dancing appeals to different people for different reasons. Young people often include dancing in parties or at other social gatherings. It seems to be an incentive for them to gather. They look forward to dancing into the night during parties without feeling fatigue. To the elderly, the steps in dancing are reduced with a slower tempo in the music. They gather in community centers to learn folk dance and, at the same time, to know one another in such informal interactions. Personally, I doubt the effectiveness of dancing as a major role in keeping one's body healthy and in good shape. Activities such as jogging, swimming and playing games are more effective for attaining good health. They can burn off calories in our bodies and develop our muscles. To me, there are more meaningful and effective ways to keep fit</div>
</body>
</html>

background-image: 线性渐变|径向渐变。

7.6 CSS3颜色函数（均兼容）

  • RGBA(r,g,b,a)：

    rgb配色方案

    r:red 取值范围：0~255 / 0 ~100%

    g:green 取值范围：0~255 / 0 ~100%

    b:blue 取值范围：0~255 / 0 ~100%

    a:不透明度 取值范围：0~1之间的小数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3颜色</title>
        <style>
            .container{
                width: 500px;
                height: 300px;
                position: relative;
                overflow: hidden;
                background-color: blueviolet;
            }
            .div1,.div2{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                /*background-color: rgb(150,150,255);*/
            }
            .div1{
                background-image: url("./imgs/三国杀.bmp");/*使用不透明度调整*/
            }
            .div2{
                background-color: rgba(0, 125, 0, 0.1);/*使用不透明度调整*/
            }
            /*.div2:hover{
                background-color: hsla(150,50%,50%,0.1);/*使用不透明度调整*/
            } */
        </style>
    </head>
    <body>
        <div class="container">
        <div class="div1"></div>
        <div class="div2"></div></div>
    </body>
    </html>

  • HSL(h,s,l)

    h:色调 取值范围：0~360

    s:饱和度 取值范围：0~100%

    l:亮度 取值范围：0~100%

  • HSLA(h,s,l,a)

    h:色调 取值范围：0~360

    s:饱和度 取值范围：0~100%

    l:亮度 取值范围：0~100%

    a:不透明度 取值范围：0~1之间的小数

  • 注意：可以使用hover实现元素遮罩层/蒙版层。(mask)

  • Opacity：设置元素的不透明度级别，大多数情况下用于做元素的遮罩效果。

    • 取值范围：0~1之间的一个小数。

    • 不透明度不为1的元素叠加在另一个元素上，会有一个计算过程。

    • IE8及以下不支持Opacity，处理兼容的方式：再添加一行代码

      1
      filter:alpha(opacity = 数值);/*数值范围：0-100之间*/

7.7 CSS3渐变

主要用于设置背景色/制作三维图像。

  • 线性渐变

    语法

    1
    background: linear-gradient(方向, 颜色l 百分比, 颜色2 百分比,……)
    • 方向：
      • to left：从右向左渐变
      • to right：从左向右渐变
      • to top：从下向上渐变
      • to bottom：从上向下渐变
      • to top right：从左下角向右上角渐变
      • to top left：从右下角向左上角渐变
      • to bottom left：从右上角向左下角渐变
      • to bottom right：从左上角向右下角渐变
    • 角度：
      • 45度角：45deg
    • 颜色取值：16进制、颜色函数rgb/rgba/hsl/hsla、颜色单词
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>线性渐变</title>
        <style>
            .div1{
                width: 600px;
                height: 400px;
                /*background: linear-gradient(to right,#8080ff,#00ffff);*/
                /*background: linear-gradient(to bottom,#8080ff,#00ffff);*/
                /*background: linear-gradient(to bottom left,#8080ff,#00ffff,#00ff00);*/
                /*background: linear-gradient(10deg,#8080ff,#00ffff,#00ff00,deepskyblue);*/
                background: linear-gradient(10deg,#8080ff 30%,#00ffff,#00ff00,deepskyblue);
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
    </html>

  • 径向渐变（沿半径方向渐变）

    语法

    1
    background: radial-gradient(at 圆心位置（默认center） 形状 渐变大小, start-color 百分比,……,last-color 百分比);

    shape：形状

    • ellipse：椭圆径向渐变（默认）
    • circle：⚪径向渐变

    size： 渐变大小

    • farthest-corner：渐变半径长度为从圆心到离圆心最远的角(默认)
    • closest-side：渐变半径长度为从圆心到离圆心最近的边
    • closest-corner：渐变半径长度为从圆心到离圆心最近的角
    • farthest-side：渐变半径长度为从圆心到离圆心最远的边

    position：位置

    • center:默认值，设置圆心在中心位置。
    • top：设置圆心在顶部位置。
    • bottom：设置圆心在底部位置。
    • at 横坐标 纵坐标：设置圆心的位置。

  • 文字渐变

    语法：

    1
    2
    3
    4
    5
    标签{
    	background-image: 线性渐变/径向渐变；
    	-webkit-background-clip: text;
    	-webkit-fill-color: transparent;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 文字渐变</title>
    <style>
        p{
            background-image: linear-gradient(30deg,#87faf8,#2300ff,#8080ff);
            background-image: -webkit-linear-gradient(30deg,#87faf8,#2300ff,#8080ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 1px 1px #ccc;
        }
    </style>
</head>
<body>
    <p> 只是因为你的存在，我没有遇见更喜欢的人。</p>
    <p> 因为我依然很喜欢你，所以不敢告诉你。所以你永远不知道我有多喜欢你。这样在有生之年，我还可以看到你。</p>
</body>
</html>

7.8 CSS3盒模型

  • box-sizing：允许你以某种方式定义某些元素，以适应指定的区域。
    box-sizing: content-box/border-box;
    • 火狐/谷歌兼容低版本，需要写厂商前缀。
    • border-box：把边框纳入文本内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3盒模型</title>
    <style>
        .container{
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
            border: 5px solid #8080ff;
            padding: 20px;
            /*文本内容的实际宽度为200px（包含：文本宽度150px+边框10px+padding：40px）*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            /*文本内容的实际宽度为250px（包含：文本宽度200px+边框10px+padding：40px）*/
            /*-webkit-box-sizing: border-box;*/
            /*-moz-box-sizing: border-box;*/
            /*box-sizing: border-box;*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

实训

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第七次课程实训</title>
    <link rel="stylesheet" href="./CSS/第7次作业.css">
</head>
<body>
<div class="seven">
    <header>
        <h2>gra<span>V</span>is</h2>
        <div class="banner">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Features</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">Pricing</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </header>
    <div class="main">
    <section>
        <div class="left">
            <h1>HTML5</h1>
            <p class="p1">因为我依然很喜欢你，所以不敢告诉你。所以你永远不知道我有多喜欢你。这样在有生之年，我还可以看到你。</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="right">
            <figure>
                <h4>HTML</h4>
                <img src="./imgs/三国杀二乔.jpg" alt="">
                <p>使用HTML</p>
            </figure>
        </div>

    </section>
    <footer>
        <div class="left_side">
            <h4>Last works</h4>
            <figure>
                <img src="./imgs/三国杀文姬甄姬.png" alt="">
                <h3>ABCD</h3>
                <p>zhuzhuzhuzhuzhzzhuzhuzhuzhuzhuhzhuzuhzzhzuzhuzhuzuhzhuzhuhuzuzhhzuhzuhzuzhuhzuhzuhz</p>
            </figure>
            <figure>
                <img src="./imgs/三国杀文姬甄姬.png" alt="">
                <h3>ABCD</h3>
                <p>zhuzhuzhuzhuzhzzhuzhuzhuzhuzhuhzhuzuhzzhzuzhuzhuzuhzhuzhuhuzuzhhzuhzuhzuzhuhzuhzuhz</p>
            </figure>
            <figure>
                <img src="./imgs/三国杀文姬甄姬.png" alt="">
                <h3>ABCD</h3>
                <p>zhuzhuzhuzhuzhzzhuzhuzhuzhuzhuhzhuzuhzzhzuzhuzhuzuhzhuzhuhuzuzhhzuhzuhzuzhuhzuhzuhz</p>
            </figure>
        </div>
        <div class="right_side">
            <h3>questions</h3>
            <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>
            </ul>
        </div>
    </footer>
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 600px;
    background-image: linear-gradient(to bottom,#aaa,#eee,#aaa);
}
.seven{
    width: 100%;
}
h2{
    padding-left: 20px;
    color: #666;
}
h2 span{
    color: white;
}
.banner{
    width: 95%;
    background-color: #ffffff;
    margin: 10px auto;
    line-height: 50px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 3px 3px 2px black;
    -moz-box-shadow: 3px 3px 2px black;
    box-shadow: 3px 3px 2px black;
}
ul{
    overflow: hidden;
    list-style: none;
}
.banner ul li{
    float: left;
    margin: 10px;
    color: #999;
    text-shadow: 1px 1px 1px black ;
}
.banner a:hover{
    color: #87faf8;
}
a{
    text-decoration: none;
}
.main{
    width: 95%;
    background-color: white;
    margin: 0 auto 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 2px 2px 2px black;
    -moz-box-shadow: 2px 2px 2px black;
    box-shadow: 2px 2px 2px black;
}
section{
    margin: 50px 20px 10px;
    border: 2px solid #aaa;
    border-top: none;
    overflow: hidden;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 2px black;
    -moz-box-shadow: 2px 2px 2px black;
    box-shadow: 2px 2px 2px black;
}
.left{
    width: 50%;
    float: left;
    margin-bottom: 150px;
}
.right{
    width: 50%;
    float: left;
}
.left h1{
    margin: 50px 0 20px 50px;
    font-size: 100px;
    font-weight: bolder;
}
.left p{
    margin: 0 0 50px 50px;
    width: 200px;
    color: black;
    text-shadow: 2px 2px 1px #f1f2f6;
    font-weight: bold;
    opacity: 0.8;
    filter:alpha(opacity = 80);
}
.left a{
    margin-left: 50px;
    padding: 10px 20px;
    font-weight: bolder;
    width: 150px;
    font-size: 20px;
    border: #8080ff 10px solid;
    border-radius: 40px;
    word-spacing: 1px;/*调整字间距*/
}
.left a:hover{
    color: salmon;
}
section .right figure{
    margin: 50px 0 0 100px;
}
section .right figure img{
    border-radius: 50px;
}
section .right figure h4{
    text-align: center;
}
section .right figure p{
    text-align: center;
}
footer{
    overflow: hidden;
}
footer .left_side{
    float: left;
    width: 80%;
    clear: none;
    overflow: hidden;
}
footer .left_side h4{
    padding: 20px 0 20px 20px;
    font-weight: normal;
}
.left_side figure{
    text-align: center;
    width: 210px;
    float: left;
    margin: 0 50px 0 20px;
}
.left_side figure h3{
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.left_side figure p{
    opacity: 0.5;
    filter:alpha(opacity=100);
    margin: 10px 0;
    width: 100%;
    line-height: 1.5em;
    word-wrap: normal;
    word-break: break-all;
}
.left_side figure img{
    opacity: .5;
    filter:alpha(opacity=50);
    width: 100%;
}
.left_side figure:hover img{
    opacity: 1;
    filter:alpha(opacity=100);
    width: 100%;
}
.left_side figure:hover p{
    opacity: 1;
    filter:alpha(opacity=100);
    width: 100%;
}
.left_side figure:hover h3{
    opacity: 100;
    filter:alpha(opacity=100);
    width: 100%;
}
footer .right_side{
    width: 15%;
    border: 1px #aaa solid;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: linear-gradient(to top, #8080ff,#00ffff,darkblue);
    background: -webkit-linear-gradient(to top, #8080ff,#00ffff,darkblue);
    float: left;
}
footer .right_side h3{
    font-weight: normal;
    color: white;
    padding: 8px 0 8px 15px;
    background-color: #333;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}
footer .right_side ul{
    margin-left: 10px;
}
footer .right_side ul li a{
    opacity: 0.7;
    color: #f1f2f6;
    filter:alpha(opacity=0.7);
    line-height: 1.5em;
    margin: 5px 0 5px 10px;
}
footer .right_side ul li a:hover{
    opacity: 1;
    color: black;
    filter:alpha(opacity=1);
}

第八章 CSS3属性-动画

课程提要

  • 盒子的变形
  • CSS3过渡
  • CSS3动画

8.1盒子的变形

transform属性向元素应用2D或者3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

8.1.1 CSS3 2D变形

2D Transform方法

函数 描述
matrix(n,n,n,n,n,n) 定义2D转换，使用六个值得矩阵。
translate(x,y) 定义2D转换，沿着X和Y轴移动元素。（位移）
translateX(n) 定义2D转换，沿着X轴移动元素。
translateY(n) 定义2D转换，沿着Y轴移动元素。
scale(x,y) 定义2D缩放转换，改变元素的宽度和高度。（缩放）
scaleX(n) 定义2D缩放转换，改变元素的宽度。
scaleY(n) 定义2D缩放转换，改变元素的高度。
rotate(angle) 定义2D旋转，在参数中规定角度。(-360deg ~ 360deg) （旋转）
skew(x-angle,y-angle) 定义2D倾斜转换，沿着X和Y轴。 （变形）
skewX(angle) 定义2D倾斜转换，沿着X轴。
skewY(angle) 定义2D倾斜转换，沿着Y轴。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*-webkit-transform: translate(100px,200px);!*兼容谷歌和苹果*!*/
            /*-moz-transform: translate(100px,200px);!*兼容火狐*!*/
            /*-ms-transform: translate(100px,200px);!*兼容IE*!*/
            /*-o-transform: translate(100px,200px);!*兼容opera浏览器*!*/
            /*transform: translate(100px,200px);!*兼容W3C浏览器*!*/

            /*可以为负值*/
            /*-webkit-transform: translate(-100px,200px);!*兼容谷歌和苹果*!*/
            /*-moz-transform: translate(-100px,200px);!*兼容火狐*!*/
            /*-ms-transform: translate(-100px,200px);!*兼容IE*!*/
            /*-o-transform: translate(-100px,200px);!*兼容opera浏览器*!*/
            /*transform: translate(-100px,200px);!*兼容W3C浏览器*!*/

            /*!*只带一个参数，该参数代表的是X方向位移为位移值，y方向位移值为0*!*/
            /*-webkit-transform: translate(100px);!*兼容谷歌和苹果*!*/
            /*-moz-transform: translate(100px);!*兼容火狐*!*/
            /*-ms-transform: translate(100px);!*兼容IE*!*/
            /*-o-transform: translate(100px);!*兼容opera浏览器*!*/
            /*transform: translate(100px);!*兼容W3C浏览器*!*/

            /*-webkit-transform: translateX(100px);!*兼容谷歌和苹果*!*/
            /*-moz-transform: translateX(100px);!*兼容火狐*!*/
            /*-ms-transform: translateX(100px);!*兼容IE*!*/
            /*-o-transform: translateX(100px);!*兼容opera浏览器*!*/
            /*transform: translateX(100px);!*兼容W3C浏览器*!*/

            -webkit-transform: translateY(100px);/*兼容谷歌和苹果*/
            -moz-transform: translateY(100px);/*兼容火狐*/
            -ms-transform: translateY(100px);/*兼容IE*/
            -o-transform: translateY(100px);/*兼容opera浏览器*/
            transform: translateY(100px);/*兼容W3C浏览器*/
        }
    </style>
    <meta charset="UTF-8">
    <title>CSS3 2D变换</title>
</head>
<body>
    <div class="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 2D动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #8080ff;
            margin: 200px auto;
            /*
            2个参数：第一个参数为横向放缩比例，第二个参数为纵向放缩比例。
            1个参数；纵向和横向放缩比例均为参数值。
            */
            /*-webkit-transform: scale(2);*/
            /*-moz-transform: scale(2);*/
            /*-ms-transform: scale(2);*/
            /*-o-transform: scale(2);*/
            /*transform: scale(2);*/

            /*-webkit-transform: scaleX(2);*/
            /*-moz-transform: scaleX(2);*/
            /*-ms-transform: scaleX(2);*/
            /*-o-transform: scaleX(2);*/
            /*transform: scaleX(2);*/
            
            -webkit-transform: scaleY(2);
            -moz-transform: scaleY(2);
            -ms-transform: scaleY(2);
            -o-transform: scaleY(2);
            transform: scaleY(2);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 2D动画</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            height: 200px;
            width: 200px;
            background-color: #8080ff;
            margin: 200px auto;

            /*顺时针旋转*/
            /*-webkit-transform: rotate(10deg);*/
            /*-moz-transform: rotate(10deg);*/
            /*-ms-transform: rotate(10deg);*/
            /*-o-transform: rotate(10deg);*/
            /*transform: rotate(10deg);*/

            /*rotate()取值范围-360deg ~ 360deg*/
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -ms-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 2D转换</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            height: 200px;
            width: 200px;
            background-color: #8080ff;
            margin: 200px auto;

            /*两个参数，前横后纵*/
            /*-webkit-transform: skew(20deg,20deg);*/
            /*-moz-transform: skew(20deg,20deg);*/
            /*-ms-transform: skew(20deg,20deg);*/
            /*-o-transform: skew(20deg,20deg);*/
            /*transform: skew(20deg,20deg);*/

            /*一个参数，仅仅是横向偏移*/
            /*-webkit-transform: skew(20deg);*/
            /*-moz-transform: skew(20deg);*/
            /*-ms-transform: skew(20deg);*/
            /*-o-transform: skew(20deg);*/
            /*transform: skew(20deg);*/

            /*纵向扭曲*/
            /*-webkit-transform: skewY(20deg);*/
            /*-moz-transform: skewY(20deg);*/
            /*-ms-transform: skewY(20deg);*/
            /*-o-transform: skewY(20deg);*/
            /*transform: skewY(20deg);*/

            /*纵向扭曲*/
            -webkit-transform: skewX(20deg);
            -moz-transform: skewX(20deg);
            -ms-transform: skewX(20deg);
            -o-transform: skewX(20deg);
            transform: skewX(20deg);
        }
        </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

matrix(a,b,c,d,e,f)方法

matrix()方法将所有2D转换方法组合在一起。

matrix()方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。

定义2D变形转换，使用了六个值得矩阵，表示如下：

a c e

b d f

0 0 1

  • matrix用一个3行3列的矩阵表示。

    a和d：表示缩放，如果没有缩放，值为1

    b和c：表示扭曲，如果没有扭曲，值为0

    e和f：表示位移，如果没有位移，值为0

  • 如果旋转角度为θ，它影响到a\b\c\d的值：

    a = cosθ

    b = sinθ

    c = -sinθ

    d = cosθ

  • 如果扭曲skew(θ1,θ2)，会影响到b和c的值：

    b = tanθ1

    c = tanθ2

  • 每次旋转和扭曲都会产生一个新的矩阵，最终形成的多个矩阵要做乘法运算。

  • 如果对一个元素同时有旋转、扭曲、缩放和位移，这时需要用到多个矩阵相乘，但是要优先考虑旋转和缩放！！！！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>matrix()方法</title>
    <style>
        /*需求：将div右移100px，下移200px，旋转30deg，x轴缩放1.5倍，y轴缩放2倍。*/
        .box{
            width: 200px;
            height: 150px;
            background-color: red;
            margin: 200px auto;
            color: white;
            /*!*方法一：*!*/
            /*-webkit-transform: translate(100px,200px) scale(1.5,2.0) rotate(30deg);*/
            /*-moz-transform: translate(100px,200px) scale(1.5,2.0) rotate(30deg);*/
            /*-ms-transform: translate(100px,200px) scale(1.5,2.0) rotate(30deg);*/
            /*-o-transform: translate(100px,200px) scale(1.5,2.0) rotate(30deg);*/
            /*transform: translate(100px,200px) scale(1.5,2.0) rotate(30deg);*/

            /*方法2：*/
            /*解法：
            1.缩放（1.5，2.0），形成一个矩阵a。
            [1.5 0   0
            0   2   0
            0   0   1]
            2.旋转30deg后，形成一个矩阵b。
            [0.866   -0.5    0
            0.5     0.866   0
            0       0       1]
            3.上面两个矩阵相乘，做乘法运算a*b。
            [0.866   -0.5    0          [1.5    0    0          [1.299  -1      0
            0.5     0.866   0       *   0       2    0      =    0.75   1.732   0
            0       0       1]          0       0    1]          0      0       1]
            4.带入偏移即可
            [1.299  -1      100
            0.75    1.732   200
            0       0       1]
            */
            -webkit-transform: matrix(1.299,0.75,-1,1.732,100,200);
            -moz-transform: matrix(1.299,0.75,-1,1.732,100,200);
            -ms-transform: matrix(1.299,0.75,-1,1.732,100,200);
            -o-transform: matrix(1.299,0.75,-1,1.732,100,200);
            transform: matrix(1.299,0.75,-1,1.732,100,200);
        }
    </style>
</head>
<body>
    <div class="box">
        matrix()函数
    </div>
</body>
</html>

transform-origin属性：调整元素的基点

允许改变被转换元素的位置

语法

1
transform-origin: x-axis y-axis c-axis;

属性值：

  • x-axis：定义视图被置于X轴的何处。可能值：left/center/right/length/%
  • y-axis：定义视图被置于Y轴的何处。可能值：top/center/bottom/length/%
  • z-axis：定义视图被置于Z轴的何处。可能值：length
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-origin</title>
    <style>
        .container{
            height: 300px;
            width: 400px;
            margin: 200px auto;
            border: 3px solid salmon;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #8080ff;

            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
            /*默认旋转中心：(x/2,y/2)处/对角线交点*/
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            transform-origin: 0 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box"></div>
</div>
</body>
</html>

8.1.2 CSS3 3D变形

perspective

  • perspective属性

    perspective属性定义3D元素视距的距离，以像素计。该属性允许您改变3D元素查看3D元素的视图。当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。

    • 注意：perspective属性只影响3D转换元素。

    • 语法：

      1
      perspective: number|none;

      number：元素距离视图的距离，以像素计。

      none：默认值，与0相同，不设置透视。

    • 主流浏览器都不支持，谷歌要加-webkit，或在长度后带单位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>perspective属性</title>
    <style>
        .father{
            position: relative;
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 200px auto;
            border: 3px solid #8080ff;
        }
        .son{
            width: 100px;
            height: 50px;
            padding: 50px;
            position: absolute;
            background-color: #00ffff;
            -webkit-transform: rotateX(45deg);
            -moz-transform: rotateX(45deg);
            -ms-transform: rotateX(45deg);
            -o-transform: rotateX(45deg);
            transform: rotateX(45deg);
        }
        .father:hover{
            -webkit-perspective: 150px;
            -moz-perspective: 150px;
            -ms-perspective: 150px;
            perspective: 150px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">

    </div>
</div>


</body>
</html>

transform-style

transform-style属性规定如何在3D空间中呈现被嵌套元素(子元素)。

  • 注意：该属性必须和transform属性一起使用。

  • 语法：

    1
    transform-style: flat|preserve-3d;

    flat：子元素将不保留其3D位置。

    preserve-3d：子元素将保留其3D位置。

rotate方法

rotateX rotateY

rotateZ：3D空间旋转指定角度，沿着垂直于Z轴的方向顺时针旋转。

X、Y、Z轴的三维立体感！！！
X平行纸面，
Y平行直面。
Z垂直纸面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制立方体</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            position: relative;
            -webkit-perspective: 500px;
            -moz-perspective: 500px;
            -ms-perspective: 500px;
            perspective: 500px;
            margin: 200px auto;
        }
        .box div{
            position: absolute;
            border: 3px solid #00ffff;
        }
        .front,.back{
            width: 300px;
            height: 200px;
            /*background-color: #8080ff;*/
        }
        .left,.right{
            width: 100px;
            height: 200px;
            left: 100px;
            /*background-color: deeppink;*/
        }
        .top,.bottom{
            width: 300px;
            height: 100px;
            top: 50px;
            /*background-color: salmon;*/
        }
        .front{
            -webkit-transform: rotateY(0) translateZ(50px);
            -moz-transform: rotateY(0) translateZ(50px);
            -ms-transform: rotateY(0) translateZ(50px);
            -o-transform: rotateY(0) translateZ(50px);
            transform: rotateY(0) translateZ(50px);
        }
        .back{
            -webkit-transform: rotateY(180deg) translateZ(50px);
            -moz-transform: rotateY(180deg) translateZ(50px);
            -ms-transform: rotateY(180deg) translateZ(50px);
            -o-transform: rotateY(180deg) translateZ(50px);
            transform: rotateY(180deg) translateZ(50px);
        }
        .left{
            -webkit-transform: rotateY(-90deg) translateZ(150px);
            -moz-transform: rotateY(-90deg) translateZ(150px);
            -ms-transform: rotateY(-90deg) translateZ(150px);
            -o-transform: rotateY(-90deg) translateZ(150px);
            transform: rotateY(-90deg) translateZ(150px);
        }
        .right{
            -webkit-transform: rotateY(90deg) translateZ(150px);
            -moz-transform: rotateY(90deg) translateZ(150px);
            -ms-transform: rotateY(90deg) translateZ(150px);
            -o-transform: rotateY(90deg) translateZ(150px);
            transform: rotateY(90deg) translateZ(150px);
        }
        .top{
            -webkit-transform: rotateX(90deg) translateZ(100px);
            -moz-transform: rotateX(90deg) translateZ(100px);
            -ms-transform: rotateX(90deg) translateZ(100px);
            -o-transform: rotateX(90deg) translateZ(100px);
            transform: rotateX(90deg) translateZ(100px);
        }
        .bottom{
            -webkit-transform: rotateX(-90deg) translateZ(100px);
            -moz-transform: rotateX(-90deg) translateZ(100px);
            -ms-transform: rotateX(-90deg) translateZ(100px);
            -o-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>
</div>
</body>
</html>

8.2 CSS3过渡

transition属性是个简写属性，用于设置四个过渡属性。

  • transition-property：属性名（单个或者一个列表）/all
  • transition-duration：动画持续时间
  • transition-timing-function：动画函数
  • transition-delay：动画延时时间

第一个、第二个属性是必不可少的。

注释：请始终设置transition-duration属性，否则为0，就不会产生过渡效果。

简洁用法：

1
xxxxxxxxxx xxxxxxxxxx  transition: property duration timing-function delay  

  • 可以使用的属性：

    • 颜色：color background-color border-color outline-color

    • 位置：background-position left right top bottom

    • 长度：max-height max-width min-height min-width width height

      border-width margin padding outline-width outline-offset font-size

      line-height text-indent vertical-align border-spacing letter-spacing word-spacing border-spacing

    • 数字：opacity visibility z-index font-weight zoom

    • 组合：text-shadow transform box-shadow clip

    • 其他：gradient

    • 动画持续时间：一般以秒s/毫秒ms为单位

  • 动画函数：

    • linear：匀速
    • ease：变速（先加速再减速）
    • ease-in：变速（加速）
    • ease-out：变速（减速）
    • ease-in-out：变速（慢速开始,中间未知，慢速结束）
    • cubic-bezier(n,n,n,n)：自行设定变速，n的值在0~1之间

  • 动画延时时间：以秒或毫秒为单位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡动画</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
            border: 1px solid blueviolet;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            /*-webkit-transition: all 3s ease 1s;*/
            /*-moz-transition: all 3s ease 1s;*/
            /*-ms-transition: all 3s ease 1s;*/
            /*-o-transition: all 3s ease 1s;*/
            /*transition: all 3s ease 1s;*/
            -webkit-transition: width 3s ease 1s,left 1s ease-in-out 0.5s;
            -moz-transition: width 3s ease 1s,left 1s ease-in-out 0.5s;
            -ms-transition: width 3s ease 1s,left 1s ease-in-out 0.5s;
            -o-transition: width 3s ease 1s,left 1s ease-in-out 0.5s;
            transition: width 3s ease 1s,left 1s ease-in-out 0.5s;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .box:hover .demo{
            left: 500px;
            width: 300px;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo">

    </div>
</div>
</body>
</html>

8.3 CSS3动画

8.3.1 @keyframes

通过@keyframes规则，可以创建动画，设置关键帧。

创建动画的原理：将一套CSS样式逐渐变化为另一套样式。

在动画过程中，可以多次改变这套样式。

以百分比来规定改变发生时间，或通过关键词”from”和”to”，等价于0%和100%。

0%是动画开始时间，100%动画的结束时间。

为了获得最佳的浏览器支持，应该始终定义0%和100%选择器。

注意：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

关键帧越多，动画越平滑。

步骤：

  • 设置关键帧

    • 只有两个关键帧

      1
      2
      3
      4
      @keyframe 动画名{
      	0%: {初始样式表};
      	100%: {结尾样式表};
      }
      1
      2
      3
      4
      @keyframe 动画名{
      	from: {初始样式表};
      	to: {结尾样式表};
      }

    • 多个关键帧

      1
      2
      3
      4
      5
      @keyframe 动画名{
      	0%: {初始样式表};
      	百分比: {对应样式表};
      	100%: {结尾样式表};
      }

      注意：这里的百分比一般是升序值，可以是0%~100%之间的任意值，也可以是倒序。

  • 实施动画

    • 常规用法

      animation-name：规定需要绑定到选择器的keyframe名称。

      animation-duration：规定完成动画所花费的时间，以秒/毫秒计。

      animation-timing-function：规定动画的速度曲线。

      • linear：匀速（默认值）
      • ease：变速（先加速再减速）
      • ease-in：变速（加速）
      • ease-out：变速（减速）
      • ease-in-out：变速（慢速开始,中间未知，慢速结束）
      • cubic-bezier(n,n,n,n)：自行设定变速，n的值在0~1之间

      animation-delay：规定动画开始之前的延迟。

      animation-iteration-count：规定动画应该循环播放的次数。

      • number：按设定次数循环
      • infinite：无限循环

      animation-direction：规定是否应该轮流反向播放动画。（默认为1次）

      • normal：不反向
      • alternate：反向

      animation-play-state：动画是否播放或停止播放

      • paused：停止播放
      • running：播放（默认）

    • 简洁用法

      1
      2
      animation: name,duration,timing-function,delay,iteration-count,direction;
      animation-play-state: ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
        }
        .demo{
            width: 100px;
            height: 100px;
            border: #8080ff 1px solid;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            -webkit-animation: move 1s ease-in-out 1s infinite alternate;
            -o-animation: move 1s ease-in-out 1s infinite alternate;
            animation: move 1s ease-in-out 1s infinite alternate;
        }

        /*定义关键帧*/
        @keyframes move {
            0%{
                left: 100px;
            }
            30%{
                left: 200px;
                background-color: #8080ff;
            }
            75%{
                left: 400px;
                background-color: blueviolet;
            }
            100%{
                left: 500px;
                background-color: #87faf8;
            }
        }
        @-webkit-keyframes move {
            0%{
                left: 100px;
            }
            30%{
                left: 200px;
                background-color: #8080ff;
            }
            75%{
                left: 400px;
                background-color: blueviolet;
            }
            100%{
                left: 500px;
                background-color: #87faf8;
            }
        }
        @-moz-keyframes move {
            0%{
                left: 100px;
            }
            30%{
                left: 200px;
                background-color: #8080ff;
            }
            75%{
                left: 400px;
                background-color: blueviolet;
            }
            100%{
                left: 500px;
                background-color: #87faf8;
            }
        }
        @-o-keyframes move {
            0%{
                left: 100px;
            }
            30%{
                left: 220px;
                background-color: #8080ff;
            }
            75%{
                left: 400px;
                background-color: blueviolet;
            }
            100%{
                left: 500px;
                background-color: #87faf8;
            }
        }
        @-ms-keyframes move {
            0%{
                left: 100px;
            }
            30%{
                left: 200px;
                background-color: #8080ff;
            }
            75%{
                left: 400px;
                background-color: blueviolet;
            }
            100%{
                left: 500px;
                background-color: #87faf8;
            }
        }
        .running:hover+.box .demo{
            -webkit-animation-play-state: running;
            -moz-animation-play-state: running;
            -o-animation-play-state: running;
            animation-play-state: running;
        }
        .stop:hover+.box .demo{
            -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
            -o-animation-play-state: paused;
            animation-play-state: paused;
        }
    </style>
</head>
<body>

<button class="running">running</button>
<button class="stop">stop</button>
<div class="box">
    <div class="demo">
    </div>
</div>
</body>
</html>

第九章 基础属性-布局

课程提要

  • 多列布局
  • box布局
  • flex布局
  • 响应式布局
  • 媒体查询
  • Web字体

9.1 多列（分栏）

尽管当前计算机的屏幕已经变得很宽了，研究表明，人们在阅读长文本时会感到困难（通常认为每行大概65~75个字符为最适合阅读的长度）。文本行长度的习惯导致了我们设计布局时存在一些限制，也导致网站无法充分利用宽屏所赋予的机会。多年来，杂志和报纸已经在使用多列布局使内容流动起来，这种布局解决了长文本行的处理以及如和把许多材料放入到有限的空间布局。

现在，随着CSS3中多列布局的出现，网站可以利用多列布局了。通过多列布局，能够创建多个列来对文本进行布局。

CSS3多列属性：

  • column-count：规定元素应该被分隔的列数/栏数。

    1
    column-count: number|auto;

  • column-gap：规定列之间的间隔。

    1
    column-gap: ?px|normal|%;

  • column-rule：设置所有column-rule-*属性的简写属性。（设置分栏间隔线）

    • column-rule-style：设置线型。

      • none：没有分隔线（默认）
      • hidden：隐藏
      • dotted：点状
      • dashed：虚线
      • solid：实线
      • double：双线
      • ridge：定义3D ridge规则。该效果取决于宽度和颜色值。(3D沟槽效果)
      • groove：定义3D groove规则。该效果取决于宽度和颜色值。（3D脊状效果）
      • inset：定义3D inset规则。该效果取决于宽度和颜色值。（3D左上角阴影）
      • outset：定义3D outset规则。该效果取决于宽度和颜色值。（3D右上角阴影）

    • 3D线型在分栏中没有效果，当实线处理。

    • column-rule-width：设置线宽。

    • column-rule-color：设置分隔线颜色。

    • 简洁/复合写法：

      1
      column-rule: width style color;

  • column-width：规定列的宽度。

    1
    column-width: length|auto;

  • columns：规定设置column-width和column-count的简写属性。

    记得加兼容！

    1
    columns: column-width column-count;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分栏</title>
    <style>
        p{
            /*分栏数*/
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;

            /*栏间距*/
            -webkit-column-gap: 50px;
            -moz-column-gap: 50px;
            column-gap: 50px;

            /*栏间分隔线*/
            -webkit-column-rule-style: groove;
            -moz-column-rule-style: groove;
            column-rule-style: groove;
            /*设置分隔线线宽*/
            -webkit-column-rule-width: 50px;
            -moz-column-rule-width: 50px;
            column-rule-width: 50px;
            -webkit-column-rule-color: #87faf8;
            -moz-column-rule-color: #87faf8;
            column-rule-color: #87faf8;

            /*设置栏宽*/
            -webkit-column-width: 50px;
            -moz-column-width: 50px;
            column-width: 50px;
        }
        .box{
            width: 200px;
            height: 200px;
            border: 20px groove #8080ff;/*3D*/
        }
    </style>
</head>
<body>
    <p> 习近平主席对巴赫连任国际奥委会主席表示祝贺，表示在巴赫主席领导下，国际奥委会团结各方力量，推动奥林匹克运动蓬勃发展。新冠肺炎疫情发生以来，国际奥委会做了不少工作，为全球团结抗疫提供了正能量。疫情对奥运会等体育盛会造成很大影响。中方愿继续配合国际奥委会，支持举办东京奥运会。中方愿同国际奥委会加强疫苗合作，共同构建保护运动员安全参赛的有效屏障。
        习近平主席强调，中方正在围绕如期举办北京冬奥会、冬残奥会目标，稳步推进各项筹办工作。目前，所有竞赛场馆全部完工，赛事组织和场馆运行有序开展，赛会服务保障工作加快推进，宣传推广和文化活动有序推进。中方举办了雪上项目、冰上项目测试活动，对办赛涉及的关键要素进行了有效检验。中方将组织好下半年各项测试赛，为北京冬奥会、冬残奥会打下更加坚实的基础。
        习近平主席强调，北京冬奥会、冬残奥会是世界各国的盛会，是全球运动员公平竞技的舞台。感谢国际奥委会为北京冬奥会、冬残奥会筹办提供积极支持和指导。中方对北京冬奥会、冬残奥会如期成功举行充满信心，愿同国际奥委会和国际社会一道，确保北京冬奥会、冬残奥会成为一届简约、安全、精彩的奥运盛会。
        巴赫表示，祝贺中国各领域发展取得骄傲的成就，特别是中国率先成功抗击新冠肺炎疫情、率先恢复经济增长，为全球抗疫合作和经济复苏发挥了重要引领作用。国际奥委会高度重视同中方的良好合作，愿同中方加强疫苗合作。当前北京冬奥会筹备工作处于重要阶段。国际奥委会坚守《奥林匹克宪章》，反对将奥林匹克运动政治化，愿同中方继续密切合作，全力支持中方如期举办北京冬奥会、冬残奥会。相信北京冬奥会、冬残奥会将向世界展现抗击疫情的榜样力量，推动世界冰雪运动发展，为奥林匹克运动发展作出重要贡献。</p>

    <div class="box"></div>
</body>
</html>

9.2 flex布局

弹性盒子是CSS3的一种新的布局模式。
CSS3弹性盒子(Flexible Box)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器的子元素进行排列、对齐和分配空白空间。

9.2.1 弹性盒子定义方式

弹性容器通过设置display属性的值为flex或者inline-flex将其定义为弹性容器。

弹性盒子只定义了弹性元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况：每个容器只有一行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex Box弹性布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .menu{
            width: 100%;
            height: 100px;
            line-height: 44px;
            display: -webkit-flex;/*兼容*/
            display: -moz-flex;/*兼容*/
            display: -o-flex;/*兼容*/
            display: -ms-flex;/*兼容*/
            display: flex;
            font-size: 40px;
            position: fixed;
            bottom: 0;
        }
        .menu li{
            list-style-type: none;
            width: 20%;
            text-align: center;
        }
    </style>
</head>
<body>
<ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
    <li>菜单项5</li>
</ul>
</body>
</html>

  • 常用属性：

    • flex-direction：指定了弹性子元素在父元素中的位置。此属性作用于父容器。

      语法

      1
      flex-direction: row|row-reserve|column|column-reserve;

      row：横向从左到右排列（左对齐），默认的排列方式。

      row-reserve：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）

      column：纵向排列。

      column-reserve：反向纵向排列，从后往前排，最后一项排在最上面。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>flex-direction</title>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .menu{
                  width: 100%;
                  display: -webkit-flex;/*兼容*/
                  display: -moz-flex;/*兼容*/
                  display: -o-flex;/*兼容*/
                  display: -ms-flex;/*兼容*/
                  display: flex;
                  font-size: 40px;

                  /*flex-direction: row;*/
                  /*flex-direction: row-reverse;!*右对齐*!*/
                  /*flex-direction: column;!*纵向*!*/
                  flex-direction: column-reverse;/*纵向反向*/
              }
              .menu li{
                  list-style-type: none;
                  width: 15%;
                  text-align: center;
              }
          </style>
      </head>
      <body>
      <ul class="menu">
          <li>菜单项1</li>
          <li>菜单项2</li>
          <li>菜单项3</li>
          <li>菜单项4</li>
          <li>菜单项5</li>
      </ul>
      </body>
      </html>

    • justify-content：应用于弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐。此属性作用于父容器。

      语法

      1
      justify-content: flex-start|flex-end|center|space-between|space-around;

      flex-start：弹性项目向行头紧挨着填充。这是默认值。第一个弹性项的main-start外边距线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。(紧凑方式左对齐)

      flex-end：弹性项目向行尾紧挨着填充。这是默认值。第一个弹性项的main-end外边距线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。（紧凑方式右对齐）

      center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出。）（紧凑方式居中对齐）

      space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第一弹性项的外边距和行的main-start边线对齐，而最后一个弹性项的外边距和行的mian-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的时间间隔相等。（除了第一个和最后一个子元素外，其他子元素等分空白区域）

      space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿着该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔。（1/2*20px= 10px）（所有子元素等分空白区域）

    • align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。此属性作用于父容器。

      语法

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

      flex-start：沿着纵轴顶端对齐。(默认值)

      flex-end：沿着纵轴底端对齐。

      center：沿着纵轴垂直居中对齐。

      baseline：沿着纵轴基线对齐。（主要用于文字）

      stretch：纵向拉伸对齐。（纵向铺满）

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>align-items</title>
          <style>
              .box{
                  width: 100%;
                  height: 600px;
                  display: -o-flex;
                  display: -webkit-flex;
                  display: -moz-flex;
                  display: -ms-flex;
                  display: flex;
                  border: 2px navy solid;

                  /*align-items: flex-start;!*默认值*!*/
                  /*align-items: flex-end;!*底端对齐*!*/
                  /*align-items: center;!*中间对齐*!*/
                  /*align-items: baseline;!*基线对齐*!*/
                  align-items: stretch;/*拉伸对齐*/
              }
              .box div{
                  width: 300px;
                  color: #fff;
                  text-align: center;
              }
              .box1{
                  /*height: 200px;*/
                  background-color: #8080ff;
              }
              .box2{
                  /*height: 400px;*/
                  background-color: #00ffff;
                  font-size: 30px;
              }
              .box3{
                  /*height: 300px;*/
                  background-color: #ff8070;
              }
          </style>
      </head>
      <body>
      <div class="box">
          <div class="box1">第一个盒子</div>
          <div class="box2">第二个盒子</div>
          <div class="box3">第三个盒子</div>
      </div>
      </body>
      </html>

    • flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。该属性作用于子元素。

      语法

      1
      flex-grow: <number>;
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>flex-grow</title>
          <style>
              .box{
                  width: 100%;
                  height: 600px;
                  display: -o-flex;
                  display: -webkit-flex;
                  display: -moz-flex;
                  display: -ms-flex;
                  display: flex;
                  border: 2px navy solid;
              }
              .box1{
                  height: 200px;
                  width: 0;
                  background-color: #8080ff;
                  flex-grow: 1;/*20%*/
              }
              .box2{
                  height: 400px;
                  width: 0;
                  background-color: #00ffff;
                  font-size: 30px;
                  flex-grow: 3;/*60%*/
              }
              .box3{
                  height: 300px;
                  width: 0;
                  background-color: #ff8070;
                  flex-grow: 1;/*20%*/
                  /*其实他不是真正意义上的等分宽度，而是等分剩余宽度，而剩余宽度是总宽度减去内容宽度，再进行等分。而且这个等分甚至还是根据内容多少来等分，有的内容多，他等分还多一些。*/
                  /*实现等分:   给每个box加上width: 0;*/
              }
          </style>
      </head>
      <body>
      <div class="box">
          <div class="box1">第一个盒子</div>
          <div class="box2">第二个盒子</div>
          <div class="box3">第三个盒子</div>
      </div>
      </body>
      </html>

    • flex：用于指定弹性元素如何分配空间。作用于子元素。

      语法

      1
      flex: auto|initial|none|inherit|[flex-grow]||[flex-shrink]||[flex-basis];

      auto：等价于 1 1 auto

      initial：等价于 0 1 auto

      none：等价于 0 0 auto

      inherit：从父元素继承

      flex-shrink：收缩比例（当子元素超出父元素时才生效，是一种宽度损失规则。）

      flex-basis：默认基准值

      • tips: flex可以带1到3个参数

        • 带1个参数

          • 无单位：数值会被当做flex-grow（放大比例）的值

          • 带单位：这个数值会被当做flex-basis（基本宽度）的值

          • auto（自动宽度）|initial（初始宽度）|none（无）

          • min-width: 1000px;/*低于1000px会出现滚动条*/

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            49
            50
            51
            52
            53
            54
            55
            56
            57
            58
            59
            60
            61
            62
            63
            64
            65
            66
            67
            68

              * 带2个参数：

                第1个参数必须是无单位的数值，这个数值会被当做flex-grow的值。

                第2个参数：

                * 无单位：数值会被当做flex-shrink（收缩比例）的值
                * 带单位：这个数值会被当做flex-basis（基本宽度）的值

              * 带3个参数：

                第1个参数必须是无单位的数值，这个数值会被当做flex-grow的值。

                第2个参数必须是无单位的数值，这个数值会被当做flex-shrink的值。

                第3个参数必须是一个有效的宽度值（有单位），它会被当做基准宽度。

            ```html
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>flex</title>
                <style>
                    .box{
                        width: 100%;
                        height: 600px;
                        background-color: #8080ff;
                        display: flex;
                        display: -o-flex;
                        display: -moz-flex;
                        display: -ms-flex;
                        display: -webkit-flex;
                        /*min-width: 1000px;!*低于1000px会出现滚动条*!*/
                    }
                    .box div{

                        /*flex: auto;*/
                        /*flex: 1 1 auto;*/
                        /*flex: 1;*/
                        /*flex: initial;!*初始*!*/
                        /*flex: none;*/
                    }
                    .box1{
                        background-color: #ff8070;
                        flex: 1;
                    }
                    .box2{
                        background-color: #6a8bbc;
                        /*flex: 1 5;*/
                        /*flex: 1 500px;*/
                        flex: 1 2 10px;
                    }
                    .box3{
                        background-color: greenyellow;
                        flex: 2;
                    }
                </style>
            </head>
            <body>
            <div class="box">
                <div class="box1"></div>
                <div class="box2"></div>
                <div class="box3"></div>
            </div>
            </body>
            </html>

9.4 响应式布局

概念：响应式布局（Responsive Design）在实现不同分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板上有更好的浏览阅读体验。

响应式与自适应的区别：

  • 响应式布局只开发一套代码，通过检测视口的分辨率，针对不同客户端，在客户端做代码处理，来展现不同的布局和内容。

  • 自适应需要开发多套界面，通过检测视口的分辨率，判断当前访问的设备是PC还是手机/平板，从而请求服务层，返回不同的页面。

  • 响应式布局等同于流动网格布局，而自适应等同于使用固定分割点来进行布局。

  • 自适应布局给出了更多的设计空间，只用考虑几种不同的状态即可，而响应式布局需要考虑上百种不同的状态，虽然有些状态差异较小，但也要考虑到。

响应式开发实现方法：

  • 媒体查询（一般不用）
  • 百分比布局
  • rem布局：相对于根节点（元素）HTML中的字号布局
  • 视口单位布局(vw/vh)：相对于窗口大小布局（视口：不同的客户端）

响应式设计步骤：

  • 设置meta标签x
  • 通过媒体查询来设置样式
  • 设置多种视图的宽度
    • 宽度需要使用%/rem/vw$vh等
    • 处理图片缩放
    • 其他属性处理
      • pre/iframe/video等，都要缩放其大小
      • table建议不要增加padding属性，低分辨率下要使用内容居中操纵

9.5 媒体查询

媒体查询通过不同的媒体类型和条件定义样式表规则。

步骤：

  • 设置meta标签

    1
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,usr-scalable=no">

    说明：以上标签内容只能被移动端设备识别。

    view-point：视口（移动端）

    width=device-width：宽度等于当前设备的宽度。

    initial-scale=1.0：初始缩放比例（默认为1.0）

    maximum-scale=1.0：允许用户缩放到的最大比例（默认为1.0）

    minimum-scale=1.0：允许用户缩放到的最小比例（默认为1.0）

    usr-scalable=no：是否可以手动缩放（默认为no）

  • 设置IE默认渲染方式 默认为最高版本

    1
    <meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1">

    说明：以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE的最高版本渲染页面。（chrome渲染更快）

  • 引入兼容的JS文件

    1
    2
    3
    4
    <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
       <![endif]-->

    解释：如果浏览器版本小于IE9，那么就加载下面的两个文件。

    因为IE8及其以下版本，既不支持HTML5，也不支持CSS3 中的Media，所以我们需要加载JS文件来处理兼容。

    if和endif是一个注释语句(条件hacker)，也就是说，IE9及以上版本不会编译这几行代码。

  • 进入CSS3提供的媒体查询功能

    • 第一种方案：引入外部CSS文件时使用

      1
      2
      3
      4
      <link rel="stylesheet" href="CSS/screen480.css" media="screen and (max-width:480px)"><!--屏幕最大为480时，加载该文件-->
          <link rel="stylesheet" href="CSS/screen800.css" media="screen and (min-width:480px) and (max-width:800px)"><!--屏幕最小为480，最大为800时，加载该文件-->
          <link rel="stylesheet" href="CSS/screengt800.css" media="screen and (min-width:800px)"><!--屏幕最小为800时，加载该文件-->

      1
      2
      3
      4
      /*screen480.css*/
      body{
          background-color: #ffff00;
      }
      1
      2
      3
      4
      /*screen800.css*/
      body{
          background-color: #ff00ff;
      }
      1
      2
      3
      4
      /*screengt800.css*/
      body{
          background-color: #00ffff;
      }

      设备：

      • all：所有设备 *
      • screen: PC端显示器 *
      • print：打印机/打印预览图
      • handheld：移动便携设别
      • TV：电视
      • speech：音频合成器
      • braille：盲人点触设别
      • embossed：盲人打印机
      • projection：投影设备
      • tty：固定密度字母栅格设备
      • only：排除不支持媒体查询的浏览器 *

    • 第二种方案：在style标签中用@media定义

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>媒体查询2</title>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .menu{
                   overflow: hidden;
                  width: 100%;
                  height: 44px;
                  line-height: 44px;
               }
              li{
                  list-style-type: none;
                  float: left;
                  width: 20%;
                  text-align: center;
                  background-color: #8080ff;
              }
              a{
                  text-decoration: none;
                  color: white;
              }
              @media screen and (max-width: 480px){
                  .menu{
                      display: none;
                  }
              }
          </style>
      </head>
      <body>
      <ul class="menu">
          <li><a href="#">菜单项1</a></li>
          <li><a href="#">菜单项2</a></li>
          <li><a href="#">菜单项3</a></li>
          <li><a href="#">菜单项4</a></li>
          <li><a href="#">菜单项5</a></li>
      </ul>
      </body>
      </html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>媒体查询3</title>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              body{
                  padding: 0 10px;
              }
              section{
                  overflow: hidden;
              }
              /*.row1 div,.row2 .div,.row3 div,.row4 div*/
              section div{
                  float: left;
              }
              .row1 div{
                  width: 48%;
                  height: 100px;
                  background-color: #8080ff;
              }
              .row1 div:first-child{
                 margin-right: 4%;
              }
              .row2 div{
                  margin-top: 10px;
                  width: 100%;
                  height: 200px;
                  background-color: #ff8070;
              }
              .row3,.row4{
                  margin-top: 10px;
              }
              .row3 div{
                  width: 30%;
                  height: 100px;
                  background-color: #00ffff;
                  margin-left: 5%;
              }
              .row3 div:first-child{
                  margin-left: 0;
              }
              .row4{
                  margin-top: 10px;
              }
              .row4 div{
                  width: 22%;
                  height: 150px;
                  background-color: #555500;
                  margin-right: 4%;
              }
              .row4 div:last-child{
                  margin-right: 0;
              }
              @media screen and (max-width: 600px){
                  .row1 div{
                      width: 100%;
                      margin-bottom: 10px;
                  }
                  .row3 div{
                      width: 100%;
                      margin-bottom: 10px;
                  }
                  .row4 div{
                      width: 48%;
                      margin-bottom: 10px;
                      margin-right: 2%;
                  }
                  .row3 div+div{
                      margin-left: 0;
                  }
              }
          </style>
      </head>
      <body>
          <section class="row1">
              <div class="div">1</div>
              <div class="div">2</div>
          </section>
          <section class="row2">
              <div class="div">3</div>
          </section>
          <section class="row3">
              <div class="div">4</div>
              <div class="div">5</div>
              <div class="div">6</div>
          </section>
          <section class="row4">
              <div class="div">7</div>
              <div class="div">8</div>
              <div class="div">9</div>
              <div class="div">10</div>
          </section>
      </body>
      </html>

9.6 WEB字体

开发者引入外部字体

语法：

1
2
3
4
@font-face{
	font-family: 字体名;
	src: url("字体文件.ttf") format("字体文件格式以处理浏览器兼容问题"), url("字体文件.woff") format("");
}

说明：可以同时引入多个字体文件，字体一样，文件的扩展名不一样，目的是处理浏览器兼容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WEB字体</title>
    <style>
        body{
            background-color: #000;
        }
        @font-face{
            font-family: stick;
            src: url("Font/1.ttf") format("truetype");
        }
        p{
            font-family: stick;
            font-size: 28px;
            color: white;
            font-weight: bolder;
        }
        
    </style>
</head>
<body>
    <p>
        据中国载人航天工程办公室消息，经监测分析，2021年5月9日10时24分，长征五号B遥二运载火箭末级残骸已再入大气层，落区位于东经72.47°，北纬2.65°周边海域，绝大部分器件在再入大气层过程中烧蚀销毁。
    </p>
</body>
</html>

iconfont的使用

矢量图网站 ：由阿里巴巴提供的一种图标字体(可以把图标当做文字来处理，比如设置颜色。)

步骤：

  • 进入网站注册，登录
  • 创建项目
  • 添加图标到购物车
  • 将购物车中的图标添加到项目中
  • 下载iconfont文件，解压后，将部分文件复制到网页项目中（去掉js和html文件）
  • 使用字体图标前，先引入iconfont.css文件
  • 使用方法：
    • 方法一：名称
    • 方法二：unicode值(微信小程序开发不支持这种写法)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont</title>
    <link rel="stylesheet" href="iconfont/css/iconfont.css">
    <style>
        li{
            list-style-type: none;
        }
        i{
            color: #8080ff;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <button class="iconfont iconliwu"></button>
    <button class="iconfont iconliwu"></button>
    <button class="iconfont iconliwu"></button>
    <button class="iconfont iconliwu"></button>

    <ul>
        <li><i class="iconfont">&#xe6de;</i>列表1</li>
        <li><i class="iconfont">&#xe6de;</i>列表2</li>
        <li><i class="iconfont">&#xe6de;</i>列表3</li>
        <li><i class="iconfont">&#xe6de;</i>列表4</li>
        <li><i class="iconfont">&#xe6de;</i>列表5</li>
    </ul>
</body>
</html>

课后实训

第8次作业.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 700px;
}
header{
    margin: auto 1%;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
header .banner{
    overflow: hidden;
    height: 80px;
    line-height: 80px;
    background: linear-gradient(to left,#000,#8080ff,#000);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
header .banner h1{
    font-family: snow;
    font-weight: lighter;
    font-size: 50px;
    float: left;
    margin-right: 150px;
    color: white;
    text-align: center;
    text-shadow: 3px 3px 6px #00ffff;
}
header ul{
    overflow: hidden;
    display: flex;
    display: -o-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    justify-content: space-around;
}
header .banner ul li{
    list-style-type: none;
    float: left;
    font-family: blackborad;
    text-align: center;
    padding: 0 10px;
}
header .banner ul li a{
    text-decoration: none;
    color: white;
    text-shadow: 2px 2px 2px #87faf8;
}
header .banner ul li:hover{
    color: black;
    background-color: #fff;
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    border-radius: 25%;
    box-shadow: 1px 1px 1px #00ffff;
}
header .banner ul li:hover a{
    color: black;
    text-shadow: 2px 2px 2px red;
}
.content{
    background: linear-gradient(to left,#aaaaaa,#dea46b,#aaaaaa);
    overflow: hidden;
    display: flex;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;

}
.content img{
    width: 15%;
    height: 15%;
    margin: 30px 0  30px;
    border: 10px groove dodgerblue;
}
.content .words{
    margin-left: 10%;
    overflow: hidden;
}
.content .words h2{
    font-family: stick;
    margin: 30px 0 30px 0;
    color: white;
    font-size: 35px;
    text-shadow: 3px 3px 2px black;
}
.content .words p{
    margin-top: 30px;
    font-size: 20px;
    text-shadow: 3px 3px 2px black;
    color: white;
    font-family: snow;
}

.content p:last-child{
    background-color: black;
}
header .content .words ul{
    height: 50px;
    line-height: 50px;
    margin-top: 30px;
    margin-bottom: 30px;
    float: left;
}
header .content .words ul li{
    font-size: 20px;
    text-shadow: 3px 3px 2px black;
    list-style-type: none;
    color: white;
    font-family: snow;
    padding: 0 10px;
    text-align: center;
}
header .content .words ul li a{
    text-decoration: none;
}
header .content .words ul li:hover{
    color: black;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 1px 3px inset;
}
i{
    color: black;
    margin-right: 10px;
    -webkit-transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out;
    -ms-transition: color 1s ease-in-out;
    -o-transition: color 1s ease-in-out;
    transition: color 1s ease-in-out;
}
i:hover{
    color: red;
}
section{
    margin: 50px 2%;
    display: flex;
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    display: -webkit-flex;
    justify-content: space-between;

}
section div{
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    box-shadow: 5px 5px 5px black;
}
section div p{
    background: #8080ff;
    line-height: 80px;
    height: 80px;
    padding: 0 20px;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    font-family: spring;
    font-size: 20px;
    color: white;
}
section div ul{
    list-style-type: none;
    background-color: #eee;
}
section div ul li{
    padding: 20px 0 0 20px;
    font-family: autumn;
}
section div ul li:last-child{
    padding-bottom: 30px;
}
@media screen and (min-width:800px) {
    section div{
        width: 20%;
    }
}
footer{
    background-color: #808000;
    height: 60px;
    border-radius: 15px;
    box-shadow: 3px 3px 3px black inset;
    margin-bottom: 20px;
}
footer p{
    line-height: 60px;
    color: white;
    font-family: slience;
    margin-left: 20px;
}
1
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>第九天实训</title>    <!--引入字体-->    <link rel="stylesheet" href="./CSS/font.css">    <!--引入CSS布局-->    <link rel="stylesheet" href="./CSS/第8次作业.css">    <link rel="stylesheet" href="./iconfont/css/iconfont.css"></head><body>    <!--导航栏-->    <header>        <div class="banner">        <h1>张加林</h1>        <ul>            <li><a href="https://miketaylorjuly123.cn">主页</a></li>            <li><a href="https://miketaylorjuly123.cn">个人信息</a></li>            <li><a href="https://miketaylorjuly123.cn">联系方式</a></li>            <li><a href="https://miketaylorjuly123.cn">友链</a></li>            <li><a href="https://miketaylorjuly123.cn">反馈</a></li>        </ul>        </div>        <!--内容栏-->        <div class="content">            <img src="./imgs/payment.jpg" alt="">            <div class="words">                <h2>卓越软件工程师</h2>                <p>年龄19岁，目前处于本科大二学习阶段，当前学期主要学习内容：数据库、智慧视觉、计算机基础课程。</p>                <p>课外目标：该学期学完HTML、CSS以及JS基础部分，以及VUE的简单架构，必要的话还需要学习Java、人工神经网络。</p>                <ul><li><a href=""><i class="iconfont">&#xe6e7;</i></a>了解更多</li></ul>            </div>        </div>    </header>    <section>        <div class="first">            <p>大一上课程</p>            <ul>                <li>微积分</li>                <li>线性代数</li>                <li>C程序设计</li>                <li>大学英语</li>                <li>近代史</li>            </ul>        </div>        <div class="second">            <p>大一下课程</p>            <ul>                <li>微积分</li>                <li>大学物理</li>                <li>离散数学</li>                <li>公共演讲</li>                <li>思修</li>            </ul>        </div>        <div class="third">            <p>大二上课程</p>            <ul>                <li>概率论</li>                <li>计算机组成原理</li>                <li>人工智能</li>                <li>交通管理与控制</li>                <li>综合课程设计</li>            </ul>        </div>        <div class="forth">            <p>大二下课程</p>            <ul>                <li>操作系统</li>                <li>计算机网络</li>                <li>数据库</li>                <li>商务英语</li>                <li>数据库</li>            </ul>        </div>    </section>    <footer>        <p>版本号：01 作者：张加林 时间：2021 / 05 / 09 / 22:12</p>    </footer></body></html>

font.css

1
@font-face {    font-family: stick;    src: url("../Font/stick.ttf") format("truetype");}@font-face {    font-family: rabit;    src: url("../Font/rabit.ttf") format("truetype");}@font-face {    font-family: snow;    src: url("../Font/汉仪雪君体简.ttf") format("truetype");}@font-face {    font-family: spring;    src: url("../Font/演示春风楷.ttf") format("truetype");}@font-face {    font-family: autumn;    src: url("../Font/演示秋鸿楷.ttf") format("truetype");}@font-face {    font-family: blackborad;    src: url("../Font/鸿雷板书简体.ttf") format("truetype");}@font-face {    font-family: slience;    src: url("../Font/默陌山魂手迹.ttf") format("truetype");}

第十章 PhotoShop基础

课程提要

  • 认识PhotoShop图像基础
  • 工具使用与快捷操作
  • 图片优化
  • 精灵图

安装PS和cutterman插件。

10.1 基本概念

  • PS由美国Adobe公司开发的一款用来处理图像的软件。Adobe开发了另外一款软件Illustrator(AI)，它用来作图，主要跟加拿大开发的CorelDRAW抢占市场。

    PS用来处理位图的，AI用来处理矢量图。

  • 位图是由像素点组成的，文件较大，放大会失真，一般用来表示人物、风景等；矢量图由线条组成，文件较小，放大后不会失真，一般用来表示工程图等，由若干个几何图形拼接而成。

    • PS使用位图来表示黑白图像，其逻辑为每一个像素对应一个数据位。位图又称为点阵图，是一系列像素组成的可识别的图像，位图图像与分辨率有关，任何位图图像都含有有限数目的像素。
    • 矢量图与分辨率无关，其形状通过数学方程描述，由边线和内部填充组成。

  • 分辨率：又称解析度/解像度，可分为：显示分辨率、图像分辨率、打印分辨率、扫描分辨率等。

    • 图像分辨率：单位英寸中所包含的像素点数，分辨率越高，图像越清晰，但是相应的文件也越大。

  • 位分辨率：又叫色彩深度或位深度，批一个像素中，每个颜色分量（R,G,B,Alpha通道）的比特数。

    • 位指的是二进制或比特(bit)。

    • 常见的位分辨率：

      • 1位：两种颜色（黑白两种）。
      • 2位：四种颜色。
      • 3位：八种颜色（用于早期的电脑显示器）。
      • 8位：256种颜色，灰阶，有256种灰色（包括黑白）。
      • 16位：可以组合出64K种颜色。
      • 24位：2^24种颜色，真彩色，可以提供比肉眼能识别更多的颜色，主要用于拍摄照片。

      位数越高，越接近生活中的真彩色，但文件也就越大。

  • 网页所支持的图片格式

    • .jpg：压缩格式图片，24位颜色存储单个位图。

      支持最高级别的压缩，文件相应变小，但这种压缩是有损耗的，压缩率越大的图片，显示的内容就越模糊。

    • .png：一种无损压缩的位图图形格式，是网页常用的图片格式，原因是它压缩比高，生成文件体积小。同时支持背景透明效果，使彩色图像的边缘能与任何背景平滑的融合，从而彻底消除锯齿边缘。

    • .gif：可以存储多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出输出到屏幕上，就可以构成一种最简单的动画，也就是我们常见的动图。GIF图片不一定就是动图，其也可以是一张图片，由于其具有高压缩的算法，所以网页中也常有出现不是动图的GIF图。

    • .svg：

      HTML 5 新增的矢量图，一般用来作为图标字符。

    • Base64（图像编码）：设计时把图像文件解析成字符编码，浏览器会自动将其再还原为图像。图像越大，编码量越大，所以一般不对大图做base64编码处理。

      Base64图片编码 网站

      1
      <img src='编码' alt="">

      由于编码量大，一般不用这种方法。

    • .ico或.cur：图标文件，一般用作网站的LOGO。

      1
      2
      /*link:favicon*/
      <link rel="shortcut icon" type="image/x-icon" href="路径">

    • .psd：psd是PS所特有的文件格式，它含有图层。一般UI工程师给的UI图是psd格式，可以用它切图。

10.2 SVG矢量图使用方法

  • 进入 [官网](Icon Font & SVG Icon Sets ❍ IcoMoon)

  • 上传SVG图导入网站，选中后下载。

  • 使用：将fonts、style.css复制到项目中。

  • 将style.css引入到网页文件中。

  • 使用：

    用类名引入图标，并在图标名前添加前缀icon-。

    像处理文字一样写大小和颜色。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>加载SVG图片</title>
        <link rel="stylesheet" href="./svg/style.css">
        <style>
            span{
                background-color: #8080ff;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <span class="icon-01"></span>
    </body>
    </html>

10.3 PS工具使用与快捷键操作

功能 快捷键
新建文件夹 Ctrl+N
打开文件 Ctrl+O
保存文件 Ctrl+S
关闭文件 Ctrl+W
打开/隐藏图层调板 F7
前景色填充 Alt + Delete
背景色填充 Ctrl + Delete
交换前景色/背景色 X
前景色/背景色还原为黑白色 D
取消选区 Ctrl + D
变换大小和旋转方向 Ctrl + T
移动工具 V
变换形状 shift + 鼠标
沿中心缩放 Alt + Shift
缩放工具 Z
选框工具 M
抓手工具 H
切片工具 C
渐变工具 G
文字工具 T
撤销一次操作 Ctrl + Z
撤销多次操作 Ctrl + Shift +Z
颜色调板 F6
画笔调板 F5
信息调板 F8
动作调板 F9
新建图层 Ctrl + Shift + N
向下合并图层 Ctrl + E
复制选区 Alt + 鼠标拖动
导出切片 Ctrl + Alt + Shift + S

  • PS操作

    • 缩放

      双击”缩放工具“，可以将图像显示比例调成100%。

      Alt+鼠标滚轮可以缩放图像显示比例。

      鼠标向左下/右上（左下/右上）移动。

  • 颜色模式

    • 灰度：采用256级灰阶，包括黑白
    • 位图：黑白图
    • RGB：显示色，用于屏幕显示。（网页采用RGB模式）
    • CMYK：油墨色，也叫打印色。

  • 新建文件时分辨率设置

    • 用于显示的图像的分辨率设为72ppi左右
    • 一般打印的图像的分辨率为170ppi左右
    • 高精度打印图像分辨率为300ppi左右

  • 如果要创建的图像文件最终存为PNG格式，背景要设为透明。

  • 在PS中图像编辑时，实际图像由多个图层构成。

  • 填充：编辑->填充

  • 工具箱分为

    • 选框或选择工具区
    • 绘图区/编辑区
    • 绘矢量图区和文字编辑区
    • 缩放区/颜色/蒙版区

  • 补充

    • 魔棒工具：选择颜色相近的区域
    • 栅格化：把文字层转化为图层
    • 蒙版：处理选区

  • 图层操作

    • 锁定图层
    • 图层对齐
    • 创建图层组
    • 调整色阶和

10.4 图片优化

雪碧图（Sprites）制作

也叫精灵图(一般为PNG格式)，是把多张小图放在一张大图中，目的是减少服务器请求次数，达到优化目的。

  • 优点：

    • 减少http请求次数
    • 减少图片数量，提升网页加载速度
    • 减少网络带宽占用

  • 缺点

    • 提高了网页开发成本和维护成本
    • 合并内容性图片会影响页面的可读性，语义化降低

  • 应用场景

    • 一般只有描述性图片用来制作雪碧图，比如页面中使用的各种小标。
    • 按钮背景图及其各种效果的图片，适合做成雪碧图。
    • 对于img标签设置的内容性图片，是不能合成到雪碧图中的。
    • 开发游戏中使用的素材图片。

  • 制作规范

    • 图片在合并之前必须保留空隙
    • 图片排列方式由横向和纵向(最好不要多行多列排)
    • 合并分类规则
      • 把同属一个模块的图片进行合并
      • 把大小相近的图片进行合并
      • 把色彩相近的图片进行合并
      • 必须保存为PNG格式

  • 去水印与版权问题

    • 仿制图章工具
    • 修复画笔工具
    • 修补工具
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图的使用</title>
    <style>
        ul{
            list-style-type: none;
        }
        .icon1{
            width: 29px;
            height: 27px;
            display: inline-block;
            background: url("./imgs/sprites2.png") -6px -6px;
        }
        .icon2{
            width: 28px;
            height: 27px;
            display: inline-block;
            background: url("./imgs/sprites2.png") -40px -6px;
        }
        .icon3{
            width: 26px;
            height: 27px;
            display: inline-block;
            background: url("./imgs/sprites2.png") -73px -6px;
        }
    </style>
</head>
<body>
<ul>
    <li><span class="icon1"></span>表项1</li>
    <li><span class="icon2"></span>表项2</li>
    <li><span class="icon3"></span>表项3</li>
</ul>
</body>
</html>

代码格式化：Ctrl +Alt+L

文件格式化：Ctrl +Alt+Shift+L

行级标签里不能加块级标签。

>：只作用于某标签的儿子，孙子中有满足的标签会被忽略

1
2
3
4
5
6
7
.welcome>p{
  font-size: 14px;
  color: #666;
  padding: 0 85px 0 80px;
  line-height: 24px;
  text-align: center;
}

学会如何用border+border-left+border-right+border-bottom+border-top绘制三角形。

复杂工程问题中，注意标签的权重。

!important(10000)>内联样式（1000）>ID选择器（100）>类、伪类选择器（10）>标签选择器（1）

第十一章 前后端分离开发

前后端分离就是将一个应用的前端代码和后端代码分开写，提升效率。

前端：客户端代码

后端：独立编写服务端代码，提供数据接口即可。

前端通过Ajax请求来访问后端数据接口，将Model展示到view即可。

前后端开发者只需要提前约定好接口文档（URL、参数、数据类型），然后独立开发即可，前端可以独立造假数据金进行测试即可，完全不需要依赖后端。最后完成前后端集成即可；真正实现前后端的解耦合，极大提升了开发效率。

单体—》前端应用+后端应用

前端应用：负责数据展示和用户交互

后端应用：负责提供数据处理接口

前端HTML—》Ajax接口—》RESTful后端数据接口（JAVA/Spring Boot/…）

传统单体应用

传统单体应用

前后端分离应用

前后端分离应用

前后端分离就是将一个单体应用拆分成两个独立的应用，前端应用和后端应用以JSON格式进行数据交互。

实现技术

Spring+Vue

使用Spring Boot进行后端应用开发，使用Vue进行前端应用开发。