HTML+CSS+移动端前端
- 一、HTML
- 二、CSS
- 1.CSS层叠样式表一
- 2.CSS层叠样式表二
- 3.CSS的三大特性
- 4.CSS盒子模型
- 5.ps基本操作
- 6.综合案例
- 7.圆角边框（超级重点）
- 8.盒子阴影（重点）
- 9.文字阴影
- 10.CSS浮动
- 11.CSS定位
- 11.1定位
- 11.2定位综合案例（淘宝焦点图布局）
- 11.3网页布局总结
- 11.4元素的显示与隐藏
- 12.CSS高级技巧
- 13.HTML5和CSS3提高
- 13.1HTML5的新特性
- 13.2CSS3的新特性
- 13.3 CSS3 2D转换
- 13.4 CSS3 动画
- 13.5 CSS3 3D转换
- 13.6 浏览器私有前缀
- 13.6总结：
- 14.PC端品优购项目
一、HTML
3.网页开发工具：
3.1VSCode工具创建页面
3.2VSCode插件使用
3.3DOCTYPE和lang以及字符集的作用
1.<!DOCTYPE>
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页（DOC–文档，type–类型）
例如：当前页面使用html5版本来显示网页
注意:
（1）<!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前。
（2）<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
2.lang
3.字符集
注意：
上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8"，不要写成"utf8"或"UTF8”。
例如：
4.常用标签
4.1标签语义
1.简单理解就是标签的含义
2.根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰
4.2标题标签
实例：
<body>
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
</body>
4.3段落标签和换行标签
段落标签换行标签  
在网页中，想要分段和换行，浏览器不会根据代码编译器中的换行自动换行，需要在代码中使用段落标签和换行标签
实例：
<body>
</body>
4.4体育新闻案例
篇幅太长，没什么好说的，就是熟悉标题标签，段落标签，换行标签使用
4.5文本格式化标签
标签语义：突出重要性，比普通文字更重要
案例
<body>
<strong>加粗文字</strong> <br>
<b>加粗文字</b><br>
<em>斜体文字</em><br>
<i>斜体文字</i><br>
<del>删除线</del><br>
<s>删除线</s><br>
<ins>下划线</ins><br>
<u>下划线</u><br>
</body>
4.6 < div >和< span >标签
案例：
<body>
<div>div是一个盒子，独占一行</div>12345
<div>div是一个盒子，独占一行</div>
<span>qwe</span>
<span>asd</span>
<span>wer</span>
</body>
4.7图像标签和路径
1.标签
img 标签没有独占一行,所以是行内元素
[外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblog.cnims.cn/JAqS10d260b4b9e74598e8229efc7cf3.png0862)(https://img-计blog.csdnimg.cn/10d260b4b9e7459e9278e82293fc7cf2.png)]
重点的：
src属性是必须写的;
alt属性可以用于替换文本。图像不能显示的文字（即不能显示图像时，用alt里面的文字替代）;
title属性可以用于提示文本，鼠标放在图像上显示的文字;
width和height一般设置其中一个，另一个会等比例缩放;
border属性一般在CSS设置;
img标签是行内标签，不独占一行.
案例：
<body>
<img src="./img.jpg" alt="">
<img src="./img" alt="我是刘德华">
<img src="img.jpg" alt="" title="我是刘德华">
<!-- 设置图片宽高边框粗细 -->
<img src="img.jpg" alt="" title="我是刘德华" width="200px" height="300px" border="15px" >
<!-- 如果只设置宽或高，则会等比例缩放 -->
</body>
2.路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于HTML页面的位置
绝对路径:是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:web\img\logo.gif”或完整的网络地址“http://www.itcastcn/images/logo.gif”。
4.7超链接标签（重点）
在htm标签中，标签用于定义超链接，作用是从一个页面链接到另一个页面。
1.超链接的语法规范
**再次强调：**target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式
2.链接的分类
怎么用锚点链接：
1.在链接文本的href属性中，设置属性值为“#名字”的形式，如第二集</ a>
2.找到目标位置的标签，里面添加一个id属性 = 刚才的名字（不要#号）。如：
第二级介绍
<body>
<a href="#1">姓名</a>
<a href="#2">年龄</a>
<h5 id = "1">11111</h5>
<h5 id = "2">222222</h5>
</body>
5.HTML中的注释和特殊字符
5.1注释
<!--要注释的内容-->,快捷键：Ctrl+？
5.2特殊字符
应用：
<body>
<!-- 123456 -->
<!-- 特殊字符 -->
讲 究
<!-- 例如要输出：< p >是一个段落 -->
<p>是一个段落
</body>
结果：
6.综合案例
7.HTML标签（下）
目标：
1.能够书写表格
2.能够写出无序列表
3.能够写出3~4个常用input表单类型
4.能够写出下拉列表表单
5.能够使用表单元素实现注册页面
6.能够独立查阅W3C文档
7.1表格标签
7.1.1.表格的主要作用**
表格主要用于显示，展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
Pink老师总结:表格不是用来布局页面的，而是用来展示数据的.
7.1.2表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
1.<table></table>是用于定义表格的标签
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在 <tr></tr>标签中
7.1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示(自带属性，不需要自己设置)
<th>标签表示HTML表格的表头部分(tablehead的缩写)
<table>
<tr>
<th>姓名</th>
...
</tr>
</table>
总结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示
7.1.4表头属性
表格标签这部分属性开发中不常用，后面通过CSS来设置。
<body>
<table align="center" border="1px" cellpadding="20" cellspacing="0" width="500" height="200">
<tr><th>姓名</th><th>性别</th></tr>
<tr><td>张三</td><td>性别</td></tr>
<tr><td>李四</td><td>性别</td></tr>
<tr><td>王五</td><td>性别</td></tr>
</table>
</body>
结果:
7.1.5案例：小说排行榜
1.第一行里面是th表头标签
2.第二行开始是td普通标签
3.单元格里面可以放任何元素，文字链接图片等都可以
<body>
<table align="center" border="2px" cellpadding="5px" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1.</td>
<td>鬼吹灯</td>
<td><img src="./images/down.jpg" alt=""></td>
<td>345</td>
<td>123</td>
<td><a href="https://www.bilibili.com/">贴吧</a>
<a href="https://www.bilibili.com/">图片</a>
<a href="https://www.bilibili.com/">百科</a>
</td>
</tr>
<tr>
<td>1.</td>
<td>鬼吹灯</td>
<td><img src="./images/down.jpg" alt=""></td>
<td>345</td>
<td>123</td>
<td><a href="https://www.bilibili.com/">贴吧</a><a href="https://www.bilibili.com/">图片</a><a href="https://www.bilibili.com/">百科</a></td>
</tr>
<tr>
<td>1.</td>
<td>鬼吹灯</td>
<td><img src="./images/up.jpg" alt=""></td>
<td>345</td>
<td>123</td>
<td><a href="https://www.bilibili.com/">贴吧</a><a href="https://www.baidu.com/">图片</a><a href="https://www.bilibili.com/">百科</a></td>
</tr>
<tr>
<td>1.</td>
<td>鬼吹灯</td>
<td></td>
<td>345</td>
<td>123</td>
<td><a href="https://www.bilibili.com/">贴吧</a><a href="https://www.bilibili.com/">图片</a><a href="https://www.bilibili.com/">百科</a></td>
</tr>
<tr>
<td>1.</td>
<td>鬼吹灯</td>
<td></td>
<td>345</td>
<td>123</td>
<td><a href="https://www.bilibili.com/">贴吧</a><a href="https://www.bilibili.com/">图片</a><a href="https://www.bilibili.com/">百科</a></td>
</tr>
</table>
</body>
7.1.6表格结构标签
使用场景:因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用:<thead>标签表格的头部区域、<tbody>标签表格的主体区域.这样可以更好的分清表格结构。
例如对于上述案例，表头可以种<thead>包起来，其他的用<tbody>包起来
7.1.7合并单元格
特殊情况下，可以把多个单元格合并为一个单元格
1.合并单元格方式
跨行合并：rowapan=“合并单元格的个数“
跨列合并：colspan=”合并单元格的个数“
2.目标单元格（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
3.合并单元格的步骤
1.先确定是跨行还是跨列合并。
2找到目标单元格，写上合并方式=合并的单元格数量。比如:<tdcolspan=“2”>.
3.删除多余的单元格。
例如：
<body>
<table width="500" height="250" border="2px" cellspacing="0">
<tr>
<td></td>
<!-- 1.先确定是跨行还是跨列合并。
2找到目标单元格，写上合并方式=合并的单元格数量。比如:<tdcolspan=“2”></td>.
3.删除多余的单元格。 -->
<td colspan="2" ></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
7.1.7表格总结
表格学习整体可以分为三大部分:
1.表格的相关标签
table标签 tr行标签 td单元格标签 th表头单元格标签
2.表格的相关属性
3.合并单元格
7.2列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便
根据使用情景的不同，列表可以分为三大类：无序列表，有序列表和自定义列表
7.2.1无序列表（重点）
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
无序列表的基本语法格式如下:
<body>
<ul>
<li>榴莲</li>
<li>豆腐</li>
<li>罐头</li>
</ul>
</body>
注意：
1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
3.<li>与</li>之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
7.2.2有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项
有序列表的基本语法格式如下:
<body>
<ol>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
</ol>
</body>
注意：
7.2.3自定义列表（重点）
自定义列表的使用场景:
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
例如：
在HTML标签中，<dl>标签用于定义描述列表(或定义列表)，该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
其基本语法如下:
<body>
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
</body>
结果：
注意：
7.2.4列表总结
注意：
1.学会什么时候用无序列表，什么时候用自定义列表
2.无序列表和自定义列表的代码怎么写？
7.3表单标签
网页中的表单：例如注册页面，登录页面就是一个表单
7.3.1为什么需要表单
使用表单是为了利于用户填写，从而收集用户信息
7.3.2表单的组成：
7.3.3表单域
表单域是一个包含表单元素的区域
在HTML标签中。<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<body>
<form action="demo.php" method="get" name="name1"></form>
</body>
7.3.4表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
1.input输入表单元素
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值" />
<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
1.name和value是每个表单元素都有的属性值主要给后台人员使用
2.name 表单元素的名字,要求单选按钮和复选框要有相同的name值
3.checked属性针对单选按钮和复选框，只要作用是设置当页面打开的时候就可以默认选中这个按钮
4.maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
应用：
<body>
<form action="">
<!-- text -->
<!-- maxlength设置最多能输入几个字符 -->
用户名：<input type="text" name="uesrname" value="请输入用户名" maxlength="6"> <br>
<!-- 密码框，用户输入看不见输入的内容 -->
密码：<input type="password" name="userpass"> <br>
<!-- 单选按钮 ,实现多选一，例如:要么男，要么女-->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮,如下面，设置默认值为男，爱好默认吃饭 -->
性别：男 <input type="radio" name="sex" checked="checked"> 女 <input type="radio" name="sex"> <br>
<!-- checkbox,复选框，实现多选多 -->
爱好：吃饭 <input type="checkbox" name="hobby" checked="checked"> 睡觉 <input type="checkbox"> 摸鱼 <input type="checkbox">
<!-- type属性的 提交按钮，默认value值为“提交”，通过value值来修改要显示的内容 -->
<!-- 点击了提交按钮，可以把表单域form里面的表单元素 里面的值提交给后台服务器 -->
<input type="submit" value="注册">
<!-- 用法和提交按钮一样 -->
<input type="reset" value="重新设置"> <br>
<!-- 普通按钮button -->
<input type="button" value="请输入验证码"> <br>
<!-- file:定义输入字段和“浏览”按钮，供文件上传 -->
上传文件：<input type="file">
</form>
</body>
2.<label>标签
<label>标签为input元素定义标注（标签）
通俗来说：没使用<label>标签，需要把光标放到指定位置点击才能输入，使用<label>标签后，放到附近就行。例如想要选中男，没使用<label>标签，需要点到按钮上，使用<label>标签，点击”男”就能够选中。个人理解是等于给选项定义一个区域
<label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验.
语法:
<body>
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
</body>
注意：
<label>标签的for属性应当与相关元素的id属性相同
3.select下拉表单元素
使用场景:在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
语法：
<body>
<select name="" id="" >
<option value="" >选项1</option>
<option value=""selected="selected">选项2</option>
<option value="">选项3</option>
<option value="">选项4</option>
<option value="">选项5</option>
</select>
</body>
注意：
1.<select>中至少包含一对<option>.
2.在<option>中定义selected="selected"时，当前项即为默认选项
4.textarea文本域元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签
在表单元素中，<textarea>标签是用于定义多行文本输入的控件
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法：
<body>
<!-- cols表示一行可以写多少个字，rows方框可以"显示"多少行，但可以写很多行 -->
<textarea name="" id="" cols="30" rows="10">
文本内容
</textarea>
</body>
1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小
7.4综合案例
代码：
<!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>
<h2>青春不常在，抓紧谈恋爱</h2>
<table width="500">
<!-- 第一行 -->
<tr>
<td>性别</td>
<td>
<!-- 单选按钮设置相同的name属性才能实现单选 -->
<!-- label标签需要设定for属性值与input中id属性值相同才能实现 -->
<input type="radio" name="sex" id="nam">
<label for="nam"><img src="./images/man.jpg" alt="">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv"><img src="./images/women.jpg" alt="">女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select name="year" id="" >
<option value="" selected="selected">...请选择年...</option>
<option value="">选项1</option>
<option value="">选项1</option>
</select>
<select name="year" id="" >
<option value="" selected="selected">...请选择月...</option>
<option value="">选项1</option>
<option value="">选项1</option>
</select>
<select name="year" id="" >
<option value="" selected="selected">...请选择日...</option>
<option value="">选项1</option>
<option value="">选项1</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况</td>
<td>
<label for="marriage1">
<input type="radio" name="marriage" id="marriage1">未婚
</label>
<label for="marriage2">
<input type="radio" name="marriage" id="marriage2">已婚
</label>
<label for="marriage3">
<input type="radio" name="marriage" id="marriage3">离婚
</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历</td>
<td><input type="text"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox">妩媚的
<input type="checkbox">可爱的
<input type="checkbox">小鲜肉
<input type="checkbox">老腊肉
<input type="checkbox">都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="40" rows="3"></textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox"> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
7.5查阅文档
w3c：https://developer.mozilla.org/zh-CN/
MDN：https://www.w3school.com.cn/
二、CSS
1.CSS层叠样式表一
目标：
能够说出什么是CSS
能够使用CSS基础选择器
能够设置字体样式
能够设置文本样式
能够说出CSS的三种引入方式
能够使用Chrome调试工具调试样式
1.1 CSS简介
CSS的主要使用场景就是美化网页，布局页面的
1.1.1HTML的局限性
说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片<a>表示此外有链接。很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点:丑
虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐…………
1.1.2.CSS-网页的美容师
1.HTM主要做结构，显示元素内容
2.CSS美化HTML ，布局网页
3.CSS最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离
1.1.3.CSS语法规范
使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解 CSS样式规则。
CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。
选择器是用于指定CSS样式的HTML标签，花括号是对该对象设置的具体样式
属性和属性值是以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体的大小，文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分
CSS代码是写在head元素里面的
<!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>体验CSS语法规范</title>
<style>
/* 选择器{样式} */
/* 给谁改样式{改什么样式} */
p{
color: red;/*修改文字颜色为为红色 */
font-size: 16px; /* 修改文字大小为12像素 */
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
1.1.4CSS代码风格（养成这种习惯）
以下代码书写风格不是强制规范，但更符合实际开发书写
1.样式格式书写
展开格式：
p{
color: red;/*修改文字颜色为为红色 */
font-size: 16px; /* 修改文字大小为12像素 */
}
2.样式大小写风格
提倡使用小写
3.样式空格风格
空格规范
h3 {
color: red;
}
1.属性值的前面，冒号的后面，保留一个空格
2.选择器（标签）和大括号中间保留空格
1.2 CSS基础选择器
1.2.1CSS选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的
以上CSS 做了两件事
1.找到所有的h1 标签。选择器(选对人）
2.设置这些标签的样式，比如颜色为红色(做对事)
1.2.2选择器分类
选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器
1.基础选择器是由单个选择器组成的
2.基础选择器又包括:标签选择器，类选择器，id选择器和通配符选择器
1.2.3标签选择器
标签选择器(元素选择器)是指用 HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的
标签和所有的
标签。
优点：
能快速为页面中同类型的标签统一设置样式。
缺点：
不能设计差异化样式，只能选择全部的当前标签
优点：
能快速为页面中同类型的标签统一设置样式。
缺点：
不能设计差异化样式，只能选择全部的当前标签
语法：
标签名{
属性1：属性值1；
属性2：属性值2；
...
}
演示：
<style>
p{
color: green;
}
div{
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
结果：
1.2.4类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
类选择器在HTML中以class 属性表示，在CSS中，类选择器以一个点“.”号显示
注意：
1.类选择器使用“.”(英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的 ).
2.可以理解为给这个标签起了一个名字，来表示
3.长名称或词组可以使用中横线来为选择器命名
4.不要使用纯数字，中文等命名，尽量使用英文字母来表示
5.命名要有意义，尽量使别人一眼就知道这个类名的目的
6.命名规范：
语法：
结构需要用class属性来调用class类的意思
<div class='red'>变红色</div>
.类名{
属性1：属性值1；
属性2：属性值2；
...
}
案例：将所有拥有red类的HTML元素均为红色
<head>
<title>类选择器</title>
<style>
/* 类选择器口诀：样式点定义 结构类调用
开发最常用
*/
.red {
color: red;
}
</style>
</head>
<body>
<ui>
<li class="red">111</li>
<li class="red">222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ui>
<div class="red">我也想变红色</div>
</body>
1.2.5综合案例
通过这个案例练习两个地方:
1.类选择器的使用
2.div就是一个盒子,用来装网页内容的
<head>
<style>
.red{
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
.green{
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
1.2.6类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签简单理解就是一个标签有多个名字使用多类名可以把相同的CSS代码放到同一个选择器上，减少代码冗余。
例如：
1.多类名使用方式：
<div class="red font20">亚瑟</div>
（1）在标签class属性中写多个类名
（2）多个类名中间必须用空格分开
应用
<head>
<style>
.red{
color: red;
}
.font35{
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">刘德华</div>
</body>
2.2.多类名开发中使用场景：
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面
(2)这些标签都可以调用这个公共的类然后再调用自己独有的类
(3)从而节省CSS代码统一修改也非常方便
1.2.7id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id 属性来设置id 选择器，CSS中id 选择器以“#"来定义
语法：
#id名{
属性1：属性值1；
...
}
例如：将id为nav元素中的内容设置为红色。
#nav{
color:red;
}
然后html元素调用
具体使用：
id选择器口诀：样式“#”定义，结构id调用，只能调用一次，别人切勿使用（因为一个id只能出现一次）
<head>
<style>
#nav{
color: pink;
}
</style>
</head>
<body>
<div id="nav">迈克尔.杰克逊</div>
</body>
id 选择器和类选择器的区别
1.类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
3.id 选择器和类选择器最大的不同在于使用次数上
4.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript 搭配使用
1.2.8通配符选择器
在 CSS中，通配符选择器使用 “*” 定义，它表示选取页面中所有元素(标签)
语法：
*{
属性1：属性值1；
...
}
使用示例：
<head>
<style>
*{
color: red;
}
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ui>
<li>还是我的</li>
</ui>
</body>
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距后期讲)
1.2.9基础选择器总结
每个基础选择器都有使用场景，都需要掌握
如果是修改样式，类选择器是使用最多的
1.3 CSS字体属性
CSS Fonts（字体）属性用于定义字体系列，大小，粗细，文字样式（如斜体）
1.3.1字体系列
CSS使用font-family属性定义文本的字体系列。
<head>
<style>
h2{
font-family: '华文新魏';
}
p{
font-family: 宋体,Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色，</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错，</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它，</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
注意：
1.各种字体之间必须使用英文状态下的逗号隔开。首先找第一个字体，如果浏览器中没有这个字体，那么就用下一个。如果全都没有就用浏览器自带的字体
2.一般情况下，如果有空格隔开的多个单词组成的字体加引号
3.尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
1.3.2设置文字大小
CSS使用 font-size 属性定义字体大小。
p{
font-size: 20px;
}
1.px(像素)大小是我们网页的最常用的单位
2.谷歌浏览器默认的文字大小为16px
3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
4.可以给 body指定整个页面文字的大小
1.3.3字体粗细
<head>
<style>
.strong{
/* font-weight: bold; */
/* 这个700的后面不要加单位，他等价于bold */
font-weight: 700;
}
h2{
/* 设置字体不变粗normal，相当于400 */
font-weight: normal;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色，</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错，</p>
<p class="strong">静心,坦然,攻克一个又一个.</p>
</body>
1.3.4字体样式
<head>
<style>
p{
/* 变斜体 */
font-style: italic;
}
em{
/* 把斜体变正 */
font-style: normal;
}
</style>
</head>
<body>
<p>同学，上课时候的你</p>
<em>下课时候的你</em>
</body>
1.3.5font属性复合写法
<head>
<style>
/* 文字变倾斜 加粗 字号设置为16像素 微软雅黑 */
div{
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 微软雅黑; */
/* 符合属性：简写的方式，节约代码，但必须按照下面的语法font: font-style font-weight font-size font-family;一一对应，里面的font属性不可以调换 */
/* font: font-style font-weight font-size font-family; */
font: italic 700 16px 微软雅黑;
}
</style>
</head>
<body>
<div>三生三世十里桃花，一心一意百行代码</div>
</body>
1.3.6字体属性总结
1.4 CSS文本属性
CSS Text（文本）属性可定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。
1.4.1文本颜色
开发中最常用的是16进制
1.4.2对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式。
div{
text-align：center
}
<head>
<style>
h1{
text-align: center;
}
h2{
text-align: left;
}
h3{
text-align: right;
}
</style>
</head>
<body>
<h1>1111</h1>
<h2>2222</h2>
<h3>3333</h3>
</body>
1.4.3装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等学会添加下划线和删除下划线
1.4.4文本缩进
text-indent属性用来指定文本第一行缩进，通常是将段落的首行缩进
div{
text-text-indent:20px
}
通过设置该属性，所有素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
p{
text-indent: 2em;
}
em 是一个相对单位，就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小
1.4.5行间距
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
行高=文本高度＋上间距+下间距
使用：
p{
line-height:26px;
}
1.4.6文本属性总结
1.5CSS的引入方式
按照CSS样式书写的位置(或者引入的方式)，CSS样式表可以分为三大类：
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)
1.5.1内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中:
1.5.2行内样式表
1.5.3外部 样式表
1.5.4CSS引入方式总结
1.6综合案例
案例：新闻案例
1.搭建html结构页面
2.修改CSS样式
<!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>
body{
/* 字号大小为16px，行高为28px */
font:16px/28px '微软雅黑'
}
h1{
font-weight: 400;
/* 居中对齐 */
text-align: center;
}
.gray{
text-align: center;
color: #888888;
font-size: 12px;
}
a{
text-decoration: none;
}
.search{
color: #666;
width: 170px;
}
.btn{
font-weight: 700;
}
p{
text-indent: 2em;
}
.pic{
/* 给图片居中对齐是无效的，要给他的父标签P添加居中对齐 */
text-align: center;
}
.footer{
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<div class="gray">2019-07-03 16:31:47 来源:
<a href="">中国天气网</a>
<input type="text" value="请输入查询条件" class="search">
<button class="btn">搜索</button>
</div>
<hr>
<p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、
天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天
气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、
济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创
今年以来的新高。
</p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
<p class="pic">
<img src="images/pic.jpeg" alt="">
</p>
<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、
河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，
北京、天津、郑州均迎来高温日。
</p>
<p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表
温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温
度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
</p>
<h4>明日热度再升级！京津冀携手冲击38℃+</h4>
<p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上
的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。
明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、
河南北部、东北部分地区的最高气温都将达到或超过35℃。
</p>
<p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温
还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种
不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）
</p>
<p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>
1.7chrome调试工具使用
2.CSS层叠样式表二
目标：
能使用emmet语法
能够使用CSS复合选择器
能够写出伪类选择器的使用规范
能够说出元素有几种显示模式
能够写出元素显示模式的相互转换代码
能够写出背景图片的设置方式
能够计算CSS的权重
2.1 Emmet语法
Emmet语法的前身是Zenoding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。
2.1.1快速生成HTML结构语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.生成标签直接输入标签名按tab键即可 比如 div 后tab键，就可以生成<div></div> -->
<!-- div + tab -->
<div></div>
<!-- 2.如果想要生成多个相同标签加上*就可以了比如 div*3就可以快速生成3个div -->
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
<!-- 3.如果有父子级关系的标签，可以用>比如 ul>li就可以了 -->
<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 4.如果有兄弟关系的标签，用+就可以了比如div+p -->
<!-- div+p -->
<div></div>
<p></p>
<!-- 5.如果生成带有类名或者id名字的，直接写.demo或者 #two tab键就可以了 -->
<!-- span.two -->
<span class="two"></span>
<!-- span#two -->
<span id="two"></span>
<!-- 6.如果生成的div类名是有顺序的，可以用自增符号S -->
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- 7.如果想要在生成的标签内部写内容可以用{}表示 -->
<div>三生三世十里桃花</div>
<!-- div{三生三世}*5 -->
<div>三生三世</div>
<div>三生三世</div>
<div>三生三世</div>
<div>三生三世</div>
<div>三生三世</div>
<!-- div{三生三世$}*5 -->
<div>三生三世1</div>
<div>三生三世2</div>
<div>三生三世3</div>
<div>三生三世4</div>
<div>三生三世5</div>
</body>
</html>
2.1.2快速生成CSS样式语法
CSS基本采取简写形式即可。
1.比如 w200 按tab 可以生成 width:200px;
2.比如Ih26 按tab 可以生成 line-height:26px
2.1.3快速格式化代码
右键>格式化文档
或者：shift+alt+f
2.2 CSS的复合选择器
2.2.1什么是复合选择器
2.2.2后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法:
元素1 元素2{样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)
例如:
ul li {样式声明} /*选择 ul 里面所有的 1i标签元素 /
元素1和元素2中间用空格隔开
元素1 是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
<!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>
/* 把lo里面的li选出来改为绿色 */
ol li{
color: green;
}
ol li a{
color: red;
}
.nav li a{
color: blue;
}
</style>
</head>
<body>
<div>
<ol>
<li>我是lo的孩子</li>
<li>我是lo的孩子</li>
<li>我是lo的孩子</li>
<li><a href="">我是孙子</a></li>
</ol>
</div>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="">我是孙子</a></li>
</ul>
<!-- 为了和上面的ul区分，下面的可以给他加一个class -->
<ul class="nav">
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="">我是孙子</a></li>
<li><a href="">我是孙子</a></li>
</ul>
</body>
</html>
2.2.3子选择器（重要）
**子元素选择器( 子选择器)**只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法:
元素1>元素2{样式声明}
上述语法表示选择元素1 里面的所有直接后代(子元素)元素2
例如:
div>p{样式声明} /*选择 div 里面所有最近一级 p 标元素 /
元素1和元素2中间用大于号隔开
元素1 是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他 亲儿子选择器
<!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>
.nav>a{
/* 子选择器，只能选亲儿子 */
color: antiquewhite;
}
</style>
</head>
<body>
<div class="nav">
<a href="">w我是儿子</a>
<p>
<a href="">我是孙子</a>
</p>
</div>
</body>
</html>
2.2.4并集选择器（重要）
并集选择器可以选择多组标签 同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分.
语法:
元素1,元素2{样式声明}
上述语法表示选择元素1 和元素2
例如:
ul,div{样式声明} /*选择 ul 和div标签元素 */
元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
<!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>
/* 要求1：请把熊大和熊二改为粉色 */
/* 要求2：请把熊大和熊二改为红色 还有 小猪一家改为粉色 */
/* 约定的语法规范，我们并集选择器喜欢竖着写 */
/* 最后一个选择器不需要加逗号 */
div,
p,
.pig li{
color: pink;
}
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
2.2.5伪类选择器（重要）
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
2.2.6链接伪类选择器
一 链接伪类选择器注意事项.
二 链接伪类选择器实际开发中的写法.
链接伪类选择器注意事项
- 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
- 记忆法：love hate 或者 lv 包包 hao 。
- 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
<!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>
/* 未访问的链接 a:link 把没有点击过的（访问过的）链接选出来*/
a:link {
color: #333;
text-decoration: none;
}
/* a:visited 选择点击过的（访问过的）链接 */
a:visited {
color: green;
}
/* a:hover 选择鼠标经过的那个链接 */
a:hover{
color: skyblue;
}
/* a:active 选择的是我们鼠标正在按下但还没有弹起鼠标的那个链接 */
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
</body>
</html>
注意：
2.2.7:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color:yellow;
}
<!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>
/* 把获得光标的innput表单元素选取出来 */
input:focus{
background-color: blue;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
2.2.7复合选择器总结
2.3 CSS的元素显示模式
了解元素的显示模式可以更好的让我们布局页面.
- 什么是元素的显示模式
- 元素显示模式的分类
- 元素显示模式的转换
2.3.1 什么是元素显示模式
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML 元素一般分为块元素和行内元素两种类型。
2.3.2 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div>标签是最典型的块元素。
块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
2.3.3 行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全
2.3.4 行内块元素
在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙**。一行可以显示多个**（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
2.3.5元素显示模式总结
学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。
2.3.6元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围
1.转换为块元素：display:block;
2.转换为行内元素：display:inline;
3.转换为行内块：display:inline-block;
2.3.7snipaste的使用
Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上常用快捷方式
1.F1可以截图同时测量大小，设置箭头，书写文字等
2.F3在桌面置顶显示
3.点击图片，alt 可以取色(按下shift可以切换取色模式)
4.按下esc取消图片显示
关于小工具的使用，这里我推荐使用pxCook
2.3.8简洁版小米侧边栏
案例的核心思路分为两步:
1.把链接a 转换为块级元素，这样链接就可以单独占一行,并且有宽度和高度
2.鼠标经过a给链接设置背景颜色
<!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>
a{
width: 196px;
height: 34px;
display: block;
background-color: #535758;
color: #f6f7fb;
text-decoration: none;
line-height: 34px;
}
a:hover{
background-color: #ff6f00;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
</body>
</html>
2.3.9一个小技巧 单行文字垂直居中的代码
CSS没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现
解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
2.3.10单行文字垂直居中的原理
2.4 CSS的背景
通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
2.4.1 背景颜色
background-color 属性定义了元素的背景颜色
用法：
background-color:颜色值;
一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。
<!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: 200px;
height: 60px;
background-color: black;
/* background-color: transparent; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4.2 背景图片
background-image属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)
用法：
background-image : none | url(url)
2.4.3 背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-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: 800px;
height: 200px;
/* 不要落下url() */
background-image: url(images/logo.png);
/* 背景不平铺，就是不让图片补充整个盒子*/
/* 默认情况下背景图片是平铺的 */
background-repeat: no-repeat;
/* 沿x轴平铺 */
background-repeat: repeat-x;
/* 沿y轴平铺 */
background-repeat: repeat-y;
background-color: #fff222;
/* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4.4 背景图片位置
利用background-position属性可以改变图片在背景中的位置
用法：
background-position : x y
参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位
参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致
如果只指定了一个方位名词，另一个渣省略，则第二个值默认居中对齐
<!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: 500px;
height: 400px;
background-color: brown;
background-image: url(images/logo.png);
background-repeat: no-repeat;
/* right center和center right效果是等价的，浏览器会自动识别方位控制 */
/* 左中右，上中下 */
/* background-position: right center; */
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3{
width: 118px;
height: 40px;
/* background-color: rgb(116, 45, 45); */
font-size: 12px;
font-weight: 400;
line-height: 40px;
background-image: url(images/icon.png);
background-repeat: no-repeat;
background-position: left center;
text-indent: 2em;
}
</style>
</head>
<body>
<h3>
成长守护平台
</h3>
</body>
</html>
超大背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超大背景图片</title>
<style>
body{
background-image:url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
</body>
</html>
参数是精确单位
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x 坐标，另一个默认垂直居中
<!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>
div{
width: 500px;
height: 400px;
background-color: brown;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: 20px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x 坐标，第二个值是y坐标
2.4.5 背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
background-attachment : scrol1 ｜ fixed
<!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>
body{
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
/* 把背景图片固定住 */
background-attachment: fixed;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
</body>
</html>
2.4.6 背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 bakground中。从而节约代码量。当使用简写属性时，没有特定的书写顺序一般习惯约定顺序为
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background : transparent url(image.jpg) repeat-y fixed top;
2.4.7 背景色半透明
CSS3为我们提供了背景颜色半透明的效果
background:rgba(0, 0, 0, 0.6)
最后一个参数是alpha透明度，取值范围在0~1之间
我们习惯把0.3的0省略掉，写为 background:rgba(0,0,0.3)
注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3新增属性，是IE9+版本浏览器才支持的
但是现在实际开发我们不太关注兼容性写法了,可以放心使用
2.4.8 背景总结
2.5 综合案例（五彩导航）
案例：五彩导航
分析
1.链接属于行内元素,但是此时需要宽度高度,因此需要模式转换
2.里面文字需要水平居中和垂直居中,因此需要单行文字垂直居中的代码
3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置
4.鼠标经过变化背景图片,因此需要用到链接伪类选择器
<!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>
.nav a{
/* 转为行内块元素 */
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
/* 水平居中 */
text-align: center;
/* 垂直居中，行高等于宽 */
line-height: 48px;
color: white;
text-decoration: none;
}
.nav .bg1{
background-image: url(images/bg1.png);
background-repeat: no-repeat;
}
.nav .bg1:hover{
background-image: url(images/bg11.png);
}
.nav .bg2{
background-image: url(images/bg2.png);
background-repeat: no-repeat;
}
.nav .bg2:hover{
background-image: url(images/bg22.png);
}
.nav .bg3{
background-image: url(images/bg3.png);
background-repeat: no-repeat;
}
.nav .bg3:hover{
background-image: url(images/bg3.jpg);
}
.nav .bg4{
background-image: url(images/bg4.png);
background-repeat: no-repeat;
}
.nav .bg4:hover{
background-image: url(images/bg2.png);
}
.nav .bg5{
background-image: url(images/bg5.png);
background-repeat: no-repeat;
}
.nav .bg5:hover{
background-image: url(images/bg3.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>
3.CSS的三大特性
CSS有三个非常重要的三个特性:层叠性、继承性、优先级。
3.1CSS的三大特性
3.1.1 层叠性
相同选择器给设置相同的样式，此时一个样式就会**覆盖(层叠)**另一个冲突的样式。层叠性主要解决样式冲突的问题
例如：
层叠性原则:
样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
**样式不冲突：**不会层叠
<!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{
color: rgb(31, 186, 225);
font-size: 14px;
}
div{
color: black;
}
</style>
</head>
<body>
<div>长江后浪推前浪，前浪死在沙滩上</div>
</body>
</html>
3.1.2 继承性
现实中的继承:我们继承了父亲的姓
CSS中的继承:子标签会继承父标签的某些样式（不是全部），如文本颜色和字号。简单的理解就是:子承父业
1.恰当地使用继承可以简化代码，降低CSS样式的复杂性
2.子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color属性)
3.继承性口诀: 龙生龙，凤生凤，老鼠生的孩子会打洞
例如
<!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{
color: pink;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<p>龙生龙，凤生凤，老鼠生的儿子会打洞</p>
</div>
</body>
</html>
3.1.3 行高的继承
注意：
1.行高可以跟单位也可以不跟单位
2.如果子元素没有设置行高，则会继承父元素的行高为 1.5
3.此时子元素的行高是:当前子元素的文字大小*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>
body{
color: pink;
font-size: 12px;
font-family: 华文新魏;
/* line-height: 24px; */
/* 1.5是文字大小的1.5倍，所以body的行高为12X1.5=18 */
line-height: 1.5;
}
div{
/* div继承body的行高，所以div的行高为14X1.5=21 */
font-size: 14px;
}
</style>
</head>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
</body>
</html>
3.1.4 优先级
当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
选择器不同，则根据（选择器权重）执行
例如：
<!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{
color: pink;
}
.test{
color: red;
}
#demo{
color: blue;
}
div{
color: rgb(19, 18, 18) !important;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple;">你笑起来真好看</div>
</body>
</html>
3.1.5 优先级注意点
1.权重是有4组数字组成,但是不会有进位
2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器,以此类推.
3.等级判断从左向右，如果某一位数值相同，则判断下一位数值
4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000,!important无穷大.
重要重要重要！！！
5.继承的权重是0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0（可以理解为没有选中该元素，那么该元素只能继承父元素，所以该元素的权重为0）
<!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>
.ppp{
color: blueviolet;
}
p{
color: green;
}
/* 按道理a元素应该继承body的样式，但实际却没有 */
body{
color: red;
}
/* a链接浏览器默认指定了一个样式 蓝色的带下划线
相当于 a{ color: blue;}
所以想要给a指定样式，需要独自给a指定，因为继承的权重是0
*/
</style>
</head>
<body>
<div class="ppp">
<p>11111</p>
</div>
<a href="#">a元素是单独的样式</a>
</body>
</html>
3.1.6 CSS权重的叠加
**权重叠加：**如果是复合选择器，则会有权重的叠加，需要计算权重
注意！权重可以叠加，但永远不会有进位，十个0.0.0.1相加是0.0.0.10
4.CSS盒子模型
能够准确阐述盒子模型的4个组成部分
能够利用边框复合写法给元素添加边框
能够计算盒子的实际大小
能够利用盒子模型布局模块案例
能够给盒子设置圆角边框
能够给盒子添加阴影
能够给文字添加阴影
4.1盒子模型
4.1.1看透网页布局的本质
网页布局过程：
1.先准备好相关的网页元素，网页元素基本都是盒子Box。
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
4.1.2盒子模型（box Model）组成
所谓 **盒子模型:**就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器.
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边框、外边距、内边距、和实际内容
4.1.3边框（border）
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)，边框样式，边框颜色
语法：
border : border-width || border-style || border-color
关于border-style的取值
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
<!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: 200px;
height: 60px;
border-width: 5px;
/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 */
/* border-style: solid; */
/* border-style: dashed; */
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.1.4边框的复合写法（重要）（border）
CSS边框属性也允许指定一个元素边框的样式和颜色
边框简写：
边框分开写法：
例如只设定上边框：
<!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>
.nav1{
width: 300px;
height: 50px;
border: 5px solid pink;
}
.nav2{
width: 300px;
height: 50px;
border-top: 5px dashed black;
border-bottom: 6px dashed blue;
border-left: 6px dashed blue;
border-right: 6px dashed blue;
}
/* 如果只设置一条边，其他三条边一样的话可以这样 */
.nav3{
width: 300px;
height: 50px;
border: 2px dashed green;
border-top: 2px dotted green;
}
</style>
</head>
<body>
<div class="nav1"></div>
<div class="nav2"></div>
<div class="nav3"></div>
<div class="nav4"></div>
</body>
</html>
4.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>
table{
width: 600px;
height: 250px;
}
table,
td,
th{
border: 1px solid pink;
/* 合并相邻边框 */
border-collapse: collapse;
font-size: 20px;
text-align: center;
}
</style>
4.1.6注意：边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框则需要width/height 减去边框宽度
4.1.7内边距
padding属性用于设置内边距，即边框与内容之间的距离。
<!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>
/* 我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框 */
div{
width: 200px;
height: 200px;
background-color: aqua;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>
<div>111111111111111111111111</div>
</body>
</html>
padding属性（简写属性）可以有一到四个值
以上4种情况，我们实际开发都会遇到
4.1.8注意：内边距padding会影响盒子实际大小（上）
（1）当我们给盒子指定 padding值之后，发生了2件事情
1.内容和边框有了距离，添加了内边距
2.padding影响了盒子实际大小。
****也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
示例：
<!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: 200px;
height: 200px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div>
padding影响了盒子实际大小padding影响了盒子实际大小padding影响了盒子实际大小padding影响了盒子实际大小padding影响了盒子实际大小padding影响了盒子实际大小
</div>
</body>
</html>
解决方案:
如果保证盒子跟效果图大小保持一致，则让 width/height减去多出来的内边距大小即可.
4.1.9注意，重要：内边距padding会影响盒子实际大小（下）
（2）如果盒子本身没有指定width/height属性则此时padding不会撑开盒子大小
<!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>
h1{
background-color: pink;
height: 300px;
padding: 30px;
/* 如果给设置了宽，不管是什么样的方式设置，那么一定会被撑开 */
width: 100%;
}
div{
width: 300px;
height: 100px;
background-color: purple;
}
div p{
padding: 30px;
background-color: skyblue;
/* div的大小就是p的大小，没给p设置宽度，p不回超出div的范围 */
/* 给p设置了宽，p就超出div的范围 */
width: 300px;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
没加padding之前
**设置高度不设置宽度加padding之后**
如果给设置了宽或者高，不管是什么样的方式设置，那么一定会被撑开如下： width: 100%;
div的大小就是p的大小，没给p设置宽度，p不回超出div的范围
给p设置了宽，p就超出div的范围
4.1.10案例:新浪导航案例-padding影响盒子好处
padding内边距可以撑开盒子我们可以做非常巧妙的运用.
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适.
相关取值：
1上边框为3像素颜色为#ff8500
2.下边框为1像素颜色为 #edeef0
3.盒子高度为41像素背景颜色为#fcfcfc
4.文字颜色为#4c4c4c
<!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>
.nav{
line-height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
}
a{
padding-left: 20px;
padding-right: 20px;
/* */
display: inline-block;
height: 41px;
font-size: 20px;
text-decoration: none;
color: #4c4c4c;
}
a:hover{
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新兰导航</a>
<a href="#">新兰导航网</a>
<a href="#">新兰</a>
<a href="#">新兰导</a>
<a href="#">新兰导航行</a>
</div>
</body>
</html>
4.1.11外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
<!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: 200px;
height: 200px;
background-color: pink;
}
.one{
margin-bottom: 20px;
}
.two{
margin: 30px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
4.1.12外边距典型应用（盒子水平居中，开发中常用！！！）
外边距可以让块级盒子水平居中，但是必须满足两个条件:
1.盒子必须指定了宽度(width )
2.盒子左右的外边距都设置为auto。
注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可（即把行内块元素或者行内元素看成是一些文字来理解）
header{ width:960px; margin:0 auto;}
常见的写法，以下三种都可以:
1.margin-left: auto; margin-right auto;
2.margin: auto;
3.margin: 0 auto:
应用：
<!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>
.header{
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
</div>
</body>
</html>
注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
4.1.13外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
4.1.13.1相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是margin-bottom与margin-top 之和。取两个值中的合并之前较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案：
尽量只给一个盒子添加margin
4.1.13.2嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值，
解决方案:
- 可以为父元素定义上边框
- 可以为父元素定义上内边距。
- 可以为父元素添加overflow:hidden。
- 还有其他方法，例如浮动，固定，绝对定位的盒子不会有塌陷问题，后面再总结
4.1.14清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
*{
padding:0;/*清楚内边距*/
margin:0;/*清楚外边距*/
}
这句话也是我们CSS的第一行代码
<!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>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
</body>
</html>
注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
例如：设置span的 “margin：20px”不会起margin top和margin botton的效果
5.ps基本操作
5.ps基本操作
因为网页美工大部分效果图都是利用 **PS ( Photoshop)**来做的，所以以后我们大部分切图工作都是在 PS里面完成
- 文件>打开 :可以打开我们要测量的图片
- Ctrl+R:可以打开标尺，或者视图> 标尺
- 右击标尺，把里面的单位改为像素
- **Ctrl+ 加号(+)**可以放大视图，**Ctrl+ 减号(-)**可以缩小视图
等等。。。
我的建议是不如pxcook
6.综合案例
6.1案例1：产品模块
<!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>
*{
margin: 0;
padding: 0;
}
a{
color: #333;
text-decoration: none;
}
.box{
width: 327px;
height: 448px;
background-color: #a1a1a1;
/* 让块级的盒子水平居中 */
margin: 100px auto;
}
.box img{
/* 图片的宽度和父亲一样宽 */
width: 327px;
}
.pinglun{
height: 60px;
font-size: 18px;
/* 因为这个段没有width属性，所以padding不会撑开盒子的宽度 */
padding: 0 30px;
/* 因为设置了高，所以不能给段元素设置上下内边距，会撑开 */
/* padding: 30px 40px; */
margin-top: 30px ;
}
.appraise{
font-size: 14px;
color: #b7cbed;
margin-top: 20px;
padding: 0 30px;
}
.info{
margin-top: 15px;
padding: 0 30px;
color: #333;
font-weight: 400px;
}
.info h4 {
font-weight: 400;
display:inline-block;
}
.info span{
color: #c37612;
}
.info em{
font-style: normal;
/* 逆时针 */
margin: 0 8px 0 12px;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/img.jpg" alt="">
<p class="pinglun">垃圾小米，垃圾小米垃圾小米，垃圾小米，垃圾小米，垃圾小米，</p>
<div class="appraise">
来自于12345678的评价
</div>
<div class="info">
<h4>
<a href="#">垃圾小米垃圾小米</a>
</h4>
<!-- 竖线的制作小技巧，em然后设置不倾斜 -->
<em>|</em>
<span>99.9元</span>
</div>
</div>
</body>
</html>
6.2案例2：快报模块
新知识点：怎么去掉li前面的小圆点
li{
/* 去掉li里面的小圆点 */
list-style: none;
}
<!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>
*{
margin: 0;
padding: 0;
}
li{
/* 去掉li里面的小圆点 */
list-style: none;
}
.box{
width: 250px;
height: 165px;
border: 1px solid #cccccc;
margin: 100px auto;
}
.box h3{
height: 33px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 33px;
padding-left: 15px;
}
.box ul li a{
font-size: 13px;
text-decoration: none;
color: #666666;
}
.box ul li a:hover{
color: #131010;
}
.box ul li{
height: 25px;
line-height: 25px;
padding-left: 15px;
}
.box ul{
/* 不方便调第一个li跟上一个div的边距，所以直接调ul */
margin-top: 7px;
}
</style>
</head>
<body>
<div class="box">
<h3>品有够快报</h3>
<ul>
<li><a href="">[特惠] 爆款耳机5折秒!</a></li>
<li><a href="">[特惠] 母亲节，健康好礼低至5折!</a></li>
<li><a href="">[特惠] 爆款耳机5折秒!</a></li>
<li><a href="">[特惠] 9.9元洗19张照片!</a></li>
<li><a href="">[特惠] 长虹智能空调立省1099</a></li>
</ul>
</div>
</body>
</html>
7.圆角边框（超级重点）
7.1圆角边框原理
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius :length;
7.2圆角边框使用
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%.
- 如果是个矩形,设置为高度的一半就可以做
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写: border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
radius 半径(圆的半径) 原理:：(椭)圆与边框的交集形成圆角效果
<!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>
.yuanxing{
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
.yuanjiao{
width: 300px;
height: 150px;
background-color: brown;
border-radius: 75px;
}
.banyuan{
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px 100px 0 0;
}
.other{
width: 200px;
height: 100px;
background-color: burlywood;
border-radius: 20px 30px 40px 50px;
}
</style>
</head>
<body>
1.圆形做法
<div class="yuanxing"></div>
2.圆角矩形的做法
<div class="yuanjiao"></div>
3.半圆做法
<div class="banyuan"></div>
4.可以设置不同的圆角
<div class="other"></div>
</body>
</html>
8.盒子阴影（重点）
CSS3中新增了盒子阴影，我们可以使用box-shadow 属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：
1.默认的是外阴影(outset),但是不可以写这个单词.否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。
<!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: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 默认为outset外阴影，想改为内阴影可以用inset，不能写outset，写上后没有阴影效果 */
/* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5) inset; */
}
/* 原先盒子没有影子，当鼠标放上去的时候有影子 */
div:hover{
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5) inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
9.文字阴影
在CSS3中，我们可以使用text-shadow属性将阴影应用于文本
语法：
text-shadow: h-shadow v-shadow blur color;
<!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{
font-size: 50px;
color: aquamarine;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div>
你是阴影，我是火影
</div>
</body>
</html>
10.CSS浮动
- 能够说出为什么需要浮动
- 能够说出浮动的排列特性
- 能够说出3种最常见的布局方式
- 能够说出为什么需要清除浮动
- 能够写出至少2种清除浮动的方法
- 能够利用 Photoshop实现基本的切图
- 能够利用Photoshop 插件实现切图
- 能够完成学成在线的页面布局
10.1 浮动
10.1.1 传统网页布局的三种方式
网页布局的本质一用CSS来摆放盒子。把盒子摆放到相应位置
CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序)
- 普通流(标准流)
- 浮动
- 定位
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了
注意:实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式)
10.1.2 标准流(普通流/文档流)
所谓的标准流: 就是标签按照规定好默认方式排列
1.块级元素会独占一行，从上向下顺序排列。
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素:span、a、i、em等
3.以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式
10.1.3 为什么需要浮动？
提问:我们用标准流能很方便的实现如下效果吗?
1.如何多个块级盒子(div)水平排列成一行?
2如何实现两个盒子的左右对齐?
**总结:**有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
**浮动最典型的应用:**可以让多个块级元素一行内排列显示
网页布局第一准则: 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
10.1.4 什么是浮动？
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 {
float:属性值;
}
<!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>
.left,
.right {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.right{
float: right;
}
</style>
</head>
<body>
<div class="left">左青龙</div>
<div class="right">右白虎</div>
</body>
</html>
10.1.5 浮动特性（重难点）
加了浮动之后的元素，会具有很多特性，需要我们掌握的。
10.1.5.1 浮动元素会脱离标准流（脱标）
1.脱离标准普通流的控制(浮) 移动到指定位置(动)(俗称脱标）
2.浮动的盒子不再保留原先的位置
给粉色盒子加浮动后：
<!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>
.box1{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>
</body>
</html>
10.1.5.2 浮动的元素会一行内显示并且元素顶部对齐
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列.
注意:浮动的元素是互相贴靠在一起的( 不会有)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
<!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{
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.two{
background-color: purple;
}
.four{
background-color: aqua;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
10.1.5.3 浮动的元素会具有行内块元素的特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性.
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理
<!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,
span{
width: 200px;
height: 100px;
background-color: aqua;
float: left;
}
p{
height: 150px;
background-color: purple;
float: right;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<div>3</div>
<p>ppppppp</p>
</body>
</html>
10.1.6 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧
<!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>
.box{
width: 1200px;
height: 460px;
background-color: aquamarine;
margin: 0 auto;
}
.left{
width: 230px;
height: 460px;
background-color: purple;
float: left;
}
.right{
width: 970px;
height: 460px;
background-color: antiquewhite;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
练习1：
<!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没有内外边距 */
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 1226px;
height: 285px;
background-color: antiquewhite;
margin: 30px auto;
}
.box li{
width: 296px;
height: 285px;
background-color: aqua;
float: left;
margin-right: 14px;
}
/* 这里要注意权重问题，最后一个li没有外边距 */
.box .four{
margin-right: 0;
}
</style>
</head>
<body>
<ul class="box">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
<li class="four">4444444444</li>
</ul>
</body>
</html>
练习2：小米布局案例
大致布局：
10.2 常见网页布局
11-13
10.3 清除浮动
14-18
10.4 像素大厨
10.5 学成在线案例
10.5.1案例准备工作
我们本次采取结构与样式相分离思想
1.创建study目录文件夹(用于存放我们这个页面的相关内容)。
2.用vscode打开这个目录文件夹.
3.study目录内新建images文件夹，用于保存图片。
4.新建首页文件index.html(以后我们的网站首页统一规定为indexhtml)。
5.新建style.css样式文件。我们本次采用外链样式表
6.将样式引入到我们的HTML页面文件中
7.样式表写入清除内外边距的样式，来检测样式表是否引入成功
10.5.2 CSS属性书写顺序(重点)
生活中衡量一个人有气质:
穿着打扮 举止言行 等等
编程中如何衡量一个人的代码能力?
规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验.
建议遵循以下顺序:
1.布局定位属性:display/position/ float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
2.自身属性:width/height/margin/padding/border/ background
3.文本属性: color/font / text-decoration/ text-align/vertical-align/white- space/ break-word
4.其他属性(CSS3) : content/cursor / border-radius/box-shadow/ text-shadow/ background:linear-gradient.
例如：
10.5.3 页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路:
1.必须确定页面的版心(可视区)，我们测量可得知。
2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则
3，一行中的列模块经常浮动布局,先确定每个列的大小之后确定列的位置页面布局第二准则
4.制作 HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
5.所以先理清楚布局结构,再写代码尤为重要，这需要我们多写多积累
10.5.4 确定版心
这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类:
.W{
width: 1200px;
margin : auto;
}
10.5.5 头部制作
- 1号是版心盒子header1200*42的盒子水平居中对齐，上下给一个margin值就可以
- 版心盒子里面包含2号盒子logo
- 版心盒子里面包含3号盒子nav 导航栏
- 版心盒子里面包含4号盒子search 搜索框
- 版心盒子里面包含5号盒子user 个人信息
- 注意:要求里面的4个盒子必须都是浮动
导航栏注意点：
实际开发中，我们不会直接用链接a 而是用li 包含链接(i+a)的做法 - li+a语义更清晰，一看这就是有条理的列表型内容
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)，从而影响网站排名
注意：
- 让导航栏一行显示,给li 加浮动因为li 是块级元素，需要一行显示。
- 这个nav导航栏可以不给宽度，将来可以继续添加其余文字(因为加了浮动后，盒子会具有行内块元素的特性，例如宽度会随内容撑开而不是独占一整行)
- 因为导航栏里面文字不一样多,所以最好给链接a左右padding撑开盒子,而不是指定宽度
search 搜索框:
个search大盒子里面包含2个表单
10.5.6 banner制作
- 1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景
- 2号盒子是版心，要水平居中对齐
- 3号盒子版心内，左对齐subnav侧导航栏
- 4号盒子版心内，右对齐course课程
10.5.7 精品推荐小模块
- 大盒子水平居中goods精品，注意此处有个盒子阴影
- 1号盒子是标题H3左侧浮动
- 2号盒子里面放链接左侧浮动，goods-item 距离可以控制接的左右外边距(注意行内元素只给左右内外边距)
- 3号盒子右浮动mod 修改
10.5.8 精品推荐大模块
1号盒子为最大的盒子，box 版心水平居中对齐
2号盒子为上面部分，box-hd-- 里面左侧标题H3左浮动，右侧链接a右浮动
3号盒子为底下部分，box-bd-- 里面是无序列表，有10个小i组成
小li外边距的问题，这里有个小技5:给box-hd宽度为1215就可以一行装开5个li
10.5.9 底部模块
1号盒子是通栏大盒子，底部footer给高度，底色是白色
2号盒子版心水平居中
3号盒子版权copyright左对齐
4号盒子链接组links右对齐
10.5.10 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 头部区域开始 -->
<div class="header w">
<!-- logo部分 -->
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<!-- 导航栏部分 -->
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">职业规划</a></li>
</ul>
</div>
<!-- 搜索模块 -->
<div class="search">
<input type="text" class="text" value="输入关键词">
<button></button>
</div>
<!-- 用户模块 -->
<div class="user">
<img src="./images/user.png" alt="">
zhangsan
</div>
</div>
<!-- 头部区域结束 -->
<!-- banner部分start -->
<div class="banner">
<!-- 版心 -->
<div class="w">
<div class="subnav">
<ul>
<li><a href="">前端开发 <span> ></span></a></li>
<li><a href="">后端开发 <span> ></span></a></li>
<li><a href="">移动开发 <span> ></span></a></li>
<li><a href="">人工智能 <span> ></span></a></li>
<li><a href="">商业预测 <span> ></span></a></li>
<li><a href="">云计算&大数据 <span> ></span></a></li>
<li><a href="">运维&测试 <span> ></span></a></li>
<li><a href="">UI设计 <span> ></span></a></li>
<li><a href="">产品 <span> ></span></a></li>
</ul>
</div>
<!-- 课程表模块 -->
<div class="course">
<h2>我的课程表</h2>
<div class="bottom">
<ui>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习--使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习--使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习--使用对象</p>
</li>
</ui>
<a href="">全部课程</a>
</div>
</div>
</div>
</div>
<!-- banner部分end -->
<!-- 精品推荐部分 -->
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<li><a href="">jQuery</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">jQuery</a></li>
</ul>
<a href="" class="mod">修改兴趣</a>
</div>
</div>
<!-- box核心内容区域 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="">查看全部</a>
</div>
<div class="box-bd clearfix">
<ul >
<li>
<img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div>
</li>
<li>
<img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div>
</li>
<li>
<img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div>
</li>
<li> <img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div></li>
<li> <img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div></li>
<li> <img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div></li>
<li> <img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div></li>
<li> <img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div></li>
<li> <img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div></li>
<li> <img src="./images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实践项目演练</h4>
<div class="info"><span>高级</span>.1125人在学习</div></li>
</ul>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<div class="footer-banxin w">
<div class="copyright">
<img src="./images/logo.png" alt="">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
@ 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="">下载APP</a>
</div>
<div class="links">
<dl>
<dt>关于学成网</dt>
<dd><a href="">关于</a></dd>
<dd><a href="">管理团队</a></dd>
<dd><a href="">工作机会</a></dd>
<dd><a href="">客户服务</a></dd>
<dd><a href="">帮助</a></dd>
</dl>
<dl>
<dt>关于学成网</dt>
<dd><a href="">关于</a></dd>
<dd><a href="">管理团队</a></dd>
<dd><a href="">工作机会</a></dd>
<dd><a href="">客户服务</a></dd>
<dd><a href="">帮助</a></dd>
</dl>
<dl>
<dt>关于学成网</dt>
<dd><a href="">关于</a></dd>
<dd><a href="">管理团队</a></dd>
<dd><a href="">工作机会</a></dd>
<dd><a href="">客户服务</a></dd>
<dd><a href="">帮助</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.w{
width: 1200px;
margin: auto;
}
/* 去掉li默认的黑点 */
li{
list-style: none;
}
/* 页面链接中几乎没有下划线 */
a{
text-decoration: none;
}
body{
background-color: #f3f5f7;
}
.header{
height: 44px;
/* margin左右要加auto，如果是0，会把.w覆盖掉 */
margin: 28px auto;
}
.logo{
float: left;
width: 198px;
height: 44px;
}
.nav{
float: left;
margin-left: 60px;
}
.nav li{
/* li是块级元素，给li加浮动可以让内容横向排列 */
float: left;
margin: 0 15px;
}
/* 给每一个小a指定一个宽，增大链接的范围，优化使用体验 */
/* 因为导航栏的每一项内容文字大小不一，所以给高，宽的话用padding撑开 */
.nav ul li a{
/* a是行内元素，给a设置高要转为块级元素 */
display: block;
padding: 0 10px;
height: 44px;
line-height: 44px;
font-size: 18px;
color: #050505;
}
.nav ul li a:hover{
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.search{
float: left;
width: 412px;
height: 44px;
margin-left: 50px;
}
.search input{
width: 345px;
height: 40px;
border: 2px solid #00a4ff;
border-right: none;
color: #bfbfbf;
font-size: 14px;
/* 所以盒子的宽要减去15px */
padding-left: 15px;
/* 因为表单元素是行内块元素，两个行内块元素相邻会有间隙，所以给input和button加浮动 */
float: left;
}
.search button{
width: 50px;
height: 44px;
/* button默认有一个边框，要手动把边框去掉 */
border: 0;
/* 因为表单元素是行内块元素，两个行内块元素相邻会有间隙，所以给input和button加浮动 */
float: left;
background: url(./images/btn.png);
}
.user{
float: right;
line-height: 44px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
/* banner区域 */
.banner{
height: 420px;
background-color: #1c036c;
}
.banner .w{
height: 420px;
/* 不平铺水平居中对齐 */
background:url(./images/banner2_20190819_210028.png) no-repeat top center;
}
.banner .w .subnav{
float: left;
width: 190px;
height: 420px;
background: rgba(0, 0, 0, 0.3);
}
.banner .w .subnav ul li a{
color: #fff;
font-size: 14px;
}
.banner .w .subnav ul li a:hover{
color: #00a4ff;
}
.banner .w .subnav ul li a span{
float: right;
}
.banner .w .subnav ul li{
height: 45px;
line-height: 45px;
/* 同一个盒子设置了宽或者高加了padding才会撑开 */
padding: 0 20px;
}
.course{
float: right;
width: 230px;
height: 300px;
background-color: #fff;
/* 浮动的盒子不会有外边距合并的问题!!!!! */
margin-top: 50px;
}
.course h2{
height: 48px;
line-height: 48px;
font-size: 18px;
text-align: center;
background-color: #00a4ff;
color: #fff;
}
.course .bottom{
padding: 0 20px;
}
.course .bottom li{
height: 32px;
border-bottom: 1px solid #e5e5e5;
padding: 14px 0;
}
.course .bottom li h4{
font-size: 16px;
color: #4e4e4e;
}
.course .bottom li p{
font-size: 12px;
color: #a5a5a5;
}
.course .bottom a{
display: inline-block;
width: 188px;
height: 38px;
font-size: 16px;
font-weight: 700px;
line-height: 38px;
text-align: center;
margin-top: 15px;
border: 1px solid #00a4ff;
color: #00a4ff;
}
/* 精品推荐区域 */
.goods{
height: 60px;
background-color: #fff;
margin-top: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
/* 行高是会继承的，给父盒子行高，儿子会继承父盒子的行高 */
line-height: 60px;
}
.goods h3{
float: left;
font-size: 16px;
color: #00a4ff;
margin: 0 30px;
}
.goods ul{
float: left;
}
.goods ul li{
float: left;
}
.goods ul li a{
font-size: 16px;
padding: 0 30px;
color: #050505;
border-left: 1px solid #bfbfbf;
}
.mod{
float: right;
margin-right: 30px;
font-size: 16px;
color: #00a4ff;
}
/* 精品推荐 */
.box{
margin-top: 30px;
}
.box .box-hd{
height: 45px;
/* background-color: #00a4ff; */
}
.box .box-hd h3{
float: left;
font-size: 20px;
color: #494949;
line-height: 45px;
}
.box .box-hd a{
float: right;
font-size: 13px;
color: #a5a5a5;
margin-right: 30px;
margin-top: 25px;
}
/* 小li外边距的问题，这里有个小技巧:
把li的父亲ul修改的足够宽一行能装5个盒子就不会换行了
*/
.box-bd ul{
width: 1225px;
}
.box-bd ul li{
width: 228px;
height: 270px;
float: left;
/* background-color: #4e4e4e; */
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.box-bd ul li img{
/* 会溢出，强制100% */
width: 100%;
}
.box-bd ul li h4{
padding: 0 20px;
margin: 20px 0;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.info{
font-size: 14px;
margin: 0 20px;
color: #a5a5a5;
}
.info span{
color: #ff7c2d;
}
/* 底部 */
.footer{
height: 420px;
/* 上面的盒子没有给高度，造成高度坍塌，要清除浮动 */
/* background-color: #dbe2e6; */
background-color: #fff;
}
.footer .footer-banxin{
/* 加margin会造成外边距合并的问题，所以用padding */
padding-top: 35px;
height: 30px;
}
.copyright{
float: left;
margin-left: 25px;
}
.copyright p{
font-size: 12px;
color: #666666;
margin: 20px 0 15px 0;
}
.copyright a{
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
line-height: 33px;
text-align: center;
font-size: 16px;
color: #00a4ff;
}
.links{
float: right;
margin-right: 30px;
}
.links dl dt{
font-size: 16px;
color: #333333;
margin-bottom: 5px;
}
.links dl dd{
font-size: 14px;
color: #333333;
margin: 3px 0;
}
/* dl是块级元素 */
.links dl{
float: right;
margin-left: 100px;
}
11.CSS定位
能够说出为什么要用定位
能够说出定位的4种分类
能够说出4种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2种方式以及区别
11.1定位
11.1.1为什么需要定位
提问:以下情况使用标准流或者浮动能实现吗?
1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
提问:以下情况使用标准流或者浮动能实现吗?
2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的.
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以:
1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
11.1.2定位组成
定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
11.1.2.1定位模式
11.1.2.2边偏移
11.1.3静态定位static（了解）
静态定位是元素的默认定位方式，无定位的意思。
语法:
选择器 { position: static;}
静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到
11.1.4相对定位relative（重要）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)。
语法:
选择器{ position: relative; }
相对定位的特点:(务必记住)！！！！
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。( 不脱标，继续保留原来位置！！！）
<!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>
.box1{
/* 相对定位 */
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2{
width: 200px;
height: 200px;
background-color: rgb(131, 19, 37);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
11.1.5绝对定位absolute（重要）
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)
语法:
选择器{ position: absolute;}
绝对定位的特点:(务必记住！！！)
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位( Document文档)。
<!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>
.father{
width: 500px;
height: 500px;
background-color: bisque;
}
.son{
/* 绝对定位 */
position: absolute;
/* 添加父盒子前，子盒子定位 */
/* top: 10px;
left: 10px; */
/* top: 100px;
right: 200px; */
/* 添加父盒子后，子盒子定位 */
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2. 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
<!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>
.father {
/* position: relative; */
position: absolute;
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
left: 30px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
.yeye{
position: absolute;
width: 800px;
height: 800px;
background-color: bisque;
padding: 50px;
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
3.（与相对定位对应）绝对定位不再占有原先的位置。（脱标）
11.1.6子绝父相的由来
弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话，父级要用相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子.
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位（原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。( 不脱标，继续保留原来位置！！！））
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级
总结:
因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
11.1.7案例:学成在线-hot new模块添加（子绝父相的应用）
11.1.8固定定位fixed（重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变.
语法：
选择器 { position: fixed;}
固定定位的特点:(务必记住！！！！！)
1.以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动。
2. 固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
<!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>
.dj{
/* 固定定位 */
position: fixed;
top: 0;
left: 0;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<div class="dj">
<img src="./images/pvp.png" alt="">
</div>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
<P>1111111111111</P>
</body>
</html>
11.1.9固定定位小技巧-固定到版心右侧（上一节是固定到离可视窗口多少）
固定定位小技巧：固定在版心右侧位置
小算法:
1.让固定定位的盒子left:50%走到浏览器可视区(也可以看做版心)的一半位置
2.让固定定位的盒子margin-left:版心宽度的一半距离。 多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了
刚开始，两个盒子
1.走浏览器宽度的一半
利用margin走版心盒子的一半距离
11.1.10粘性定位sticky（了解）
粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的
语法:
选择器 { position: sticky; top: 10px; }
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加top、left、right、bottom其中一个才有效
4. 跟页面滚动搭配使用。兼容性较差，IE不支持
刚开始滚动，滚到一个位置后不动
<!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>
body{
height: 3000px;
}
.nav{
/* 粘性定位 */
position: sticky;
/* 必须添加top、left、right、bottom其中一个才有效 */
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
</body>
</html>
11.1.11定位的总结
1.一定记住相对定位、固定定位、绝对定位两个大的特点:1.是否占有位置(脱标否)2以谁为基准点移动位置。
2.学习定位重点学会子绝父相
11.1.12定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(Z轴)
语法:
选择器( z-index:1;}
数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有Z-index属性
<!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>
.box{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.xiongda{
background-color: red;
z-index: 1;
}
.xionger{
background-color: green;
left: 50px;
top: 50px;
}
.qiangge{
background-color: blue;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box xiongda">xiongda</div>
<div class="box xionger">xionger</div>
<div class="box qiangge">qiangge</div>
</body>
</html>
11.1.13定位的拓展
11.1.13.1绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中
解决：
1. left:50%;:让盒子的左侧移动到父级元素的水平中心位置
2. margin-left:-100px;:让盒子向左移动自身宽度的一半
<!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>
.box{
/* 让绝对定位的盒子水平居中 */
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
/* 第一步left 50% */
left: 50%;
/* 第二部 margin负值自己盒子宽度一半 */
margin-left: -100px;
/* 垂直方向居中也是一样道理 */
top: 50%;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
11.1.13.2定位特殊特性
绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
<!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>
span{
position: absolute;
top: 50px;
background-color: aqua;
width: 200px;
height: 200px;
}
div{
background-color: aquamarine;
position: absolute;
}
</style>
</head>
<body>
<span>123</span>
<div>12345678</div>
</body>
</html>
11.1.13.3脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题
11.1.13.4绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。
文字会围绕浮动元素
<!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>
.box {
/* 1.浮动的元素不会压住下面标准流的文字 */
/* float: left; */
/* 2. 绝对定位（固定定位） 会压住下面标准流所有的内容。 */
position: absolute;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<p>阁下何不同风起，扶摇直上九万里</p>
</body>
</html>
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。
文字会围绕浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动产生原来的目的是做文字环绕效果</title>
<style>
img {
float: left;
}
</style>
</head>
<body>
1993年，在古装片《战神传说》中扮演一个武功超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高明的千门高手钱文迪；此外，他还主演了爱情片《天长地久》，在片中塑造了一个风流不羁的江湖浪子形象。 1994年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片获得第15届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。 1996年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程痴情一片的丁力。1997年，担任剧情片《香港制造》的制作人；同年，主演爱情片《天若有情之烽火佳人》，在片中饰演家世显赫的空军少尉刘天伟；12月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年，主演动作片《龙在江湖》
<img src="images/img.jpg" alt="">
，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠1999》；此外，他还担任剧情片《去年烟花特别多》的制作人。 1993年，在古装片《战神传说》中扮演一个武功超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高明的千门高手钱文迪；此外，他还主演了爱情片《天长地久》，在片中塑造了一个风流不羁的江湖浪子形象。 1994年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片获得第15届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。 1996年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程痴情一片的丁力。1997年，担任剧情片《香港制造》的制作人；同年，主演爱情片《天若有情之烽火佳人》，在片中饰演家世显赫的空军少尉刘天伟；12月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年，主演动作片《龙在江湖》，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠1999》；此外，他还担任剧情片《去年烟花特别多》的制作人。
</body>
</html>
11.2定位综合案例（淘宝焦点图布局）
分析：
1.大盒子我们类名为: tb-promo淘宝广告
2.里面先放一张图片
3.左右两个按钮用链接就好了。左箭头 prev右箭头 next
4.底侧小圆点ul继续做。类名为 promo-nav
代码：
<!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>
/* 消除内外边距 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
/* 清除li小黑圆点 */
li{
list-style: none;
}
.tb-promo{
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
/* 子绝父相 */
position: relative;
}
.tb-promo img{
/* 强制规定盒子的宽度和高度 */
width: 520px;
height: 280px;
}
/* 并集选择器可以集体声明相同的样式 */
.prev,
.next{
/* 加了绝对定位的盒子可以直接设置宽度和高度 */
width: 30px;
height: 40px;
background-color: rgba(0, 0, 0, .4);
/* 子绝父相 */
position: absolute;
/* 绝对定位的盒子怎么居中？ */
/* 先百分之五十，然后再往前margin自身一半 */
top: 50%;
margin-top: -20px;
text-align: center;
line-height: 40px;
color: #fff;
}
.prev{
left: 0;
/* 设置圆角 */
border-radius: 0 20px 20px 0;
}
.next{
right: 0;
/* 设置圆角 */
border-radius: 20px 0 0 20px;
}
.promo-nav{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
background-color: rgba(255, 255, 255, 0.4);
width: 70px;
height: 13px;
border-radius: 6.5px;
}
.promo-nav li{
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 4px;
margin: 3px;
}
.promo-nav .select{
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="./images/tb.jpg" alt="">
<!-- 左侧按钮 -->
<a href="" class="prev"><</a>
<!-- 右侧按钮箭头 -->
<a href="" class="next">></a>
<!-- 小圆点 -->
<ul class="promo-nav">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
11.3网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子
通过CSS浮动、定位可以让每个盒子排列成为网页
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
11.4元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现!
本质**:让一个元素在页面中隐藏或者显示出来**
- display显示隐藏
- visibility 显示隐藏
- overflow 溢出显示隐藏
11.4.1display属性
display属性用于设置一个元素应如何显示
display:none ;隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思display
隐藏元素后不再占有原来的位置
后面应用及其广泛，搭配JS可以做很多的网页特效
<!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>
.peppa{
width: 200px;
height: 200px;
background-color: pink;
display: none;
}
.george{
width: 200px;
height: 200px;
background-color: rgb(96, 95, 95);
}
</style>
</head>
<body>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>
</body>
</html>
11.4.2visible可见性
visibility 属性用于指定一个元素应可见还是隐藏
visibility : visible;元素可视
visibility: hidden;元素隐藏
visibility 隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用visibility:hidden
如果隐藏元素不想要原来位置，就用 display:none(用处更多重点)
11.4.3overflow溢出
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。
11.4.4 案例：土豆网鼠标经过显示遮罩
1.练习元素的显示与隐藏
2.练习元素的定位
核心原理: 原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来
遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。
<!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>
.tudou{
/* 子绝父相 */
position: relative;
width: 444px;
height: 320px;
margin: 100px auto;
}
.tudou img{
width: 100%;
height: 100%;
}
.mask{
position: absolute;
/* 隐藏遮罩层 */
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0,.3) url(images/arr.png) no-repeat center ;
}
/* 当我们鼠标经过了土豆这个盒子，就让里面遮罩层显示出来 */
.tudou:hover .mask{
/* 显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="./images/tudou.jpg" alt="">
</div>
</body>
</html>
12.CSS高级技巧
能够使用精灵图
能够使用字体图标
能够写出CSS三角
能够写出常见的CSS用户界面样式
能够说出常见的布局技5
12.1精灵图
12.1.1为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。
12.1.2精灵图（sprites）的使用
使用精灵图核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
2.这个大图片也称为sprites 精灵图或者雪碧图
3.移动背景图片位置，此时可以使用 background-position。
4.移动的距离就是这个标图片的x和y坐标。注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
使用精表图核心总结:
1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现—background-position
3.一般情况下精灵图都是负值。(千万注意网页中的坐标:x轴右边走是正值，左边走是负值，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>精灵图使用</title>
<style>
.box1{
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png);
/* 让图片往左边走 */
background-position: -182px 0;
}
.box2{
width: 27px;
height: 25px;
margin: 200px;
background: url(images/sprites.png);
background-position: -155px -106px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
12.1.3案例：拼出自己的名字
<!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>
span{
display: inline-block;
}
.s{
width: 115px;
height: 115px;
/* background-color: aliceblue; */
background: url(./images/abcd.jpg) no-repeat;
background-position: -253px -415px;
}
.j{
width: 104px;
height: 109px;
background: url(./images/abcd.jpg) no-repeat;
background-position: -387px -142px;
}
.h{
width: 104px;
height: 107px;
background: url(./images/abcd.jpg) no-repeat;
background-position: -218px -140px;
}
</style>
</head>
<body>
<span class="s">s</span>
<span class="j">j</span>
<span class="h">h</span>
</body>
</html>
12.2字体图标
12.2.1字体图标的产生
字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的，但是缺点很明显
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体.
12.2.2字体图标的优点
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
- 灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器，请放心使用
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化.
总结：
12.2.3字体图标下载
字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为:
- 字体图标的下载
- 字体图标的引入(引入到我们html页面中)
- 字体图标的追加(以后添加新的小图标)
推荐下载网站：
icomoon字库 http://icomoon.io
lcoMoon 成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。阿里iconfont宇库 http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点是，免费!
12.2.4字体图标的引入
下载完毕之后，注意原先的文件不要删，后面会用。
- 把下载包里面的fonts 文件夹放入页面根目录下
- 在CSS样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径的问题
12.2.5字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selection;json 重新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。
12.2.4.1字体文件格式
12.3CSS 三角
网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
一张图，你就知道CSS三角是怎么来的了,做法如下:
<!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>
.box1{
/* 要求宽和高是0 */
width: 0;
height: 0;
/* border: 10px solid pink; */
border-top: 20px solid pink;
border-right: 20px solid red;
border-bottom: 20px solid purple;
border-left: 20px solid green;
}
.box2{
width: 0;
height: 0;
/* 为了兼容性 */
line-height: 0;
font-size: 0;
/* border: 10px solid pink; */
border: 20px solid transparent;
border-left-color: pink;
}
.jd{
width: 120px;
height: 249px;
background-color: pink;
/* 子绝父相 */
position: relative;
}
.jd span{
position: absolute;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom: 5px solid rgb(214, 8, 42);
/* border-bottom,border-top分别是5px，要想完全出去，要调10px */
top: -10px;
left: 50%;
margin-left: -5px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="jd">
<span></span>
</div>
</body>
</html>
12.4CSS用户界面样式
12.4.1什么是界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
12.4.2鼠标样式cursor
li {cursor: pointer;
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
12.4.3轮廓线 outline
给表单添加**outline:0;或者 outline:none;**样式之后，就可以去掉默认的黑色边框
<!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>
input,textarea{
/* 取消表单轮廓 */
outline: none;
}
textarea{
resize: none;
}
</style>
</head>
<body>
<!-- 1.取消表单轮廓 -->
<input type="text">
<!-- 2.防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
12.5vertical-align 属性应用
解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方法有两种:
1.给图片添加vertical-align:middlel topl bottom等。 (提使用的)
2.把图片转换为块级元素 display: block;
<!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{
border: 2px solid rgb(10, 10, 10);
}
img{
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="./images/ldh.jpg" alt="">
</div>
</body>
</html>
12.6溢出的文字省略号显示
12.6.1单行文本溢出省略号显示
<!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: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 1.先强制一行内显示文本 */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3.文字用省略号替代超出部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
啥也不说，此处省略一万字
</div>
</body>
</html>
12.6.2多行文本溢出省略号显示
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)
开发中更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单.
<!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: 150px;
height: 55px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字
</div>
</body>
</html>
12.7常见布局技巧
巧妙利用一个技术更快更好的布局
1.margin负值的运用
2.文字围绕浮动元素
3.行内块的巧妙运用
4.css三角强化
12.7.1margin负值的运用
1. 让每个盒子margin 往左侧移动-1px正好压住相盒子边框
2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位(保留位置)如果有定位，则加z-index)
margin没加负值之前
<!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>
ui li{
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 2px solid red;
margin-left: -2px;
}
</style>
</head>
<body>
<ui>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ui>
</body>
</html>
margin加负值之后
案例：
<!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>
ui li{
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 2px solid red;
margin-left: -2px;
/* 父盒子加了相对定位，则子盒子用z-index */
position: relative;
}
/* ui li:hover{
一定要改成相对定位，占有原来的位置
如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 2px solid rebeccapurple;
} */
ui li:hover{
z-index: 1;
border: 2px solid rebeccapurple;
}
</style>
</head>
<body>
<ui>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ui>
</body>
</html>
12.7.2.文字围绕浮动元素
利用浮动元素不会压住文字的原理来实现
<!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>
* {
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 70px;
background-color: aqua;
margin: 0 auto;
padding: 5px;
}
.pic{
float: left;
width: 120px;
height: 70px;
margin-right: 8px;
}
.pic img{
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="./images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
</body>
</html>
12.7.3行内块的巧妙运用
页码布局：
<!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>
.box{
text-align: center;
}
.box a{
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
}
.box .prev,
.box .next{
width: 85px;
font-size: 14px;
}
.box .current,
.box .elp{
background-color: #fff;
border: none;
}
.box input{
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
</style>
</head>
<body>
<div class="box">
<a href="" class="prev"> <<上一页 </a>
<a href="">1</a>
<a href="" class="current">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="" class="elp">...</a>
<a href="" class="next"> >>下一页 </a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
</html>
12.7.4css三角强化
12.7.4.1CSS如何设置直角三角形
<!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>
.box1{
width: 0;
height: 0;
/* 上边框的撑高，并设置为透明 */
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
/* 左边和下边的宽度设置为0 */
border-bottom: 0 solid blue;
border-left: 0 solid green;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
12.7.4.2京东价格
<!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>
.box1{
width: 0;
height: 0;
/* 上边框的撑高，并设置为透明 */
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
/* 左边和下边的宽度设置为0 */
border-bottom: 0 solid blue;
border-left: 0 solid green;
}
.price{
width: 160px;
height: 24px;
border: 1px solid red;
margin: 100px auto;
line-height: 24px;
}
.miaosha{
float: left;
width: 90px;
height: 24px;
text-align: center;
background-color: red;
color: #fff;
/* 子绝父相 */
position: relative;
}
.miaosha i{
/* 绝对定位不占位置 */
position: absolute;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-right: 12px solid #fff;
left: 78px;
}
.yuanjia{
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
$1650
<!-- i标签专门用来制作三角 -->
<i></i>
</span>
<span class="yuanjia">$5650</span>
</div>
</body>
</html>
12.8CSS初始化
13.HTML5和CSS3提高
能够说出3~5个HTML5新增布局和表单标签
能够说出CSS3的新增特性有哪些
13.1HTML5的新特性
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
13.1.1HTML5新增的语义化标签
以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的.
注意:
1. 这种语义化标准主要是针对搜索引擎的
2. 这些新标签页面中可以使用多次
3. 在IE9中，需要把这些元素转换为块级元素
4. 其实，我们移动端更喜欢使用这些标签
5. HTML5还增加了很多其他标签，我们后面再慢慢学
13.1.2HTML5新增的多媒体标签
新增的多媒体标签主要包含两个:
音频 :
视频 :
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash 和其他浏览器插件
13.1.2.1视频 : <video>
HTML5 在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。
语法：
<video src="文件地址" controls="controls"></video>
<!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>HTML5新增视频标签</title>
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
</body>
</html>
13.1.2.2音频 : <audio>
语法:
<audio src="文件地址”controls="controls"></audio>
提高兼容性：
13.1.2.3多媒体标签总结
音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加muted 属性来静音播放视频，音频不可以(可以通过JavaScript解决)视频视频标签是重点，我们经常设置自动播放，不使用controls 控件，循环和设置大小属性
13.1.3HTML5新增的input类型
<!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>Document</title>
</head>
<body>
<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
<ul>
<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="time" /></li>
<li>数量: <input type="number" /></li>
<li>手机号码: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li>
<!-- 当我们点击提交按钮就可以验证表单了 -->
<li> <input type="submit" value="提交"></li>
</ul>
</form>
</body>
</html>
13.1.4HTML5新增的表单属性
<!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>
input::placeholder{
color: pink;
}
</style>
</head>
<body>
<form action="">
<input type="search" name="" id="" required="required" placeholder="placeholder" style="outline: none;">
<!-- 只能选择一个,加multiple="multiple"可以多选 -->
<input type="file" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
</html>
required=“required：”
placeholder=“placeholder”
<input type=“file” multiple=“multiple”>
13.2CSS3的新特性
13.2.1CSS3的现状
新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛
现阶段主要学习:新增选择器和盒子模型以及其他特性
13.2.2CSS3新增选择器
CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
13.2.3属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
注意:类选择器、、属性选择器、伪类选择器，权重为10.
<style>
input[value]{
color: pink;
}
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
input[type="text"]{
color: pink;
}
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!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>
/* 必须是unput同时具有value这个属性，选择这个元素 */
input[value]{
color: pink;
}
input[type="text"]{
color: pink;
}
/* 首选div，然后选择具有class属性且的值为ico开头的 */
div[class^=icon]{
color: pink;
}
section[class$="data"]{
color: aquamarine;
}
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
</html>
13.2.4结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
**nth-child(n)**选择某个父元素的一个或多个特定的子元素
n 可以是数字，关键字和公式
n 如果是数字，就是选择第n 个子元素，里面数字从1开始…
n可以是关键字:even偶数，odd 奇数
n 可以是公式:常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)
注意：n从0开始！！！
区别 :
- nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找第n个孩子
语法：
ul li:nth-child(2) {
background-color: skyblue;
}
<!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>CSS3新增结构伪类选择器</title>
<style>
/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 选择ul里面的第2个孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
ul li:nth-child(6) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
</body>
</html>
13.2.5结构伪类选择器应用（隔行变色）
<!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>CSS3新增结构伪类选择器-nth-child</title>
<style>
/* 1.把所有的偶数 even的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
/* ol li:nth-child(n) {
background-color: pink;
} */
/* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
/* ol li:nth-child(2n) {
background-color: pink;
}
ol li:nth-child(2n+1) {
background-color: skyblue;
} */
/* ol li:nth-child(n+3) {
background-color: pink;
} */
ol li:nth-child(-n+3) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
</html>
13.2.6-nth-child和nth-of-type的区别
1.nth-child 会先把所有的盒子都排列序号
执行的时候首先看 :nth-child(1) 之后回去看 前面 div，如果不是div，则不会选择出来
2. nth-of-type 会把指定元素的盒子排列序号
执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子
<!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>CSS3新增选择器nth-type-of</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* nth-child 会先把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div，如果不是div，则不会选择出来 */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
13.2.7小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
- 关于nth-child(n)我们要知道n是从0开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用nth-child 更多
- 类选择器、属性选择器、伪类选择器，权重为10
13.2.8伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构.
使用场景：例如下面的小箭头，遮罩层可以用伪元素选择器来做：
注意：
before 和after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法: element::before {}
before和 after 必须有 content 属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1
<!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: 200px;
height: 200px;
background-color: pink;
}
div::before{
/* content必须要写 */
content: '我';
/* 不生效，因为为元素是行内元素 */
width: 50px;
height: 60px;
background-color: aqua;
}
div::after{
content: '猪';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
13.2.9伪元素选择器使用场景1 :伪元素字体图标
<!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>
/* 使用字体文件要声明，字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
width: 200px;
height: 20px;
border: 1px solid red;
position: relative;
}
div::after {
/* 添加图标要用"\"转译 */
content: '\e91e';
/* */
position: absolute;
right: 10px;
color: gray;
font-size: 18px;
font-family: icomoon;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.2.10伪元素选择器使用场景2 仿土豆效果
<!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>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
/* 而是显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
13.2.11伪元素选择器使用场景3：伪元素清除浮动
清除浮动原理：
原理：
13.2.12CSS3盒子模型
传统：一个盒子加了padding，border之后会在原来的基础上变大，为了保证不撑开需要减去
CSS3中可以通过 box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
可以分成两种情况:
1. box-sizing:content-box 盒子大小为 width+ padding+ border (以前默认的)
2. box-sizing:border-box 盒子大小为width
如果盒子模型我们改为了box-sizing:border-box，那paddina和border就不会撑大盒子了(前提padding和border不会超过width宽度)
<!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>
/* 所以以后*{}可以全局设置box-sizing: border-box; */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 200px;
height: 200px;
background-color: pink;
border: 2px solid red;
padding: 15px;
/* 默认 */
box-sizing: content-box;
}
p{
width: 200px;
height: 200px;
background-color: pink;
border: 2px solid red;
padding: 15px;
/* css3盒子模型 盒子最终的大小就是width的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪佩奇
</div>
<p>
小猪佩奇
</p>
</body>
</html>
13.2.13CSS3其他特性（了解）
1.图片变模糊
2.计算盒子宽度width:calc 函数
13.2.13.1图片变模糊
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位
filter:函数();
例如 : filter: blur(5px);blur模糊处理 数值越大越模糊
filter:函数();例如 : filter: blur(5px);blur模糊处理 数值越大越模糊
<!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>
img{
/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
filter: blur(4px);
}
</style>
</head>
<body>
<img src="./images/pink.jpg" alt="">
</body>
</html>
13.2.13.2.计算盒子宽度width:calc 函数
Css3 calc 函数:
calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% -80px);
括号里面可以使用±*/来进行计算
需求：我们的子盒子宽度永远比义盒子小30 像素
<!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>
.father{
width: 300px;
height: 209px;
background-color: pink;
}
.son{
/* width: 150px; */
/* 需求我们的子盒子宽度永远比父盒子小30px */
/* width: calc(150px+30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30px -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
13.2.14 CSS3过渡（重点）
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用
transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性: 想要变化的 css 属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
2.花费时间:单位是秒(必须写单位) 比如0.5s
3运动曲线:默认是ease(可以省略)
4.何时开始:单位是秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
<!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: 200px;
height: 100px;
background-color: pink;
/* transition:要过渡的属性 花费时间 运动曲线 何时开始 */
/* 如果想要写多个属性，利用逗号进行分隔 */
/* transition: width .5s ease 1s, height .5s ease 1s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
transition: all 0.5s;
/* 谁做过渡，给谁加 */
}
div:hover{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3过渡练习-进度条</title>
<style>
*{
margin: 0;
padding: 0;
}
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
border-radius: 7px;
background-color: red;
/* 谁做过渡给谁加 */
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
13.3 CSS3 2D转换
**转换( transform)**是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果.
转换(transform)你可以简单理解为变形：
- 移动:translate
- 旋转:rotate
- 缩放:scale
13.3.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
13.3.2 2D 转换之移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
1.语法：
transform: translate(x,y);
或者分开写
transform: translateX(n);
transform: translateY(n);
2.重点
定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%50%);
对行内标签没有效果
<!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>Document</title>
<style>
/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
/* transform: translate(x, y); */
/* transform: translate(100px, 100px); */
/* 1. 我们如果只移动x坐标 */
/* transform: translate(100px, 0); */
/* transform: translateX(100px); */
/* 2. 我们如果只移动y坐标 */
/* transform: translate(0, 100px); */
/* transform: translateY(100px); */
}
div:first-child {
transform: translate(30px, 30px);
}
div:last-child {
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
translate中的百分比单位是相对于自身元素的translate:(50%50%)
<!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: 100px;
height: 100px;
background-color: pink;
/* translate中的百分比单位是相对于自身元素的translate:(50%50%); */
transform: translate(50%,50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.3.3转换之移动让盒子实现水平和垂直居中
<!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>
*{
margin: 0;
padding: 0;
}
div:nth-child(2){
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
p{
width: 200px;
height: 200px;
background-color: gray;
position: absolute;
left: 50%;
top: 50%;
/* margin-top: -100px;
margin-left: -100px; */
/* 使用百分比进行就不会受父盒子宽高影响 */
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div></div>
<div>
<p></p>
</div>
</body>
</html>
13.3.4 2D 转换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
1.语法
transform:rotate(度数)
2.重点
rotate里面跟度数，单位是deg 比如 rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点
初步应用：
<!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 img{
width: 200px;
border-radius: 100px;
border: 5px solid rgb(121, 121, 173);
transition: all 1.7s;
}
div img:hover{
transform: rotate(-450deg);
}
</style>
</head>
<body>
<div>
<img src="./media/pic.jpg" alt="">
</div>
</body>
</html>
13.3.5 2D 转换之旋转 rotate制作三角
<!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: 150px;
height: 30px;
border: 1px solid #000;
position: relative;
}
div::after{
content: '';
/* 用到定位就不需要转换为块级元素了 */
position: absolute;
right: 15px;
top: 5px;
width: 10px;
height: 10px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(45deg);
transition: all 0.7s;
}
/* 设置鼠标经过后三角旋转 */
div:hover::after{
/* 45+180 */
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.3.6 2D转换设置中心点transform-origin
我们可以设置元素转换的中心点
1.语法
transform-origin: x y;
2.重点
- 注意后面的参数x和y用空格隔开
- xy 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y设置像素或者 方位名词 (top bottom left right center)
<!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: 200px;
height: 200px;
background-color: gray;
margin: 100px auto;
transition: all 0.7s;
/* transform-origin默认是50%，50%即中心点 */
/* 是设置盒子的旋转点，（哪个盒子需要设置旋转点就去哪个盒子设置，不要去hover设置） */
/* 可以跟方位名词 */
transform-origin: left bottom;
}
div:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.3.7旋转案例
<!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: 150px;
height: 150px;
border: 1px solid gray;
margin: 100px auto;
/* 溢出隐藏 */
overflow: hidden;
}
div::before{
content: '';
width: 100%;
height: 100%;
background-color: antiquewhite;
display: block;
transform: rotate(90deg);
transform-origin: 0px 150px;
transition: all 1s;
}
div:hover::before{
/* 90+-90=0 */
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.3.82D转换之缩放scale
缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。
1.语法
transform:scale(x,y) ;
2.注意
- 注意其中的x和y用逗号分隔
- transform:scale(1,1):宽和高都放大一倍，相对于没有放大
- transform:scale(2,2):宽和高都放大了2倍
- transform:scale(2) :只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:scale(0.505):缩小
- sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
13.3.9图片放大案例
<!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{
transform-origin: 50% 50%;
margin: 20px;
float: left;
/* 溢出隐藏 */
overflow: hidden;
}
div img{
transition: all 0.7s;
}
/* 注意不是盒子变大，是盒子不变，图片变大 */
div img:hover{
/* scale放大不会影响其他盒子*/
transform: scale(1.4);
}
</style>
</head>
<body>
<div><a href=""><img src="./media/scale.jpg" alt=""></a></div>
<div><a href=""><img src="./media/scale.jpg" alt=""></a></div>
<div><a href=""><img src="./media/scale.jpg" alt=""></a></div>
</body>
</html>
13.3.10分页按钮变大
<!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>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
div{
width: 1000px;
height: 100px;
border: 1px solid gray;
margin: 100px auto;
}
ul li{
width: 60px;
height: 60px;
border: 1px solid red;
line-height: 60px;
text-align: center;
float: left;
margin: 20px;
border-radius: 30px;
transition: all 0.7s;
cursor: pointer;
}
ul li:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
</html>
13.3.11 2D转换综合写法
注意：
- 同时使用多个转换，其格式为:transform: translate0 rotate0 scale0.等
- 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
<!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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.3.12 2D转换小结
- 转换transform 我们简单理解就是变形有2D和3D之分
- 我们暂且学了三个分别是位移旋转和缩放
- 2D移动translate(x,y)最大的优势是不影其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
- 可以分开写比如 translateX(x) 和 translateY(y)
- 2D旋转rotate(度数)可以实现旋转元素度数的单位是deg
- 2D缩放sacle(x;y) 里面参数是数字不跟单位可以是小数 最大的优势不影响其他盒子
7. 设置转换中心点transform-origin:xy; 参数可以百分比、像素或者是方位名词
8. 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
13.4 CSS3 动画
**动画(animation)**是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
13.4.1动画的基本使用
制作动画分为两步：
1先定动画
2.再使用(调用)动画
13.4.1.2用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
13.4.1.3调用动画
div{
width: 200px;
height: 200px;
background-color: gray;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
13.4.1.4例子：
<!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: 200px;
height: 200px;
background-color: gray;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
/* 需求：页面一打开，一个盒子从左边走到右边 */
/* 1.定义动画 ,"move"是时间*/
@keyframes move{
/* 开始状态 */
0%{
transform: translateX(0px);
}
/* 结束状态 */
100%{
transform: translateX(1000px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.4.2动画序列
在这里插入图片描述](https://img-blog.csdnimg.cn/f5a0fad6a0b34964b69c6a81e7b38b03.png)
动画序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间，或用关键词“from"和“to”等同于0%和100%
<!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>
/* 定义动画 */
/* from...to... */
/*
@keyframes move {
from{
transform: translate(0,0);
}
to{
transform: translate(1000px,0);
}
}
*/
/* 定义动画 */
/* 状态序列做多个状态的变化 */
/* 1.可以做多个状态的变化 keyframe 关键 */
/* * 2.里面的百分比要是整数 */
/* 3.里面的百分比就是 总的时间 (我们这个案例10s) 的划分*/
@keyframes move {
0%{
transform: translate(0,0);
}
25%{
transform: translate(1000px,0);
}
50%{
transform: translate(1000px,500px);
}
75%{
transform: translate(0,500px);
}
100%{
transform: translate(0,0);
}
}
/* 动画序列 */
div{
width: 100px;
height: 100px;
background-color: gray;
/* 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.4.3动画常见属性
<!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: 100px;
height: 10px;
background-color: gray;
/* 动画名称 */
animation-name: move;
/* 规定动画完成一个周期所需要的时间 */
animation-duration: 10s;
/* 规定动画的速度曲线，默认是“ease” */
animation-timing-function: ease;
/* 何时开始 ,2秒后开始*/
animation-delay: 2s;
/* 规定播放的次数，默认是1，还有infinite（无线循环） */
animation-iteration-count: infinite;
/* 是否反方向返回 */
animation-direction: alternate;
/* 动画结束的状态,保持forwards，回到起始backwards(默认) */
animation-fill-mode: backwards;
}
div:hover{
/* 鼠标经过div让这个div停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
}
@keyframes move {
0%{
transform: translate(0,0);
}
100%{
transform: translate(1000px,0);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.4.4动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。
名称，所需时间，开始时间，循环，反方向
animation: myfirst 5s linear 2s infinite alternate;
简写属性里面不包含animation-play-state
暂停动画:animation-play-state: puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来:animation-directionalternate
盒子动画结束后，停在结束位置: animation-fill-mode :forwards
13.4.5热点图案例
主要原理：先使用定位把热点定位到同一个位置。热点由四个点组成。其中三个点设置阴影模拟（如果不设置阴影会是实体颜色不够美观），三个点定位到盒子中间，方便后续动画扩大的时候沿中心点扩散。（运用transform: translate(-50%,-50%);
设置居中）。然后设置三个点动画效果。并且设置延迟
<!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>
body{
background-color: #333;
}
.map{
width: 717px;
height: 617px;
background: url(./media/map.png) no-repeat;
margin: 0 auto;
position: relative;
}
.city1{
position: absolute;
top: 230px;
right: 145px;
}
.city2{
position: absolute;
top: 525px;
right: 145px;
}
.city3{
position: absolute;
top: 496px;
right: 40px;
}
.dottod{
/* 中心点 */
width: 8px;
height: 8px;
background-color: rgb(36, 36, 225);
border-radius: 4px;
}
.city div[class^='pulse']{
width: 8px;
height: 8px;
/* background-color: #009dfd; */
/* 不要给边框，通过设置阴影 */
box-shadow: 0 0 12px #009dfd;
/* div是块级元素，所以不在同一个点上，需要用到定位 */
/* 用绝对定位 */
position: absolute;
top: 50%;
left: 50%;
/* 保证在 父盒子水平垂直居中位置，放大之后就会中心向四周发散 */
transform: translate(-50%,-50%);
border-radius: 50%;
/* 调用动画 */
animation-name: pulse;
animation-duration: 1.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* 设置不同的开始时间 */
.city .pulse2{
animation-delay: 0.4s;
}
.city .pulse3{
animation-delay: 0.8s;
}
/* 定义动画 */
@keyframes pulse {
0%{
}
70%{
/* 不使用transform: scale，因为会让阴影也跟着变大 */
/* transform: scale(1.1); */
width: 20px;
height: 20px;
opacity: 1;
}
100%{
width: 30px;
height: 30px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<!-- 放一个盒子，定位到北京 -->
<div class="city city1">
<div class="dottod"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city city2">
<div class="dottod"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city city3">
<div class="dottod"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
13.4.5热点图案例
animation-timing-function:规定动画的速度曲线，默认是“ease“
实现打字机效果：
<!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: 0px;
height: 20px;
background-color: gray;
font-size: 20px;
overflow: hidden;
/* 盒子宽度不够时让文字强制一行显示 */
/* white-space: nowrap; */
/* steps(10)分几步完成动画，就不要再写其他速度效果了 */
animation: move 4s steps(10) infinite ;
}
@keyframes move {
0%{
}
100%{
width: 200px;
}
}
</style>
</head>
<body>
<div>
速度曲线速度曲线速度
</div>
</body>
</html>
13.4.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>
body {
background-color: gray;
}
.bear {
position: absolute;
width: 200px;
height: 100px;
background: url(./media/bear.png) no-repeat;
animation: bear 1s steps(8) infinite,move 4s forwards;
/* 元素可以添加多个动画，方法是用逗号分隔 */
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px, 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%,0);
}
}
</style>
</head>
<body>
<div class="bear"></div>
</body>
</html>
13.5 CSS3 3D转换
我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子
有什么特点
近大远小。
物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果
13.5.1三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的.
- x轴:水平向右注意:x 右边是正值，左边是负值
- y轴:垂直向下注意:y 下面是正值，上面是负值
- z轴:垂直屏幕注意:往外面是正值，往里面是负值
13.5.2 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
- translform:translateX(100px):仅仅是在x轴上移动
- translform:translateY(100px):仅仅是在Y轴上移动
- translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
- transform:translate3d(x,y,z): 其中x、y，z分别指要移动的轴的方向的距离
<!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: 200px;
height: 200px;
background-color: gray;
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
}
@keyframes move {
0%{
}
100%{
/* 1.translateZ 沿着Z轴移动 */
/* 2.translateZ 后面的单位我们一般跟px */
/* 3.translateZ(100px)向外移动100px */
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* 4.3D移动有简写的方法 */
/* transform: translate3d(100px,100px,100px); */
/* 使用translate3d，xyz是不能省略的 */
transform: translate3d(0,100px,100px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.5.2 透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
13.5.3 translateZ
translform:translateZ(100px):仅仅是在Z轴上移动有了透视，就能看到translatez引起的变化了
注意：
一般是定义好父盒子的透视perspective，然后通过调整子盒子的translateZ达到需求。因为一个父盒子可能会有几个子盒子需要不同的3D效果。
<!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>Document</title>
<style>
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: rgb(90, 85, 86);
margin: 100px auto;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
13.5.4 3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
语法：
- transform:rotateX(45deg):沿着x轴正方向旋转45度
- transform:rotateY(45deg):沿着y轴正方向旋转45deg
- transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
- transform:rotate3d(xy,zdeg):沿着自定义轴旋转deg为角度(了解即可)
13.5.5 3D呈现 transfrom-style
- 控制子元素是否开启三维立体环境。
- trarksform-style:flat子元素不开启3d立体空间 默认的
- transform-style:preserve-3d;子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
- 这个属性很重要，后面必用
<!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>
.father{
width: 200px;
height: 400px;
margin: 100px auto;
position: relative;
perspective: 500px;
/* 让子元素保持3D立体空间 */
transform-style: preserve-3d;
/* transform: rotateY(-60deg); */
transition: all 8s;
}
.father:hover{
transform: rotateY(360deg);
}
.father div:first-child{
width: 100%;
height: 100%;
background-color: gray;
position: absolute;
top: 0;
left: 0;
}
.father div:last-child{
width: 100%;
height: 100%;
background-color: rgb(4, 60, 6);
position: absolute;
top: 0;
left: 0;
transform: rotateX(80deg);
}
</style>
</head>
<body>
<div class="father">
<div></div>
<div></div>
</div>
</body>
</html>
13.5.6 两面翻转的盒子
1.搭建HTML结构
<div class="box">
<div class="front">111</div>
<div class="back">222</div>
</div>
box父盒子里面包含前后两个子盒子
box是翻转的盒子 front是前面盒子back是后面盒子
<!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>
body{
perspective: 500px;
}
.box{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
background-color: aliceblue;
transition: all 2s;
/* 添加3d效果，背面的盒子保留立体空间 */
transform-style: preserve-3d;
}
.box:hover{
transform: rotateY(180deg);
}
.front,
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
/* line-height 不能用百分比 */
/* line-height: 100%; */
line-height: 300px;
font-size: 30px;
color: #fff;
}
.front{
background-color: gray;
z-index: 1;
/* 重要！！！！！ */
/*浏览器bug：要添加：背面隐藏效果 在元素不面向屏幕时隐藏 */
backface-visibility: hidden;
}
.back{
background-color: green;
/* 先翻转，后面整个盒子再翻转180字体就正了 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
</div>
</body>
</html>
13.5.7 案例:3D导航栏
做法：前面一个盒子，底下一个盒子：
<ul>
</li>
<div class="box">
<div class="front">front</div>
<div class="bottom">bottom</div>
</div>
</li>
</ul>
<!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>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
ul{
margin: 100px auto;
}
ul li{
width: 120px;
height: 40px;
/* 设置透视 */
perspective: 500px;
float: left;
}
.box{
width: 100%;
height: 100%;
position: relative;
/* 设置3D效果 */
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover{
transform: rotateX(90deg);
}
.front,
.bottom{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
line-height: 40px;
text-align: center;
}
.front{
background-color: gray;
z-index: 1;
/* 第二步 ：因为box是沿着中心点选旋转的，第一步之后中心点再front上，所以要让
front盒子往前移动，使中心点位于盒子正中心，旋转达到效果*/
transform: translateZ(20px);
}
.bottom{
background-color: green;
/* 第一步处理下面的盒子 */
/*X是负的，只有这样box盒子翻转的时候才能看到它 */
/* transform: translateY(20px); */
/* transform: rotateX(-80deg); */
/* 两个transform要连写,而且有移动要先写移动 */
transform: translateY(50%) rotateX(-90deg);
}
/* 底下盒子的制作：先X轴旋转，然后Y轴往下移动 */
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">front</div>
<div class="bottom">bottom</div>
</div>
</li>
<li>
<div class="box">
<div class="front">front</div>
<div class="bottom">bottom</div>
</div>
</li>
<li>
<div class="box">
<div class="front">front</div>
<div class="bottom">bottom</div>
</div>
</li>
<li>
<div class="box">
<div class="front">front</div>
<div class="bottom">bottom</div>
</div>
</li>
<li>
<div class="box">
<div class="front">front</div>
<div class="bottom">bottom</div>
</div>
</li>
</ul>
</body>
</html>
13.5.7 案例:旋转木马
<!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>Document</title>
<style>
body {
perspective: 2000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/* perspective: 1000px; */
animation: rotate 6s linear infinite;
}
section:hover{
/* 鼠标经过停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
0%{
}
100%{
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: url(media/dog.jpg) no-repeat;
}
section div:nth-child(1) {
/* 特殊：先旋转好再移动，也可以先移动再旋转，但是（不是每一个都只沿Z轴移动）需要先确定移动方向 */
transform: translateZ(500px);
}
section div:nth-child(2){
transform: rotateY(45deg) translateZ(500px);
}
section div:nth-child(3){
transform: rotateY(90deg) translateZ(500px);
}
section div:nth-child(4){
transform: rotateY(135deg) translateZ(500px);
}
section div:nth-child(5){
transform: rotateY(180deg) translateZ(500px);
}
section div:nth-child(6){
transform: rotateY(225deg) translateZ(500px);
}
section div:nth-child(7){
transform: rotateY(270deg) translateZ(500px);
}
section div:nth-child(8){
transform: rotateY(315deg) translateZ(500px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
13.6 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1.私有前缀
- -moz-:代表firefox 浏览器私有属性
- -ms-:代表ie 浏览器私有属性
- -webkit-:代表safari、chrome私有属性
- -0-:代表Opera 私有属性
例如要写圆角属性
2.提倡的写法
-moz-border-radius: 10px;
-weokit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
13.6总结：
14.PC端品优购项目
（300p-353p）
- 能够独立完成品优购首页制作
- 能够独立完成品优购列表页制作
- 能够独立完成品优购注册页制作
- 能够把品优购网站部署上线
14.1 品优购项目规划
14.1.1 网站制作流程
14.1.2品优购项目整体介绍
项目名称：品优购
项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作
14.1.3品优购项目的学习目的
- 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
- 品优购项目能复习、总结、提高基础班所学布局技术。
- 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知。
- 为后期学习移动端项目做铺垫。
14.1.4 开发工具以及技术栈
- 开发工具
VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）- 技术栈
利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式
采取结构与样式相分离，模块化开发
良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹— 品优购代码规范.md）
14.1.5 品优购项目搭建工作
14.1.6 网站 favicon 图标
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持 favicon.ico 图标
一、制作favicon图标
- 把品优购图标切成 png 图片。
- 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
二、favicon图标放到网站根目录下
三、 HTML页面引入favicon图标
- 在html 页面里面的 <head> </head>元素之间引入代码。
14.1.7 网站TDK三大标签SEO优化
SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索
引擎内自然排名的方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提
高网站的知名度。
页面必须有三个标签用来符合 SEO 优化。
1. title 网站标题
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判
断点。
建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）
例如：
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2. description 网站说明
简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网
作为…”、“电话：010…”之类语句。
例如：
<meta name=“description” content=“京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、
家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物
体验!” />
3. keywords 关键字
keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式。
例如：
<meta name= " keywords" content=“网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配
件,手表,存储卡,京东” />
14.2 品优购首页制作
网站的首页一般都是使用 index 命名，比如 index.html 或者 index.php 。
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。
14.2.1 常用模块类名命名
以下是我们约定的命名模块，同学们可以直接使用以下类名即可。
14.2.2 快捷导航 shortcut 制作
14.2.3 header 制作
LOGO SEO 优化
14.2.4 nav 导航制作
14.2.5 footer 底部制作
14.2.6 main 主体模块制作
以前书写的就是模块化中的公共部分。
main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css 。
14.2.7 推荐模块制作
14.2.8 楼层区 floor 制作
14.3 品优购列表页制作
14.3.1 品优购列表页制作准备工作
- 列表页面是新的页面，我们需要新建页面文件 list.html 。
- 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
- 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。
- 需要新的 list.css 样式文件，这是列表页专门的样式文件。
14.3.2 列表页 header 和 nav 修改
秒杀盒子 sk（ second kill ） 定位即可
1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
14.3.3 列表页主体 sk _container
14.4 品优购注册页制作
14.4.1 注册页类名命名
14.4.2 注册页布局
14.4.3 registerarea 布局
1901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
