**视频 HTML5和CSS3 WEB技术开发**
课程目标：
- 使用HTML5进行网站布局
- 使用CSS3进行网站美化
- 开发精美的商业网站
第一章 HTML5基础
概念：
网页 ：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻等；
网站：淘宝网、京东、亚马逊、腾讯、新浪、网易、哔哩哔哩等，网站就是网页的集合。
浏览器：查看网页的工具；主浏览器：谷歌浏览器Chrome、火狐浏览器、IE（Edge);360、2345、百度等这些浏览器上述三种的；
HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup language)，是网页制作所必备的。“超文本**”**就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 目前版本是第5代，简称为HTML5，该 技术结合了 HTML4.01 的相关标准并革新 。
2.1 www来源
WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“‘W3’”，英文全称为“World Wide Web”），中文名字为“万维网”，"环球网"等，常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。 是一个由许多互相链接的超文本组成的系统，通过互联网访问。
发明者：蒂姆·伯纳斯·李 (他是“互联网之父”、“千年技术奖”首位获奖者，他是被全球人赞扬的英国科学家。他，是蒂姆·伯纳斯·李。他是万维网的发明者，南安普顿大学与麻省理工学院教授。2017年，他因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得2016年度的图灵奖。)
2.2 W3C
World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http:///
http:///
2.3W3C标准
结构化标准语言（XHTML 、XML）：网页结构html
表现标准语言（CSS）:CSS
行为标准（DOM、ECMAScript ）：JS
3.协议
3.1http:
3.2 https:
HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性
的基本结构
理解网页结构：
<!DOCTYPE html><!--告诉浏览器使用什么规范,html超文本规范-->
<html lang="en"><!--表示使用的语言是en,英文;utf-8-->
<head>
<title>Document</title>
</head>
<body>
身体
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
5.第一个小程序
第一个小程序，都是“Hello World”。
使用记事本写个网页，显露一把。
使用更为快捷的开发工具：EditPlus、HBuilderX、VSCode。
html:标记性的语言，这里面的元素，主要是标签。
VSCode离线插件：/vscode，进去输入需要的插件，点安装会打开VScode。
6.标签
6.1.格式和常用标签
标签的规范，必须通过尖括号括起来；成对出现；双标记标签和单标记标签；
标签关系：父子关系；兄弟关系；
6.2 HTML标签、Head标签、BODY标签
title:
6.
meta:标记信息；
charset:表示字符编码，utf-8;en;GBK;
name=“author”:作者
name=“Keywords”:关键字;一般是baidu、谷歌搜索的时候，利于搜索喂食；
name=“description”:描述上面这些 对应的另外内容是content
直接使用content="内容"来写;也是搜索用；
6.4 H1–>h6及hr标签
H1标题最大，H6标题最小;
6.5 p、br、pre标签
6.6无序列表和有序列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
无序列表：没有顺序的列表，默认有个小圆点。
应用场景：一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="张晨光">
<meta name="keywords" content="HTML5的介绍，全球直播">
<meta name="description" content="比尔盖茨，扎克伯格，马云，马化腾亲自主持">
<title></title>
</head>
<body>
<!-- ul:是无序列表，默认是实心圆点;
ul:un order list
ul的属性是type;属性是描述该标签干嘛;
值：
circle:空心圆
square:实心正方形
disc:实心圆，默认格式，不写也会有
-->
<ul type="circle">
<li>华为</li>
<li>三星</li>
<li>一加</li>
</ul>
<ul type="square">
<li>华为</li>
<li>三星</li>
<li>一加</li>
</ul>
<ul type="disc">
<li>华为</li>
<li>三星</li>
<li>一加</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
有序列表：
场景：一般用于排序类型的列表，如试卷、问卷选项等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<!-- 有序列表：
ol:order list
type: 默认数字
值:
1 后面1 2 3
A 后面A B C
I 后面I II III IV
reversed="reversed" 倒序
start:表示从哪个开始,用于数字;
-->
<ol type="A">
<li>冠军</li>
<li>亚军</li>
<li>季军</li>
<li>四军</li>
</ol>
</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
6.7 字体标签
b、I、U、strong、em等标签。
<!--
font标签：
属性：
size：大小
face:字体样式
color:颜色
-->
<font size="1">学院开始进行篮球比赛</font><br>
<font color="red">学院开始进行篮球比赛</font><br>
<font face="楷体">学院开始进行篮球比赛</font>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
6.8居中标签
center
6.9 图片标签
<img 空格 src=‘图片的路径’ title=‘’/>
图片路径是重点，首先是找到图片，把图片放到和网页同一个文件夹，并且你要测试没有这个图片会出来叉号的效果
正确效果：
title：当光标放上去的时候，会出来这个提示信息。
src：source来源
加上宽width
高 height;
格式：width/height=“数字 px” px:就是计算机或者手机，多少像素；
新的图片类型：bmp、png、jpg、gif、jfif、webp
WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买[On2 Technologies](/item/On2 Technologies)后发展出来，以BSD授权条款发布。
WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。2011年11月8日，Google开始让WebP支持无损压缩和透明色（alpha通道）的功能，而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45%的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28%的文件大小。
图片存储格式之一，由JPEG格式衍生而来，后缀为".jfif"。
JPEG本身只有描述如何将一个图像转换为字节的数据串流（streaming），但并没有说明这些字节如何在任何特定的储存媒体上被封存起来。一个由独立JPEG小组（Independent JPEG Group）所建立的额外标准，称为JFIF（JPEG File Interchange Format，JPEG档案交换格式），详细说明如何从一个JPEG串流，产出一个适合于电脑储存和传输（像是在因特网上）的档案。当有人称呼一个"JPEG档案"，一般而言他是意指一个JFIF档案，或有时候是一个Exif JPEG档案。然而，也有其他以JPEG为基础的档案格式，像是JNG。
JPEG/JFIF是最普遍在万维网（World Wide Web）上被用来储存和传输图片的格式。它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形，因为它的压缩方法用在这些图形的型态上，会得到不适当的结果（PNG和GIF格式通常是用来针对这种目的之图形；GIF每一像素只有8位元，并不很适合于用在彩色照片，PNG可以被用来无失真地储存照片，但是档案太大让它不适合在网页上放照片）。
路径问题：
<body>
<!--
1.访问图片;src=''
=./; .:当前目录; ./：当前目录下;
3.访问上级目录下的图片;
当前目录：day01；
../: 上级是html
../shangji: html目录下的shangji问价夹
-->
<img src="" width="300" height="200">
<img src="./" width="302" height="201">
<img src="img/" width="302" height="201">
<img src="../shangjiimg/" width="302" height="201">
<img src="../shangjiimg/" width="302" height="201">
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
6.10超链接
网站：有很多内容来组成，这些就是网页组成，信息孤岛。网页与网页之间、关联就是通过超链接，来实现。
<a href='网址'></a>
- 1
打开到新窗口: 属性target=“_blank”
连接到邮箱<a href=‘mailto:xx@’>联系我<a>
锚点案例
6.11 多媒体
了解多媒体包含的类型：音频、视频、动画、图片等
视频video
video,指定视频来源 、是否播放。
| 浏览器格式 | IE | Firefox | opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
| MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
| 格式 | 文件 | 描述 |
|---|---|---|
| AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。 |
| WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。 |
| MPEG | . | MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。 |
| QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。 |
| RealVideo | . | RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。 |
| Flash | . | Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 |
| Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。 |
<video controls>
<source src="video/" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
- 1
- 2
- 3
- 4
<!-- 视频;播放不能播放；在谷歌浏览器要播放，需要设置muted；但是muted是静音播放；
如果需要有声音，必须通过js来操作，放置声音。
-->
<video src="./第九章-9.1.0-知识点概述.mp4" width="900" height="600"
controls="controls" autoplay="autoplay" id="video" muted="muted"></video>
<button id="btn" onclick="play()">播放</button>
<script type="text/javascript">
function play(){
document.getElementById('video').muted=false;
//如果设置非muted,不自动播放，则这里换成
//('video').play();
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
音频audio
声音格式
MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的，你可以选择mp3格式。
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
- 1
- 2
- 3
- 4
- 5
| 格式 | 文件 | 描述 |
|---|---|---|
| MIDI | . | MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
| RealAudio | . | RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。 |
| Wave | .wav | Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。 |
| WMA | .wma | WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。 |
| MP3 | . | MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。 |
6.12 特殊符号
6.13 块元素和行内元素
块元素
无论内容多少，该元素独占一行（p、h1-h6…li ul）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
7.重点
图片的插入
超链接的使用
8.难点
需要按照固定的步骤，把文件夹、图片、网页放到固定的目录。
9.作业
1.制作宋词《满江红》；
2.制作小米超链接；
3.音乐排行榜
第二章 表格和表单
知识点：
1.表格
2.表单
重点：
1.表格
web1.0当时比较火的标签元素，行、列结构。
excel,电子表格。
默认格式：
<table>
<thead>
<tr><th>...</th></tr>
</thead>
<tfoot><tr><td></td></tr></tfoot>
<tbody><tr>...</tr></tbody>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
table里面的居中：指的是table在网页中的居中
要设置字体的居中，tr td
去除间隙：
cellspacing=“0”,cell 单元格，spacing,单元格;
cellpadding:内部填充;
跨越多列：colspan
跨越多行：rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业一</title>
<style>
a{text-decoration: none;}
</style>
</head>
<body>
<table>
<tr>
<td width="50"><a href="#">游戏</a></td>
<td width="120">一刀9999亿</td>
<td width="120">冰雪私服</td>
<td width="120"><font color="red">0元充值私服</font></td>
<td width="120">超变999999亿</td>
<td width="120"><font color="red">页游前十名</font></td>
<td width="120">超变单职业</td>
<td width="120"><font color="#888888" size="1">换一换</font></td>
</tr>
<tr>
<td><a href="#">推荐</a></td>
<td>Max.超变版</td>
<td>今日一线头条</td>
<td>高爆打金服</td>
<td>爱奇艺</td>
<td>爱淘宝</td>
<td>1688评价进货</td>
<td><font color="#888888" size="1">换一换</font></td>
</tr>
<tr>
<td><a href="#">资讯</a></td>
<td>环球军事新闻</td>
<td>中华网军事</td>
<td>重大军事新闻</td>
<td>紧急新军事</td>
<td>今日新闻头条</td>
<td>特大突发军事</td>
<td><font color="#888888" size="1">换一换</font></td>
</tr>
</table>
</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
2.定义列表
'
-
标签用于创建一个定义列表（definition list）。
<dl>标签是与<dt>和<dd>联合使用的。<dt>用于创建定义列表中的一项（术语），<dd>用于为定义列表中的项创建描述。
3.表单
表单：同学们去饭店吃饭，需要点菜，饭店，菜单。美团：下单–处理做饭，送餐。
应用场景：网页、小程序当中，用处收集信息、注册、登录、问卷调查等等。
内容输入完毕，提交到服务器（小米服务器）
3.1 语法格式
<form method="post" action="">
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3.2表单元素
<input type="text" name="fname" value="text"/>
- 1
3.2.1 文本框
3.2.2 密码框
3.2.3 单选按钮
3.2.4 复选框
3.2.5 列表框
3.2.6按钮
3.2.7多行文本框
3.2.8文件域
3.2.9邮箱
3.2.10网址
3.2.11数字
3.2.12滑块
3.2.13搜索框
其他表单元素：
单选按钮：intput type=‘radio’,name一样的时候，才能够实现单选;
复选框：input type=‘checkbox’ ,name一样的才能够取值到一起。
下拉框：select标签，子标签是option
多行文本框：textarea,也称为文本域
上传:file
注册效果：
4.高级表单元素
隐藏域
只读
禁用
表单元素的标注label for=‘id’ id为某个表单元素值
表单验证
优点：
1.降低服务器压力；2.保证安全性
初级验证：
属性：required和pattern，其中pattern,指定要验证的表达式.
昵称：pattern=“[-\w\u4E00-\u9FA5]{4,10}”
密码：pattern=“[\dA-Za-z]{6,16}”
手机号码：pattern=“1[3578]\d{9}”
年龄：pattern=“\d|[1-9]\d|1[0-2]\d”
6.H5的结构元素
5.作业
-
首先是一个表格，边框为1，标题为 “ 购物车 ”
-
其次分为标题（
th）和内容（tbody） -
标题两行，内容三行，一共是五行四列
-
其中包含行合并（
colspan）和列合并（rowspan）<div align="center"> <p>购物车</p> <table border="1"> <tr> <th rowspan="2">名称</th> <th colspan="2">2016-11-22</th> <th rowspan="2">小计</th> </tr> <tr> <th>重量</th> <th>单价</th> </tr> <tbody> <tr> <td>苹果</td> <td>3公斤</td> <td>5元/公斤</td> <td>15元</td> </tr> <tr> <td>香蕉</td> <td>2公斤</td> <td>6元/公斤</td> <td>12元</td> </tr> <tr> <td colspan="3">总价</td> <td>27元</td> </tr> </tbody> </table> </div>- 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"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 按照从上到下的顺序，依次进行即可; --> <img src="img/" alt="" id="top"> <a href="#">免费邮</a> <a href="#">企业邮</a> <a href="#">VIP邮箱</a> <a href="#">帮助</a><br> <img src="img/" alt=""> <ul> <li>63/126/yeah三大免费邮箱均默认开放</li> <li>全面支持iPhone/iPad及Android等系统</li> <li>客户端、手机与网页，实现发送、阅读邮件</li> </ul> <br><br><br><br><br><br><br><br><br><br><br><br> <a href="#top">立即同步普通登录手机号登录</a><br> <form action="#" method="GET"> <label for="user">用户</label> <input type="text" id="user" name="email">@ <br> <label for="pwd">密码</label> <input type="password" name="pwd"><br> <label for="ver">版本</label> <select name="" id="ver"> <option value="默认">默认</option> <option value="2020">2020</option> <option value="2019">2019</option> <option value="2019">2018</option> </select><br> <input type="checkbox">自动登录 <input type="checkbox" checked>SSL<br /> <input type="submit" value="登录" /> <input type="button" value="注册" /> </form> <img src="img/netease_logo.gif" alt=""> <a href="#">关于网易</a> <a href="#">官方博客</a> <a href="#">客户服务</a> <a href="#">隐私政策</a> <a href="#">版权所有©2015-2021</a> </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
第三章：CSS3 样式基础
知识点：
概念
语法格式
的使用
4.三类范围
为什么使用CSS
HTML语法，在网页上显示数据，第一章p br b font 第二章 table form标签。
网页增加效果，就是样式，样式相当于女孩儿化妆。
概念
层叠样式表（Cascading Style Sheet）
html是骨架，是内容。css是衣服，起到装饰的作用，花花绿绿的。
优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
2.语法格式
语法格式：
标签|ID|类 选择器{属性：值; … n;}
范围分三类
行内样式、页内样式、外部样式这三类。
2.1行内样式
描眉：
<font color='red'><p>静夜思</font></font>
<p style="font-style: italic;font-size: 24px;">内容<p
- 1
- 2
style=“属性:值;属性2:值2;属性3:值3;”
这种风格，仍然不太友好，就是HTML5标签里面包含了样式，我们的目的是让二者尽量分离,分离的好处，就是格式更为清晰。
2.2页内样式
脸上涂粉;
页内样式的范围，比行内样式要大，在整个网页内部可以使用。
<style>
p{font-size:18px;
color:green;
}
</style>
- 1
- 2
- 3
- 4
- 5
设计了一个行内样式，写了一个p标签的样式，好处是只要是p标签，都变色了。坏处呢？都变了。
h1{text-align: center;}
- 1
超链接样式+导航效果：
<!--1.网页格式-->
<table >
<tr>
<td><a href="复习.html">二次元</a></td>
<td><a href="">脑残</a></td>
<td><a href="">科幻</a></td>
<td><a href="">搞笑</a></td>
<td><a href="">鬼畜</a></td>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
样式：
<!--2.样式;
border-collapse: collapse;去除间隙，出来一条线;
text-decoration: none;去除a标签的下划线 ；
a:hover:悬停效果;
-->
<style>
table{width:100%;border:1px solid #f00;
border-collapse: collapse;}
tr{text-align: center;}
td{border:1px solid #f00;height: 50px;}
a{text-decoration: none;font-size: 18px;}
a:hover{color: red;}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
2.3 外部样式
比如: 化妆；行内样式，像描眉一样，非常的细腻；
页内样式：像化妆的时候，向脸部图白色；
外部样式：相当于变脸的，抖音看下，男的可以变女；买个皮；faceU，APP
外部样式也可以相当于婚纱影楼的婚纱等
多个网页可以使用同一个外部样式；
3.选择器类型
1.标签选择器
标签{ 属性:值;属性2:值2;属性3:值3}
命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于id命名
id选择器不可重复 独一无二
2.类选择器
类样式选择：就是给标签分类；
在设计CSS样式;text-align:center:文本居中;right:文本居右.;类样式选择器，定义之后，可以在下面多个地方进行
调用 。定义的语法格式：
.类样式名{属性：值；属性2：属性2：值2；属性3：值3}
class=“类样式名”
选择器
ID：编号，学号、考号，都是唯一的。网页当中，我们一般用唯一标识的一个标签，使用ID选择器，用来和其他标签做区分，一般使用ID选择器的都是大范围的标签。
定义ID选择器使用#选择器名 {属性：值；属性2：值2；属性3：值3}
使用，在html里面，标签后面加id=
命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于class命名
一个标签可用多个类名 共性样式可以巧用
作业：大家可以使用截图的方式，来实现一个简单的网站页面.
4.通配符选择器
通配符选择器是用来选择所有元素。比如下面将页面上所有元素的 margin 和 padding 都设置为 0。
* {
``marigin: ``0``; 外边距，元素与元素
``padding``: ``0``;
}
- 1
- 2
- 3
- 4
总结一下：
如果设置块大范围，一般使用ID选择器，它是唯一的；
如果设置多个类别的时候，就使用类别选择器（类样式选择器）
如果网页中有很多同类的标签有共同的样式，可以使用标签选择器。
4.选择器使用范围
行内样式：眼影;行内样式是style属性
页内样式：自己新衣服;页内样式，是style标签;也可以多次使用，被当前页面内的多个标签多次使用。
外部样式：租用婚纱;外部样式没有了style
<link rel="stylesheet" href="css/" type="text/css"/>
//方法二
<style>
@import url(./);
</style>
- 1
- 2
- 3
- 4
- 5
外部样式的好处是，定义一次，可以被多个网页使用。
5.选择器的优先级*
外部<页内<行内，距离最近的样式优先使用
id选择器>class选择器>标签选择器
优先级的提升
值后+！important（仅可直接选中）：使得优先级最大
6.字体样式
修改字体时，只要电脑内有的字体都可以进行修改
怎么看电脑内装的字体，计算机，c盘，Windows，fonts,就可以看到我们电脑上装的所有字体
7.文本样式
letter-spacing:字母间距
-
color颜色取值的格式
1、直接写颜色 也要复合写法 yellowgreen 黄绿色
2、16进制
3、RGB 红绿蓝 三原色
颜色不需要记，ui会给你的
-
文字对齐方式
text-align: center 居中 right 右对齐 left 左对齐
对齐参照点不同 ，对齐的方式也不同，以父级元素为标准，不设宽度，默认为浏览器宽度。暂时有这个概念text-indent 首行缩进
单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化，首行缩进用em比较合适
开启控制台进行调整
-
line-height： 设置行高，设置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中.
-
设置文本装饰
text-decoration: line—throw 中划线
underline 下划线
overline 上划线
8.伪类
概念：
格式 ，选择器后面加冒号
ul>li:first-child、last-child等伪类。
:link 未访问过的颜色;
:visited 已经访问过的颜色;
:hover 鼠标悬停到上面的时候颜色;
:active 鼠标点的时候颜色;
a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！
在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。这样，浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。当然，如果故意打乱顺序，也会造成一些特殊的效果。比如，可以为链接制造出下划线颜色与文字颜色的差异。
其实这个CSS问题早已有高人提出啦，还是个老外呢。他给总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。未访问/已访问/悬停/点击
再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .
最后经验补充：
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面！
最常用的是啥？？？
9.鼠标
鼠标指针变化
直接在style下面写属性cursor：值；
其中的值分别代表：
pointer:指针变小手
move: 移动
wait: 等待（不要用）
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
10.作业
使用CSS类来制作京东导航
第四章：CSS3深入选择器
知识点：
1.并集选择器（多个）
2.交集选择器（组合选择器）
3.子代选择器
4.后代选择器
5.属性选择器
6.结构伪类选择器
7.伪元素选择器
8.案例作业
1.并集选择器
语法：
选择器1，选择器2，选择器n{共同的属性1：值1;…n;}
含义：
将选择器1，选择器2，选择器n，共同的属性，一次性，统一设置。
优点：
可以节省我们的代码，提高工作效率。
h1,h2,p{font-size: 18px;color: red;}
当多个标签的样式一样的时候，可以使用“，”隔开，这样这些标签定义的样式，就一模一样。
- 1
- 2
2.交集选择器
既要符合选择器1的特点，也要符合选择器2的特点；
优点：
可以精确定位到某个网页元素。
精确定位：
如何写这个标签；
选择器1选择器2{属性：值;}
{color:blueviolet;
font-weight: bolder;}
这种定义，表示：类样式是yuebing的p标签。它既符合p的样式规则，又符合yuebing的样式规则。
font-weight:课设置加粗或细；span:小区域的标签，比p段落范围小。
- 1
- 2
- 3
- 4
3.子代选择器
元素：父子关系；兄弟关系；
父元素下的子元素，如何进行修饰，进行查找定位.
格式：
父元素>子元素{样式声明；}
子代选择器：只包含直接儿子层级
<ul id="father">
<li>唐诗
<ul>
<li>李白</li>
<li>杜甫</li>
</ul>
</li>
<li>宋词</li>
<li>元曲</li>
ul#father>li{border:1px solid #f00; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
4.后代选择器
祖代元素 后代元素的关系;
语法：
祖代元素 后代元素{样式声明;}
注意：
1.祖代元素和后代元素之间是有空格的；
2.后代元素包括子级元素，孙子级元素，重孙子，玄孙子…
<ul >
<li>唐诗
<ul>
<li>李白</li>
<li>杜甫</li>
</ul>
</li>
<li>宋词</li>
<li>元曲</li>
ul#father li{border:1px solid #f00; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
5.兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（。
选择器+标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p { background-color: antiquewhite; }
/* 类别选择器+标签选择器
兄弟：他们要相邻；
+：表示相邻下一个兄弟;
~: 表示后面所有的兄弟；
*/
/* .zhugong+p {
background-color: aquamarine;
} */
.zhugong~.xiongdi {
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="xiongdi">关羽</p>
<p class="zhugong">刘备</p>
<p class="xiongdi">张飞</p>
<p class="xiongdi">吕布</p>
</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
6.属性选择器
属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助类选择器或者 id选择器。
语法：
E:元素；Element; att:表示attribute 属性;
E [ att ] 匹配具有 att 属性的 E 元素 例如：input [ value ]
E [ att = ‘val’ ] 匹配具有 att 属性且属性值等于 val 的 E元素
E [ att ~= ‘val’ ] 匹配具有 att 属性且属性值包含 val词 的 E元素
E [ att ^= ‘val’ ] 匹配具有 att 属性且属性值以 val 开头的 E元素
E [ att $= ‘val’ ] 匹配具有 att 属性且属性值以 val 结尾的 E元素
E [ att *= ‘val’ ] 匹配具有 att 属性且属性值包含 val 的 E元素
注意：^以xx开头 href ^=‘www’
$以xx结尾
*包含xx
为了更好的演示：
<div class="demo clearfix">
<a href="http://" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="sites/file/" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="sites/file/" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/" class="links item" title="zh-cn">5</a>
<a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
<a href="" class="links item" title="open the website" lang="cn">7</a>
<a href="" class="links item" title="close the website" lang="en-zh">8</a>
<a href="" class="links item" title="">9</a>
<a href="" class="links item last" id="last">10</a>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
text-decoration: none;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDLlza8C-1672665963269)(asseits/)]
7.结构伪类选择器
1、同级别（不区分类型）
父元素 E:first-child 父元素中的第一个子元素 E
父元素 E:last-child 父元素中的最后一个子元素 E
父元素 E:nth-child( n ) 父元素中的第 N 个子元素 E
注意：
ul :first-child{ color:pink; } // 选择 ul 下的第一个子元素（ 第一个子元素可以是 div，p，span任何子元素）
ul li:first-child{ color: pink; } // 选择 ul 下的第一个元素名是 li 的子元素
nth-child( n ) 注意点：（n 可以是数字，关键字和公式）
数字：选择第 n 个子元素，里面数字从 1 开始
关键字： even 偶数，odd 奇数
ul li:nth-child( even ) // 选择 ul 中所有 偶数行的 li 子元素
公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素 或者超出了元素的个数会被忽略）
ul li:nth-child( n ) // 从 0 开始 每次加1 往后计算，相当于选择了所有的孩子 这里面必须是 n 不能是其他字母
偶数：2n 奇数：2n+1 5的倍数：5n 从第5个开始（包含第5个）到最后：n+5 前5 个（包含第5 个）：-n + 5
2、同类型（区分类型）
E:first-of-type：指定类型 E 的第一个
E:last-of-type：指定类型 E 的最后一个
E:nth-of-type( n )：指定类型 E 的第 n 个
区别：（两种相反的查找模式）
1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E 类型，然后再根据 E 找第 n 个孩子
8.其他伪类选择器
| 选择器 | 描述 |
|---|---|
| E:enabled | 选择匹配E的所有可用UI元素。 |
| E:disabled | 选择匹配E的所有不可用UI元素。 |
| E:checked | 选择匹配E的所有可用UI元素。 |
| :empty | 选中既没文本也无子元素（空格都不能有）的指定元素 |
| :not(x) | 找到不符合当前选择器的元素 |
9.伪元素选择器
::first-line 选择元素的第一行
::first-letter
::selection
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。
::before和::after
这两个主要用来给元素的前面或后面插入内容。
（1）这个最常用的便是是清除浮动了，无需再添加一个空的 div 并应用 clear:both; 样式，只需如下样式即可在元素尾部自动清除浮动。
(2)与"content"配合使用，可以实现许多特效。比如下面样式，当鼠标移动到链接上方，链接左右会出现悬浮方括号。
10.选择器的覆盖和继承
覆盖特性：
样式里面定义多个同样的标签，后面会覆盖的前面的定义。“就近原则”
继承特性：
1.只能把自己的样式继承给后代节点，但是不影响自己的父节点和兄弟节点。优点是有利于我们的开发
2.以下属性能被继承：
color, text-, font- , line-.
不能继承的属性：
有关盒子模型的属性，定位的属性，背景属性。
11.选择器的权重
注：一般只有选择器直接选中才会用到权重计算
!importent ------------infinity 无限大
权重计算规则
- 第一等：代表行内样式，如: style=””，权值为1000。或8
- 第二等：代表ID选择器，如：#content，权值为0100。称为100,有的称为4
- 第三等：代表类选择器，伪类和属性选择器，如.content，权值为0010。或2
- 第四等：代表标签选择器和伪元素选择器（:????，如div p，权值为0001。或1
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。0
- 继承的样式没有权值。可以当成0以下；
比较规则
- 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
- 无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
- 在权重相同的情况下，后面的样式会覆盖掉前面的样式。“就近原则”
- 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。
###11.表格案例
11.1 案例
11.2之前html样的，如何转换成css的样式，
<table>
<caption>2345导航网</caption>
<tr class="ji">
<td class="bt">新闻</td><td>新浪</td><td>网易</td><td>腾讯</td>
</tr>
<tr class="ou">
<td class="bt">军事</td><td>铁血</td><td>中华</td><td>凤凰</td>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
CSS3样式代码：
table{text-align: center;border-collapse: collapse;
margin:0 auto;width:80%;}
td,caption{border: 1px solid #999999;line-height: 50px;}
caption{background-color: red;font-weight: bolder;border-bottom:0px;
font-size: 28px;border-bottom: 0px;}
{background-color: antiquewhite;}
{background-color: azure;}
{font-weight: bolder;font-size: 24px;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
margin:0 auto;上下为0 左右自动适应，这样居中了。
input{border: none;width:20%}
第五章 电商网站实战
知识点：
1.设计思路；
2.重点；
3.细节
第一节：设计思路
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旅游网</title>
<style>
table#container{width:780px;margin: 0 auto;
border: #008000 1px solid;}
tr#nav{background: #8A2BE2;height: 40px;}
tr#shenti{background: #F0FFFF;height:600px;}
tr#footer{background: #000;height: 50px;}
</style>
</head>
<body>
<!--第一步 设计HTML页面-->
<table ><!--容器-->
<tr><td><img src="img/" title="旅游"/></td></tr><!--头-->
<tr >
<td></td>
</tr><!--脖子-->
<tr ><td></td></tr><!--主体-->
<tr ><td></td></tr><!--脚-->
</table>
</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
思路：化整为零
1.整体页面
2.把主体页面整成一个新页面
注意：要内容显示的两个方式：
background-color:颜色;
border:1px solid #f00;
3.主体页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主体页面</title>
<style>
table#zhuti{width:780px;height: 600px;
border:#000000 1px solid;margin: 0 auto;}
table#left{width:200px;height: 600px;
border: 1px solid #ff0000;}
#middle{width:450px;background-color:gray;}
#right{width:230px;background-color: burlywood;}
</style>
</head>
<body>
<table >
<tr>
<td><table ><tr><td>dd</td></tr></table></td>
<td><table ></table></td>
<td><table ></table></td>
</tr>
</table>
</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
导航思路：
1个是在页面上直接加；
2.新增一个导航页面；
border:边框；三个属性：1 px边框大小；solid:固定边框； #ff0000：颜色；
不这样做：background-color:背景色；
第六章 盒子模型和元素分类
知识点：
1.盒子模型
2.块状元素
3.行内元素
第一节：
1.盒子模型
margin:外边距
padding:内填充
margin|padding:当有一个参数的时候，表示4个值都一样。
margin:0 auto;–>等价于top 和bottom:0 ;left 和right:自动适应；左右居中；上下 |左右
margin:0 5px 0 5px;当四个参数的时候，顺序是上 --》右–》下 --》左；顺时针；
2.标准文档流
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。
块元素：独占一行；从上到下；
行内元素：多个占据一行；
3.块状元素
块：一个元素标签出来之后，就是一块区域。
特征：独占一行；可以设置宽、高；
包括：div hr p table ul ol 等
P 标签虽然是块级元素,但不可包含其他块级元素。 像 P标签 . <h1 ~6> dt标签 这几个块元素只可包含内联元素, 所以p标签无法嵌套 p div ul 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块状元素</title>
<style>
h1{border:#FF0000 1px solid;}
h2{background-color: #ff00ff;width:500px;}
h3{background-color: gray;}
P{background-color: yellow;}
table{background-color: #FF00FF;width:800px;
/*特殊的块状元素，这个元素标签之前web 1.0
* div也是特殊的元素，有内容，则独占一行，无内容不显示，必须设置宽；
hr：横线*/
}
hr{border: 1px solid #FF00FF;height: 0px;}
ul{background-color: antiquewhite;}
div{background-color: chocolate;}
</style>
</head>
<body>
<h1>一号标题，我最大</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<table>
<tr><td>加油加油</td></tr>
</table>
<hr />
<ul>
<li>首页</li>
<li>军事</li>
</ul>
<div>我是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
我们想让块状元素在一行显示，必然就是让块状元素编程向行内元素的特征。
块到行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页设计 </title><!--2.样式-->
<style>
div#rongqi{width:1024px;height: 600px;
background-color: #808080;margin:0 auto;}
#tou{height: 100px;width:100%;background-color: #FF00FF;}
#bozi{height: 30px;width:100%;background-color:antiquewhite}
#shenti{height: 400px;width:100%;background-color:blue;}
#jiao{height: 50px;width:100%;background-color:black;}
div#left{width:300px;height: 400px;float: left;
background-color: #FFFF00;}
div#center{width:424px;height:400px;float: left;
background-color:red;}
div#right{width:300px;height:400px;float: left;
background-color:chartreuse;}
</style>
</head>
<body><!-- 2.0之后，table 嵌套table-->
<div >
<div >头部Banner</div>
<div >围巾</div>
<div >
<div >左</div>
<div >afsdfasd中</div>
<div >右</div>
</div>
<div ></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
4.行内元素
行内元素，不是一块区域，是在一行内定义。
特征：不独占一行，设置宽、高无效，他的宽 高和自身的内容有关。
元素包括：a span
不独占一行，可以设置宽 、高，包括：input、button、img。别名：行内块元素。
display: block;可以让行内元素变成块状元素。
包括：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行变块状元素</title>
<style>
a{float:left; background-color: aquamarine;
text-decoration: none;text-align: center;
line-height:50px; /*设置行高和当前高度一致，垂直居中*/
width:80px;height: 50px;margin-left: 5px;}
</style>
</head>
<body>
<a href="#">腾讯</a>
<a href="#">貂蝉</a>
<a href="#">后羿</a>
<a href="#">诸葛亮</a>
<a href="#">鲁班</a>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
属性
顾名思义：显示的意思。
块状元素：
优点：占据一行，设置宽高，非常有利于对网页进行成块的分割，进行合理布局。
缺点：占据一行，有时候内容不多，会浪费空间。
行内元素：
优点：省着用，不浪费空间。
缺点：但是太抠门了，不好看。
格式：dispaly:下面的值
| 值 | 说明 |
|---|---|
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 |
| inline-block | 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 |
| none | 设置元素不会被显示 |
作用：
1.块级元素与行级元素的转变；block从行元素到块元素或inline从块元素到行元素;
2.控制块/行元素排到一行;inline-block
3.控制元素的显示和隐藏；none
6.浮动
为什么使用浮动？
块状元素：
首先应用于网页大布局，布局使用块状元素。
块状元素不可能都占据一行。
使用的是块状元素，需要让块状元素变为一行显示。
属性：
float:left; 左浮动
float:right;
float:none;
块状元素
1.默认是不浮动的；我们称之为标准流格式；按照网页从左到右，从上到下的顺序进行布局。
:left;左浮动float:right;右浮动；float:none;不浮动(就是默认，不使用浮动，仍然是标准流格式)
浮动元素的特征：
1.浮动元素会脱离标准流;简称 脱标；
2.浮动元素会一行显示，且顶端对齐；
3.浮动的元素具有行内块元素的特征；
作业：
1.导航菜单；
2.九宫格，做的时候，使用浮动/不使用浮动;
3.京东、小米、做个布局效果；
第七章 浮动塌陷
知识点：
1.浮动塌陷的概念
2.浮动塌陷的解决
1：浮动塌陷的概念
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动塌陷的出现</title>
<!--第2步：设计CSS样式;div:块状元素；特征：独占1行;
float:left;含义；向左看齐；
浮动塌陷：父容器没有设置高度；子容器设置浮动，则子容器会脱离父容器
的管理。
-->
<style>
#father{border:1px solid #f00;}
div#son1{width:200px;background-color: aquamarine;float:left;}
div#son2{width:200px;background-color: blanchedalmond;float: left;}
</style>
</head>
<body><!--这是第1步，设计html网页-->
<div ><!--父容器-->
<div >子容器一</div>
<div >子容器二</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
第二节：浮动塌陷的解决
解决方案1.
2.常见布局
总结：
布局，大致的页面框架，盒子结构图。综合使用标准流、浮动。
1.左右
2.三栏
3.通栏
通栏设计
碰到白底的，先设计成其他色底部或加有色边框
技巧：
1.先标准流定父位置，浮动定子元素位置。
2.浮动影响后面的标准流，不影响前面的标准流。
3.浮动塌陷
1.原因
浮动的子元素，脱离标准文档流。
2.为什么要清除浮动
2.1 父级没高度
2.2 子盒子浮动
2.3影响布局，清除浮动
3.方法：
3.1 额外标签法
设置clear属性，下面为4个值;
- none： 允许两边都可以有浮动对象
- both： 不允许有浮动对象
- left： 不允许左边有浮动对象
- right： 不允许右边有浮动对象
一般用clear:both，空标签必须是块级元素或br
思考？
问题:
会在元素末尾，增加一个额外的标签(空div或br)，我们前端设计人员看到这个额外标签的时候会发现
无内容，默认可能会删除。导致出现塌陷。这个是W3C推荐，但是我们不推荐用。
3.2 父级元素修饰
子不教，父之过：
父元素进行
overflow:
auto
hidden
scroll
3.3 父级添加after伪类
.clear:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear { 父级元素；
*zoom: 1;
/*为了兼容老式IE6 7*/
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
3.4 父级添加双伪元素
.clearFix::after,
.clearFix::before {
content: '.';
line-height: 0;
font-size: 0;
height: 0;
display: block;
clear: both;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
4.总结：
解决浮动塌陷，除了隔板法之外，其他基本都是修饰父级元素，让父级元素的样式更加大。
其他：
第八章 定位
1.静态定位
2.固定定位
3.相对定位
4.绝对定位
5.子绝父相
6.粘性定位
-index属性
float:left；浮动；使块状元素，脱离标准文档流，脱标。
把元素根据我们需要放在指定的位置，即定位。
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以︰
-
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
-
定位则是可以让盒子*的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
1.静态定位
静态定位，没有定位，当我们没有写定位的时候默认就是静态定位。不能通过4个方位名词改变位置也不能设置z-index。不脱离标准流。
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
2.固定定位
脱离标准流，把元素固定到指定的页面位置，不论浏览器上下怎么翻动，被固定的元素随着浏览器的滚动而滚动，就像你看到的讨厌的广告一样，不论你怎么翻页，他一直在哪里。
语法：
选择器{
position:fixed;
}
- 1
- 2
- 3
写完上述属性值以后，可以直接设置top值，或left，right，bottom值，这些值就是以页面左上角为圆点上左右下的距离。如果想在右下，就设置bottom：0；right:0;这种直接下上下左右的属性后面赋值，只对定位起作用。
主要用于页面广告
.box{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
/top: 80px;/
left: 0;
bottom: 0;
/right: 80px;/
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
元素的位置相对于浏览器窗口是固定位置，即固定在在浏览器上，即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间
如图，给绿色的div添加固定定位后，不会随着屏幕的滚动而发生变化，绿色的div固定在了图中的位置
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.fix{
width: 200px;
height: 400px;
background-color: green;
position: fixed;
left: 800px;
top: 100px;
}
</style>
</head>
<body>
<div class="fix"></div>
<h1>我是第1个h1标签</h1>
<h1>我是第2个h1标签</h1>
<h1>我是第3个h1标签</h1>
<h1>我是第4个h1标签</h1>
<h1>我是第5个h1标签</h1>
<h1>我是第6个h1标签</h1>
<h1>我是第7个h1标签</h1>
<h1>我是第8个h1标签</h1>
<h1>我是第9个h1标签</h1>
<h1>我是第10个h1标签</h1>
<h1>我是第11个h1标签</h1>
<h1>我是第12个h1标签</h1>
<h1>我是第13个h1标签</h1>
<h1>我是第14个h1标签</h1>
<h1>我是第15个h1标签</h1>
<h1>我是第16个h1标签</h1>
<h1>我是第17个h1标签</h1>
<h1>我是第18个h1标签</h1>
<h1>我是第19个h1标签</h1>
<h1>我是第20个h1标签</h1>
<h1>我是第21个h1标签</h1>
<h1>我是第22个h1标签</h1>
<h1>我是第23个h1标签</h1>
<h1>我是第24个h1标签</h1>
<h1>我是第25个h1标签</h1>
<h1>我是第26个h1标签</h1>
<h1>我是第27个h1标签</h1>
<h1>我是第28个h1标签</h1>
<h1>我是第29个h1标签</h1>
<h1>我是第30个h1标签</h1>
</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
3.相对定位 -重要
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
以自我为中心，自恋型选手
不脱离标准流，会随着浏览器的滚动而滚动。设置完定位以后，元素会随着设置的值发生变化，但是最初所占的位置还在，不会被下面元素顶上去。
注意：
相对定位，移动不会导致，与之相邻元素进行位移。
语法：
选择器：{
position：relative;
}
- 1
- 2
- 3
如果只对相对定位设置定位值，那么参照的原点是元素本身的左上角为原点。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSUycbik-1672665963280)(asseits/)]
相对定位不脱离标准流：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EMVRwGpl-1672665963281)(asseits/相对定位.png)]
*{
margin: 0;
padding: 0;
}
.a{
width: 100px ;
height: 200px;
/* margin: 40px; */
background-color: rgb(235, 92, 92);
position: relative;
top: 100px;
left: 100px;
}
.b{
width: 100px ;
height: 200px;
/* margin: 40px; */
background-color: rgb(113, 226, 21);
float: left;
border: 1px solid black;
}
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
- 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
4.绝对定位
脱离标准流:脱标
什么时候会脱标：浮动会脱标；固定会脱标；绝对会脱标；
语法：
选择器：{
position：absolute;
}
- 1
- 2
- 3
1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。
2.如果没有已经定位的祖先元素（如果父级无其他定位），那么会以浏览器窗口为基准进行定位。
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。
如图，黄色div是绿色div的父元素，给绿色div加一个absolute属性，如果绿色div的父元素没有添加任何定位，那么移动绿色div的坐标原点将从浏览器的左上角开始，如果绿div的父元素有任意定位，那么以该定位的父元素的左上角原点为标准
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
width: 272px;
margin: 0 auto;
}
.out{
width: 200px;
height: 200px;
background-color: rgb(241, 148, 7);
position: relative;
margin: 0 auto;
}
.fix{
width: 80px;
height: 200px;
background-color: green;
position: absolute;
left: 80px;
top: 100px;
}
</style>
</head>
<body>
<div class="out">
<div class="fix"></div>
</div>
<h1>我是第1个h1标签</h1>
<h1>我是第2个h1标签</h1>
<h1>我是第3个h1标签</h1>
<h1>我是第4个h1标签</h1>
<h1>我是第5个h1标签</h1>
<h1>我是第6个h1标签</h1>
<h1>我是第7个h1标签</h1>
<h1>我是第8个h1标签</h1>
<h1>我是第9个h1标签</h1>
<h1>我是第10个h1标签</h1>
<h1>我是第11个h1标签</h1>
<h1>我是第12个h1标签</h1>
<h1>我是第13个h1标签</h1>
<h1>我是第14个h1标签</h1>
<h1>我是第15个h1标签</h1>
<h1>我是第16个h1标签</h1>
<h1>我是第17个h1标签</h1>
<h1>我是第18个h1标签</h1>
<h1>我是第19个h1标签</h1>
<h1>我是第20个h1标签</h1>
<h1>我是第21个h1标签</h1>
<h1>我是第22个h1标签</h1>
<h1>我是第23个h1标签</h1>
<h1>我是第24个h1标签</h1>
<h1>我是第25个h1标签</h1>
<h1>我是第26个h1标签</h1>
<h1>我是第27个h1标签</h1>
<h1>我是第28个h1标签</h1>
<h1>我是第29个h1标签</h1>
<h1>我是第30个h1标签</h1>
</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
5.子绝父相
定位元素的原点是会发生变化的，情况有两种：
-
如果定位元素的祖辈元素没有任意定位，那么定位元素的原点就是就是浏览器的左上角。
-
如果定位元素的祖辈元素有过任意定位，那么定位元素的原点就是以该元素最近的祖辈元素的左上角为原点。
可以新建两个div，一个outBox，里面放一个inBox，然后在outBox里面不设置定位，尝试下设置inBox定位后的变化。然后给outBox设置一个定位，然后再看变化
子绝父相 :子元素是绝对定位，父元素是相对定位；
6.粘性定位
相对定位和固定定位的混合体。
CSS选择器{position:sticky;top:80px;}
使用条件：
- 父元素不能overflow:hidden或者overflow:auto属性。
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
7.做5173的导航条
步骤：
1、建立大的div盒子，宽100% 设置背景，本次我们用图片设置背景
background: url(“img/”) 0px -47px; 后面的两个值直接调整x轴和y轴，和我们昨天学习的background-position: 0px -47px;是一样的，这里是整合起来的写法。
2、用ul>li标签写，给ul设置成为版心,ul 块元素，可以浮动；
3、让li浮动起来，设置颜色格式，设置内边距
4、给li设置hover,此处的hover颜色也用背景图片
5、找到“热”这张图片，用定位的方法放在指定的位置
6、父亲用相对定位，因为这样不会脱离标准流，子类用绝对定位，这样可以一次设置不同的地方可重复使用。原理就是只要父类设置了任意定位，那么子类的定位就按照父类的左上角为原点来进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5173导航条</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 35px;
background-color: #3a83e8;
margin: 50px 0;
}
.clearfix{
clear: both;
content: "";
display: block;
}
.container{
width: 70%;
height: 35px;
margin: 0 auto;
}
.container li{
list-style: none;
float: left;
padding: 0 10px;
line-height: 35px;
font-size: 15px;
font-weight: bold;
color: white;
position: relative;
}
#top1{
background-color: #165fc1;
}
.container li:hover{
background-color: #165fc1;
}
img{
position: absolute;
top: -16px;
left: 49px;
}
</style>
</head>
<body>
<div class="box">
<ul class="container clearfix">
<li >首页</li>
<li>金币交易</li>
<li>帐号交易</li>
<li>装备交易</li>
<li>手游交易
<img src="img/sy_hot.png" alt="">
</li>
<li>游戏代练
<img src="img/sy_hot.png" alt="">
</li>
<li>点卡交易</li>
<li>帐号租赁
<!-- <img src="img/sy_hot.png" alt=""> -->
</li>
<li>游戏陪玩
<!-- <img src="img/sy_hot.png" alt=""> -->
</li>
</ul>
</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
-index属性
层级相同的情况下，越在后面的元素层级越高。
语法：选择器{z-index:n;}
-
n的取值为负整数、0、正整数，值越大，越靠上。
-
如果属性值相同，则按照书写顺序，后写着居上。
-
数字后没有单位。
-
只有定位的盒子才有z-index属性。
比如说，我们现在同时设置了1,2,3,4,5个div,如果我们现在给他们设置了绝对定位，此时会脱标，所有的div都层叠在了一起，那么第5个在最上面，因为层级一样的时候，5在后面，程序最后读到他，所以他在上面。如果想设置让2在最上面，就可以给2设置一个z-index：值，的属性值。z-index的取值越大，层级越高，取值范围是正整数，最大值是2147483647，这个最大数不需要记，我们工作中只要不是瞎写，用不了这么大的数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ position: absolute; }
.a{
width: 500px;
height: 500px;
background-color: rgb(241, 54, 54);
}
.b{
width: 400px;
height: 400px;
background-color: rgb(160, 241, 54);
/* z-index: 2; */
}
.c{
width: 300px;
height: 300px;
background-color: rgb(54, 141, 241);
z-index: 1;
}
.d{
width: 200px;
height: 200px;
background-color: rgb(241, 54, 110);
z-index: 1;
}
.e{
width: 100px;
height: 100px;
background-color: rgb(238, 241, 9);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></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
第九章 Emmet语法规则
Emmet—写HTML/CSS快到飞起
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面会介绍如何使用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DP6t9lv6-1672665963284)(asseits/)]
Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、VS code、Atom、Dreamweaver、HBuilder等等编辑器都可以使用。
1. 使用Emmet的好处
- 通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。
- 而 Emmet 把片段这个概念提高到了一个新的层次：我们可以设置 CSS 形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。
2. 安装Emmet
安装方式和平时安装插件一样搜索这个emmet插件安装，每个编辑器安装方式不同，请各自尝试。
3.语法格式
E 代表HTML标签。 +Tab 键
E*N +Tab 键
E#id 代表id属性。
总结：E默认是div
代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。
4.基本使用
-
自动计数(numbering)
这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符号即可. - 自定义属性使用 [attr1=‘’ attr2=‘’]
- 绑定多个类名用.符号连续起来即可
语法
w100
h10p+m5e
bgc
ti
ov:h、ov-h、ovh和oh
最后就是：看没用，操作几遍，几分钟你就能掌握这些指令，然后飞快的撸码
6.自动格式化代码
vsCode–>文件–》首选项-》设置
找,可以
“”: true,
“”:true,
第十章 背景图片
知识点
1.背景图片background-image
2.平铺属性：background-repeat
3.背景定位:background-position
4.背景大小：background-size
5.背景位置：background-attachment
3.精灵图
1.图片背景平铺
background-repeat:属性
| 值 | 说明 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复。这是默认 |
| repeat-x | 只有水平位置会重复背景图像 |
| repeat-y | 只有垂直位置会重复背景图像 |
| no-repeat | background-image不会重复 |
2.图片定位
background-position:定位
| 值 | 描述 |
|---|---|
| left top | left center | left bottom right top | right center | right bottom center top | center center | center bottom | 如果仅指定一个关键字，其他值将会是"center" |
| x% y% | 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos | 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
案例
王者农药
3.精灵图
css精灵图：又叫雪碧图，为什么会出现呢？我们知道页面的每一个图片的成功加载都需要去服务器上发送一个请求，当页面上有很多的图片的时候，这个页面就需要向服务器发送很多个请求，这样不仅给服务器造成了很大的压力，也减慢了页面的加载速度，所以人们常常把一些小的图片放在一个大的图片中，在页面显示某一个小的图片的时候，通过background属性的background-position来控制某一个小图片的显示，通过这种方式达到减缓服务器压力，加快页面加载速度的目的。
所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSSSprites——将多个图片整合到一个图片中，然后再用CSS来定位。大站，超过1000万次，就得优化。
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
优点
我们从前面了解到，CSSSprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP/https的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YizoObQF-1672665963287)(asseits/)]
微博上显示微博等级的时候，有个小皇冠，这个小皇冠是个很小的图片，它被存放在了下面这样一个大的图片中
<div class="sprites">
<h2>陈奕迅所长<span></span></h2>
</div>
- 1
- 2
- 3
.sprites{
background:url("sprites_bg.png") repeat-x left top;
width: 100%;
height: 501px;
text-align: center;
overflow: hidden;
}
h2{
margin-top: 150px;
color: #fff;
font-size: 24px;
}
span{
background-image: url("");
background-position: -24px -121px;
display: inline-block;
width: 20px;
height: 20px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
4.背景固定
background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。
取值：
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上
fixed背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动
第十一章 字体图标
1.字体图标使用场景：
主要用于显示网页中通用,常用的一些小图标
精灵图是有很多优点的,但是缺点很明显
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决了以上问题。就是字体图标iconfont.
字体图标可以作为前端工程师提供一种方便高效使用方式。展示的是图标,本质属于字体。
2.优缺点
优势
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。
灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！
兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。
劣势
图标字体只能被渲染成单色，或者是CSS3的渐变色
版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。
当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高
3.使用
3.1 字体库
/
IcoMoon是一个在线的图标字体生成器。其允许我们通过个性化设置生成ICON字体，我们可以上传本地ICON资源也可以使用IcoMoon给我们提供的丰富素材，最终生成的ICON字体有多种格式供我们选择（EOT,SVG,WOFF,TTF）。总而言之，有了这个免费资源，我们就可以个性化的生成ICON字体，然后应用到我们的WEB页面中了。
/
阿里巴巴矢量图标库
字体文件格式：
TrueType
Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
EOT – Embedded Open Type (.eot)
EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。
OpenType (.otf)
OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
WOFF – Web Open Font Format (.woff)
WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。
SVG (Scalable Vector Graphics) Fonts (.svg)
SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。
3.2 使用
3.2.1 下载
3.2.2 解压、复制到目录下
3…2 引入样式
3.3 粘贴小方框
3.4 设置样式
阿里字库的使用演示
3.3 字体图标原理
我们需要一个字体图标时，我们浏览器需要向服务器发送请求，服务器收到请求，就会处理后返回请求页面。假如一个字体图标发送一次请求，那我们需要很多个小字体图标，那就会使得大大加重服务器的负担，使其处理能力降低。实际上我们使用字体图标是以文件形式来发送的，可以一次性把 好多字体图标集合在一起的文件访问出来，这样把任务交给了浏览器来处理，每次使用字体图标浏览器可以直接把文件中的字体图标调用出来。这样大大减轻了访问发送请求的次数，减轻服务器的负担。
总结：
1.图片显示,img显示；背景图片显示
2.综合小图显示：精灵图；字体图标方式；
作业：
站
2.拼多多
第十二章 其他特性
1.圆角矩形
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
- border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
原理剖析
矩形和圆形的交集，切割效果，由圆进行切割。
作业：
京东按钮
2.盒子阴影
box-shadow
| 值 | 说明 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离，比较柔和 |
| spread | 可选，阴影的尺寸 外延值 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影（outset）改为内部阴影 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-upRx7NRQ-1672665963296)(asseits/)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mMMz3n8Y-1672665963297)(asseits/)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lw2mjXyK-1672665963298)(asseits/)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-plLmzzJP-1672665963299)(asseits/)]
3.文本阴影
text-shadow：网站特效；颜色一般是相近色；
| h-shadow | 必需，水平阴影的位置，允许负值 |
|---|---|
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
文本阴影效果，网站用的多不？挺多
https:///tools/index?name=css3_textshadow
text-shadow属性可以接受一个以逗号分割的阴影效果列表，并应用到该元素的文本上。阴影效果按照顺序应用，因此他有可能出现互相覆盖，但是他们永远不会覆盖文本本身。阴影效果不会改变框的尺寸，但有可能延伸到它的边界之外。阴影效果的堆叠层次和元素本身的层次是一样的。
4.复合属性
background
backgroud-size:
auto:全部显示完，如果块元素不够大，则只显示一部分；
cover:把块元素占据完毕，如果图片，可能显示不完，优先显示少的部分；
1000*874;874少；把高显示完毕，后面宽不够的，不显示
contain:图片缩放显示到块元素，问题是块元素可能有空白存在。
font
margin
padding
border
5.颜色
颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）。
黑色是#000000,白色#ffffff。黑色，没有光线，值都是0；白色红绿蓝都有色f。
计算机的本质核心是：0 1代码。f:1111 1111。为什么是0 1代码，因为电平值只有正 负。
3个双位数字的十六进制值写法，以＃符号开始。
rgb(红色，绿色，蓝色)三原色函数，来构建颜色;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uF5zb71o-1672665963301)(asseits/)]
1600多万个不同的颜色
红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。
现代大多数显示器能够显示至少16384种颜色。
如果你看看下面的颜色表，你会看到从0到255不同的红灯颜色。
要看到充满色彩混合时红灯从0到255变化，单击十六进制或RGB值。
hsl(hue, saturation, lightness)
- 1
| 值 | 描述 |
|---|---|
| hue - 色相 | 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色 |
| saturation - 饱和度 | 定义饱和度; 0% 为灰色， 100% 全色 |
| lightness - 亮度 | 定义亮度 0% 为暗, 50% 为普通, 100% 为白 |
hsl() 函数使用色相、饱和度、亮度来定义颜色。
HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
- **色相（H）**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
- **饱和度（S）**是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
- 亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。
支持版本：CSS3
极度色：红色 蓝色 绿色 255 255 255，三个255–》白色；0 0 0：黑色；
三个平均值：灰色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LntydwZg-1672665963303)(asseits/)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgDFAOTc-1672665963304)(asseits/)]
6.滤镜
语法:
filter:
blur(值) 模糊 给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊；
grayscale(*%*) 灰度
- 1
brightness（x) 使图片更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%，图像会比原来更亮。
hue-rotate(125deg) 给图像应用色相旋转。让图像中的颜色，在色相环中做对应的旋转。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
saturate(200%);
值为0%则是完全不饱和，值为100%则图像无变化。大于100%，则饱和度增高，色彩就会变重。
7.渐变
线性渐变—Linear Gradients 从上到下，从左到右，对角线等
语法：background: linear-gradient(direction, color-stop1, color-stop2, …);
径向渐变—Radial Gradients
语法：background: radial-gradient(center, shape size, start-color, …, last-color);
注意：渐变的值一定要找ui拿
-overflow
超出部分显示省略号
white-space:nowrap 文本不会换行，在同一行继续
overflow:hidden 溢出隐藏
text-overflow:ellipsis 用、省略号来代表被修剪的文本
none：不允许用户调整元素大小。
both：户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度
vertical：用户可以调节元素的高度。
第十三章 2D
1、知识点
掌握2D转换对元素进行移动、旋转、缩放和倾斜
掌握在3D空间中改变元素的形状、位置和大小
2、2D转换
属性：transform
作用：对元素进行移动、旋转、缩放、倾斜
语法：transform: none | transform-functions;
移动：translate()
旋转：rotate()
缩放：scale()
倾斜：skew()
3、移动
设定元素从当前位置移动至给定的位置（x坐标 y坐标）
| 方法 | 说明 |
|---|---|
| translate(x,y) | 2D转换，沿X和Y轴移动元素 |
| translateX(n) | 2D转换，沿X轴移动元素 |
| translateY(n) | 2D转换，沿Y轴移动元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background: url(./image/) no-repeat;
background-size: 300px 300px;
border: 1px solid black;
/* 两个值：2D转换，沿X和Y轴移动元素
不脱离标准流
*/
transform: translate(100px,200px);
}
</style>
</head>
<body>
<div>
</div>
<h1>哈哈</h1>
</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
4、旋转
设定元素顺时针旋转给定的角度，负值表示逆时针旋转
语法：
transform:rotate(ndeg);
- 1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7FW3hl7a-1672665963305)(asseits/)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UkKRPzOK-1672665963306)(asseits/)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background: url(./image/) no-repeat;
background-size: 300px 300px;
border: 1px solid black;
transform: translate(100px,200px) ;
/* 旋转默认旋转点是元素的中心位置 */
/* transform: rotate(30deg); */
/* 修改旋转点 以左上角为原点 */
/* transform-origin: bottom left; */
transform-origin: 20px 20px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>
</div>
<h1>哈哈</h1>
</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
5、缩放
设定元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）的参数
| 方法 | 说明 |
|---|---|
| scale(x,y) | 2D缩放转换，改变元素的宽度和高度 |
| scaleX(n) | 2D缩放转换，改变元素的宽度 |
| scaleY(n) | 2D缩放转换，改变元素的高度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background: url(./image/) no-repeat;
background-size: 300px 300px;
border: 1px solid black;
transform: translate(100px,200px) ;
/* 旋转默认旋转点是元素的中心位置 */
/* transform: rotate(30deg); */
/* 修改旋转点 以左上角为原点 */
/* transform-origin: bottom left; */
transform-origin: 20px 20px;
transform: rotate(30deg);
/* 宽高缩放2倍 */
transform: scale(2,2);
}
</style>
</head>
<body>
<div>
</div>
<h1>哈哈</h1>
</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
6、倾斜
设定元素翻转给定的角度，根据给定的水平线（X轴）和垂直线参数（Y轴）
| 方法 | 说明 |
|---|---|
| skew(x-angle,y-angle) 单位是deg | 2D倾斜转换，沿着X轴和Y轴 |
| skewX(angel) | 2D倾斜转换，沿着X轴 |
| skewY(angle) | 2D倾斜转换，沿着Y轴 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CwA0KOME-1672665963307)(asseits/)]
作业：相册
第十四章 动画
1、本章目标
掌握CSS3过渡制作网页动画效果
掌握CSS3动画制作网页动画效果
2、过渡属性
了解CSS3过渡概念
掌握CSS3过渡属性
CSS3过渡是元素从一种样式逐渐改变为另一种样式的效果
| 值 | 描述 |
|---|---|
| transition-property | 必需。指定CSS属性的name，transition效果，即哪个属性发生过度 |
| transition-duration | 必需。transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线，即规定过度效果在不同阶段的速度 |
| transition-delay | 定义transition效果开始的时候 延时 |
语法：
transition:property duration timing-function delay;
- 1
例：
div 鼠标放上的时候，宽变成500px,需要300毫秒完成
关键代码：
div{
transition:width 300ms;
}
- 1
- 2
- 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: red;
/* 第一个值：哪个属性产生过度效果
第二个值：多长时间完成过度效果 值是秒 或者毫秒
*/
transition: width 300ms;
}
div:hover{width: 500px; }
</style>
</head>
<body>
<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
如果想让多个属性同时发生过度。
语法：
选择器{
transition:属性1 时间，属性2，时间;
}
- 1
- 2
- 3
如上面例子，让宽和高在hover的时候，宽高都变为500px,同时产生300毫秒的渐变
关键代码：
div{
transtion:width 300ms,height 300ms;
}
- 1
- 2
- 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: red;
/* 第一个值：哪个属性产生过度效果
第二个值：多长时间完成过度效果 值是秒 或者毫秒
*/
transition: width 300ms,height 300ms;
}
div:hover{
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<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
transition-timing-function
指定transition效果的转速曲线，即规定过度效果在不同阶段的速度
| 值 | 说明 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果 【匀速】 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果 【慢快慢】 |
| ease-in | 规定以慢速开始的过渡效果【慢快】 |
| ease-out | 规定以慢速结束的过渡效果 【快慢】 |
| ease-in-out | 规定以慢速开始和结束的过度效 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f57OHus2-1672665963308)(asseits/)]
可以复制贝塞尔曲线的值，到时间曲线位置。
transition: left 10s cubic-bezier(0.17, 0.81, 0.88, 0.07);
- 1
transition-delay 延时
取值时s或者ms
表示给定的时间后才开始执行过度效果
transition: left 10s cubic-bezier(0.17, 0.81, 0.88, 0.07) 5s;
- 1
表示：元素的left属性，渐变执行10s,执行曲线，5s以后开始执行
3、CSS3动画
了解CSS3动画的应用场景
掌握创建动画的步骤
掌握CSS3设置动画属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDUMqM1R-1672665963309)(asseits/)]
1.创建动画的步骤
@keyframes：创建动画（关键帧）
animation：在对应元素上使用动画
2.规则
@keyframes规则
语法：
animation:name duration timing-function delay interation-count direction;
动画名字 时间 速度曲线 延迟时间 播放次数 方向[正向 反向]
- 1
- 2
练习前两个属性，让div绕屏幕一周
把动画分为5个部分，0% 30% 50% 80% 100% 分别设置left 和top的值
把div设置为相对定位
在属性中使用animation { 动画名 时间}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画——div绕屏幕一圈</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
position: absolute;
animation: first 5s;
background-color: red;
}
@keyframes first{
0%{
top: 0;
left: 0;
}
30%{
top: 0px;
left: 1000px;
}
50%{
top: 500px;
left: 1000px;
}
80%{
top: 500px;
left: 0px;
}
100%{
top: 0px;
left:0px;
}
}
</style>
</head>
<body>
<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
3.动画属性
| 值 | 描述 |
|---|---|
| animation-name | @keyframes 动画的名称 |
| animation-duration | 动画完成一个周期所花费的秒或毫秒。默认是 0 |
| animation-timing-function | 动画的速度曲线。默认是 “ease” |
| animation-delay | 动画何时开始。默认是 0 |
| animation-interation-count | 动画被播放的次数。默认是 1，值为infinite表示播放无限次 |
| animation-direction | 动画是否在下一周期逆向地播放。默认是 “normal” |
4.方向
animation-direction
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放 |
| reverse | 动画反向播放 |
| alternate | 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放 |
| alternate-reverse | 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放 |
4.模式
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见
| 值 | 描述 |
|---|---|
| normal | 不改变默认行为 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
第十五章 3D
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tvYc6T65-1672665963310)(asseits/)]
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
3D效果
给需要做3D动画的元素的父元素开启3D效果
transform-style:preserve-sd;
设置距离值：舞台深度
perspective:2000px;
:translate3d的两种写法；
（延x轴旋转）
透视(perspective)
电脑显示屏是一个2D平面（X和Y轴），图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
理解透视距离原理：
透视.png
perspective-origin
设置视距的基点，看W3C的图就能明白
基点默认值是50% 50%即center，表示视距基点在中心点不进行任何位移。你可以让基点在XY轴上进行位移，产生上图那样的效果。注意该属性同样应该定义在父元素上，适用于整个3D舞台。它需要和perspective属性结合着一起用。效果如下图：
.td1 {
transform-style: preserve-3d;
perspective: 200px;
perspective-origin: center;
}
- 1
- 2
- 3
- 4
- 5
为节约篇幅
移动translate
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
translateZ的三个div比较。
rotateX:左手准则
rotateY,左手朝下;
rotateZ:垂直屏幕
rotate3d(x,y,z,deg)
开关门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>开门大吉</title>
<style>
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(images/) no-repeat;
position: relative;
perspective: 1000px; /*给父盒子增加透视*/
}
.door-left,.door-right {
position: absolute;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s; /*连个门都是过渡*/
}
.door-left {
left: 0;
border-right: 1px solid #000;
transform-origin:left; /*旋转中心点*/
}
.door-right {
right: 0;
border-left: 1px solid #000;
transform-origin:right; /*旋转中心点*/
}
.door-left::after,
.door-right::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); /*自己高度的一半*/
}
.door-left::after {
right: 5px;
}
.door-right::after {
left: 5px;
}
/* 鼠标经过section，两个门进行翻转 */
section:hover .door-right {
transform: rotateY(130deg);
}
section:hover .door-left {
transform: rotateY(-130deg);
}
</style>
</head>
<body>
<section>
<div class="door-left"></div>
<div class="door-right"></div>
</section>
</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
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rxb423dg-1672665963315)(asseits/)]
ackface-visibility
用于是否可以看见3D舞台背面，默认值visible表示背面可见，可以设成hidden让背面不可见。通常当旋转时，如果不希望背面显示出来，该属性就很有用，设成hidden即可。一图胜千言：
于其绕着X轴旋转了180度，如下图.
[外链图片转存中…(img-tvYc6T65-1672665963310)]
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
3D效果
给需要做3D动画的元素的父元素开启3D效果
transform-style:preserve-sd;
设置距离值：舞台深度
perspective:2000px;
:translate3d的两种写法；
（延x轴旋转）
透视(perspective)
电脑显示屏是一个2D平面（X和Y轴），图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
理解透视距离原理：
[外链图片转存中…(img-6wPWYqwf-1672665963311)]
透视.png
perspective-origin
设置视距的基点，看W3C的图就能明白
基点默认值是50% 50%即center，表示视距基点在中心点不进行任何位移。你可以让基点在XY轴上进行位移，产生上图那样的效果。注意该属性同样应该定义在父元素上，适用于整个3D舞台。它需要和perspective属性结合着一起用。效果如下图：
[外链图片转存中…(img-ylPfKt0i-1672665963313)]
.td1 {
transform-style: preserve-3d;
perspective: 200px;
perspective-origin: center;
}
- 1
- 2
- 3
- 4
- 5
为节约篇幅
移动translate
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
translateZ的三个div比较。
rotateX:左手准则
[外链图片转存中…(img-K90Zb1WQ-1672665963314)]
rotateY,左手朝下;
rotateZ:垂直屏幕
rotate3d(x,y,z,deg)
开关门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>开门大吉</title>
<style>
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(images/) no-repeat;
position: relative;
perspective: 1000px; /*给父盒子增加透视*/
}
.door-left,.door-right {
position: absolute;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s; /*连个门都是过渡*/
}
.door-left {
left: 0;
border-right: 1px solid #000;
transform-origin:left; /*旋转中心点*/
}
.door-right {
right: 0;
border-left: 1px solid #000;
transform-origin:right; /*旋转中心点*/
}
.door-left::after,
.door-right::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); /*自己高度的一半*/
}
.door-left::after {
right: 5px;
}
.door-right::after {
left: 5px;
}
/* 鼠标经过section，两个门进行翻转 */
section:hover .door-right {
transform: rotateY(130deg);
}
section:hover .door-left {
transform: rotateY(-130deg);
}
</style>
</head>
<body>
<section>
<div class="door-left"></div>
<div class="door-right"></div>
</section>
</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
ackface-visibility
用于是否可以看见3D舞台背面，默认值visible表示背面可见，可以设成hidden让背面不可见。通常当旋转时，如果不希望背面显示出来，该属性就很有用，设成hidden即可。一图胜千言：