【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换

文章目录

HTML5 第一天
- - 一、什么是 `HTML5`
  - 二、`HTML5 ` 新增标签
  - 三、多媒体音频标签
  - 四、多媒体视频标签
  - 五、新增 input 标签
  - 六、新增表单属性
  - 七、`CSS3 ` 属性选择器(上)
  - 八、`CSS3 ` 属性选择器(下)
  - 九、结构伪类选择器
  - 十、`nth-child` 参数详解
  - 十一、`nth-child` 和 `nt-of-type` 的区别
  - 十二、伪元素选择器
  - 十三、伪元素的案例
  - 十四、`2D` 转换之 `translate`
  - 十五、让一个盒子水平垂直居中
  - 十六、`2D 转换 rotate`
- 每日作业 - H5C3第1天
- 基础案例
- - 01-《美的》导航搜索
  - - 训练描述
    - 训练提示
    - 操作步骤
  - 02-《小米》产品
  - - 训练描述
    - 训练提示
    - 操作步骤
  - 03-《beats耳机》按钮
  - - 训练描述
    - 训练提示
    - 操作步骤
- 扩展案例
- - 04- 整理icomoon图标, 阿里图标，awesome图标
  - - 训练描述
    - 训练提示
    - 操作步骤
  - 太极图案

HTML5 第一天

一、什么是 `HTML5`

HTML5 的概念与定义
- 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
- 两个概念：
  - 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
  - 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5
HTML5 拓展了哪些内容
- 语义化标签
- 本地存储
- 兼容特性
- 2D、3D
- 动画、过渡
- CSS3 特性
- 性能与集成
HTML5 的现状

绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，

总的来说：HTML5 已经是大势所趋

二、`HTML5` 新增标签

什么是语义化
新增了那些语义化标签
- header — 头部标签
- nav — 导航标签
- article — 内容标签
- section — 块级标签
- aside — 侧边栏标签
- footer — 尾部标签
使用语义化标签的注意
- 语义化标签主要针对搜索引擎
- 新标签可以使用一次或者多次
- 在 IE9 浏览器中，需要把语义化标签都转换为块级元素
- 语义化标签，在移动端支持比较友好，
- 另外，HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的

<!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>header,nav,section {display: block;height: 120px;background-color: pink;margin: 10px;}</style></head><body><header> header</header><header> header</header><nav> nav </nav><section></section>
</body></html>

三、多媒体音频标签

多媒体标签有两个，分别是
- 音频 – audio
- 视频 – video
audio 标签说明
- 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
- 但是：播放格式是有限的
audio 支持的音频格式
- audio 目前支持三种格式
audio 的参数

5、audio 代码演示

<body><!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 --><!-- <audio src="./media/snow.mp3" controls autoplay></audio> --><!-- 因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件--><audio controls><source src="./media/snow.mp3" type="audio/mpeg" /></audio>
</body>

四、多媒体视频标签

video 视频标签
- 目前支持三种格式

语法格式

<video src="./media/video.mp4" controls="controls"></video>

video 参数

video 代码演示

<body><!-- <video src="./media/video.mp4" controls="controls"></video> --><!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 --><video controls="controls" autoplay muted loop poster="./media/pig.jpg"><source src="./media/video.mp4" type="video/mp4"><source src="./media/video.ogg" type="video/ogg"></video>
</body>

多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同，存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

五、新增 input 标签

<body><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>

六、新增表单属性

<body><form action="">用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> <input type="submit" value="提交"> 上传头像: <input type="file" name="" id="" multiple="multiple"></form>
</body>

七、`CSS3` 属性选择器(上)

什么是 CSS3
- 在 CSS2 的基础上拓展、新增的样式
CSS3 发展现状
- 移动端支持优于 PC 端
- CSS3 目前还草案，在不断改进中
- CSS3 相对 H5，应用非常广泛
属性选择器列表

属性选择器代码演示

button {cursor: pointer;
}
button[disabled] {cursor: default
}

八、`CSS3` 属性选择器(下)

代码演示

input[type=search] {color: skyblue;
}span[class^=black] {color: lightgreen;
}span[class$=black] {color: lightsalmon;
}span[class*=black] {color: lightseagreen;
}

<!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>/* 属性选择器使用方法 *//* 选择的是：  既是button 又有 disabled 这个属性的元素 *//* 属性选择器的权重是 10 *//* 1.直接写属性 */button[disabled] {cursor: default;}button {cursor: pointer;}/* 2. 属性等于值 */input[type="search"] {color: pink;}/* 3. 以某个值开头的 属性值 */div[class^="icon"] {color: red;}/* 4. 以某个值结尾的 */div[class$="icon"] {color: green;}/* 5. 可以在任意位置的 */div[class*="icon"] {color: blue;}</style>
</head><body><!-- disabled 是禁用我们的按钮 --><button>按钮</button><button>按钮</button><button disabled="disabled">按钮</button><button disabled="disabled">按钮</button><input type="text" name="" id="" value="文本框"><input type="text" name="" id="" value="文本框"><input type="text" name="" id="" value="文本框"><input type="search" name="" id="" value="搜索框"><input type="search" name="" id="" value="搜索框"><input type="search" name="" id="" value="搜索框"><div class="icon1">图标1</div><div class="icon2">图标2</div><div class="icon3">图标3</div><div class="iicon3">图标4</div><div class="absicon">图标5</div>
</body></html>

九、结构伪类选择器

属性列表

代码演示

ul li:first-child {background-color: lightseagreen;
}ul li:last-child {background-color: lightcoral;
}ul li:nth-child(3) {background-color: aqua;
}

十、`nth-child` 参数详解

nth-child 详解
- 注意：本质上就是选中第几个子元素
- n 可以是数字、关键字、公式
- n 如果是数字，就是选中第几个
- 常见的关键字有 even 偶数、odd 奇数
- 常见的公式如下(如果 n 是公式，则从 0 开始计算)
- 但是第 0 个元素或者超出了元素的个数会被忽略

代码演示

<style>/* 偶数 */ul li:nth-child(even) {background-color: aquamarine;}/* 奇数 */ul li:nth-child(odd) {background-color: blueviolet;}/*n 是公式，从 0 开始计算 */ul li:nth-child(n) {background-color: lightcoral;}/* 偶数 */ul li:nth-child(2n) {background-color: lightskyblue;}/* 奇数 */ul li:nth-child(2n + 1) {background-color: lightsalmon;}/* 选择第 0 5 10 15, 应该怎么选 */ul li:nth-child(5n) {background-color: orangered;}/* n + 5 就是从第5个开始往后选择 */ul li:nth-child(n + 5) {background-color: peru;}/* -n + 5 前五个 */ul li:nth-child(-n + 5) {background-color: tan;}</style>

十一、`nth-child` 和 `nt-of-type` 的区别

代码演示

<style>div :nth-child(1) {background-color: lightblue;}div :nth-child(2) {background-color: lightpink;}div span:nth-of-type(2) {background-color: lightseagreen;}div span:nth-of-type(3) {background-color: #fff;}</style>

区别
- nth-child 选择父元素里面的第几个子元素，不管是第几个类型
- nt-of-type 选择指定类型的元素

<!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 :nth-child(1) {background-color: pink;}div :nth-child(2) {background-color: purple;} *//* div span:nth-child(1) {  这个选不到background-color: pink;} */div span:nth-child(2) {background-color: pink;}/* 总结： :nth-child(n)  选择 父元素里面的 第 n个孩子， 它不管里面的孩子是否同一种类型 *//* of-type 选择指定类型的元素 */div span:first-of-type {background-color: purple;}div span:last-of-type {background-color: skyblue;}div span:nth-of-type(2) {background-color: red;}</style>
</head><body><div><p>我是一个屁</p><span>我是span</span><span>我是span</span><span>我是span</span></div><!-- ul 里面我们只允许放li  所以 nth-child 和 nth-of-type 就一样了 --><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body></html>

十二、伪元素选择器

伪类选择器
伪类选择器注意事项
- before 和 after 必须有 content 属性
- before 在内容前面，after 在内容后面
- before 和 after 创建的是一个元素，但是属于行内元素
- 创建出来的元素在 Dom 中查找不到，所以称为伪元素
- 伪元素和标签选择器一样，权重为 1

代码演示

<style>div {width: 100px;height: 100px;border: 1px solid lightcoral;}div::after,div::before {width: 20px;height: 50px;text-align: center;display: inline-block;}div::after {content: '德';background-color: lightskyblue;}div::before {content: '道';background-color: mediumaquamarine;}</style>

十三、伪元素的案例

添加字体图标

p {width: 220px;height: 22px;border: 1px solid lightseagreen;margin: 60px;position: relative;
}
p::after {content: '\ea50';font-family: 'icomoon';position: absolute;top: -1px;right: 10px;
}

@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?cv013x');src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');font-weight: normal;font-style: normal;
}span {font-family: 'icomoon';position: absolute;top: 10px;right: 10px;
}div,
p {position: relative;width: 249px;height: 35px;border: 1px solid red;
}
/* p::after {content: '';position: absolute;top: 10px;right: 10px;font-family: 'icomoon';
} */p::after {content: '\ea50';position: absolute;top: 10px;right: 10px;font-family: 'icomoon';
}

十四、`2D` 转换之 `translate`

2D 转换
- 2D 转换是改变标签在二维平面上的位置和形状
- 移动： translate
- 旋转： rotate
- 缩放： scale

translate 语法

x 就是 x 轴上水平移动
y 就是 y 轴上水平移动

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

重点知识点
- 2D 的移动主要是指水平、垂直方向上的移动
- translate 最大的优点就是不影响其他元素的位置
- translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
- 行内标签没有效果
代码演示

div {background-color: lightseagreen;width: 200px;height: 100px;/* 平移 *//* 水平垂直移动 100px *//* transform: translate(100px, 100px); *//* 水平移动 100px *//* transform: translate(100px, 0) *//* 垂直移动 100px *//* transform: translate(0, 100px) *//* 水平移动 100px *//* transform: translateX(100px); *//* 垂直移动 100px */transform: translateY(100px)
}

/* 移动盒子的位置： 定位   盒子的外边距  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;
}

十五、让一个盒子水平垂直居中

看代码

<!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 {position: relative;width: 500px;height: 500px;background-color: pink;/* 1. 我们tranlate里面的参数是可以用 % *//* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 *//* 这里的 50% 就是 50px 因为盒子的宽度是 100px *//* transform: translateX(50%); */}p {position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;background-color: purple;/* margin-top: -100px;margin-left: -100px; *//* translate(-50%, -50%)  盒子往上走自己高度的一半   */transform: translate(-50%, -50%);}span {/* translate 对于行内元素是无效的 */transform: translate(300px, 300px);}</style>
</head><body><div><p></p></div><span>123</span>
</body></html>

十六、`2D 转换 rotate`

rotate 旋转
- 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

rotate 语法

/* 单位是：deg */
transform: rotate(度数)

重点知识点
- rotate 里面跟度数，单位是 deg
- 角度为正时，顺时针，角度为负时，逆时针
- 默认旋转的中心点是元素的中心点
代码演示
```
img:hover {transform: rotate(360deg)
}
```

每日作业 - H5C3第1天

作业说明：

作业题分为两大部分：基础案例和扩展案例。基础案例为涵盖今日所学知识点的案例，所有学员必须全部完成，不能当日完成的利用自习课时间继续完成。扩展案例为在今日所学知识点的基础上，进行扩展训练，学有余力的同学可以尝试完成，不做强制要求。
每个作业题包含训练描述、训练提示、操作步骤三项。
- 训练描述可理解为作业题干，有清晰的要求描述。如果读完训练描述即知道如何操作，后面两项忽略。
- 训练提示提供实现思路。如果读完训练描述，不能完成操作，继续查看训练提示。
- 操作步骤提供具体详细的实现步骤和代码。如果读完训练提示仍然不会，继续查看操作步骤。

基础案例

01-《美的》导航搜索

训练描述

原版的《美的》官网，搜索栏鼠标经过后出现搜索框，失去焦点还原，并且是以过渡的方式

训练提示

搭建以项目为主的几个文件
书写导航栏页面布局
- logo原图比较大，需要设置父盒子宽度和自身的100%
- 设置导航项
- 右侧基本都是精灵图，所以不需要使用字体图标，注意间距的调整
将搜索框设置成初始位置，然后当鼠标经过的时候，设置宽度和透明度变化

操作步骤

创建index文件，新建css文件夹，创建base.css文件并初始化基本代码，新建images文件夹
创建index.css保存至css文件夹，首页html文件引入css样式

编写结构代码

创建版心盒子，左左右模块，分别代表logo，导航项，右侧信息

<header><div class="logo"></div><div class="topnav"><ul><li><a href="#">首页</a></li><li><a href="#">商家入驻</a></li><li><a href="#">企业采购</a></li><li><a href="#">全屋家电套购</a></li><li><a href="#">会员福利社</a></li><li><a href="#">美的分期</a></li></ul></div><div class="right-info"><ul><li class="searchbox"><input type="text" placeholder="美的热水器"><i class="icon-meidi search"></i></li><li class="mobilebox"><i class="icon-meidi mobile"></i></li><li class="carbox"><i class="icon-meidi car"></i></li><li class="loginbox"><i class="icon-meidi login"></i><span>登录</span></li></ul></div>
</header>

排版logo和导航项的内容

body {height: 2000px;/*这句话可以不要，没有什么太大的帮助*/
}header {min-width: 1200px;height: 44px;background-color: #0092d8;
}header .logo {float: left;width: 120px;height: 44px;background-image: url(../images/index_service_sprite@2x.png);background-repeat: no-repeat;background-size: 200px 80px;background-position: -80px 0;
}header .topnav {float: left;height: 44px;
}header .topnav li {float: left;
}header .topnav li a {display: block;height: 44px;line-height: 44px;color: #a3c3e6;font-size: 12px;padding: 0 30px;
}header .topnav li a:hover {color: #fff;
}

下载相关的图片，排版右侧信息内容

.right-info {float: right;
}.right-info li {float: left;height: 44px;position: relative;
}.right-info li input {width: 100%;height: 100%;text-indent: 2rem;opacity: 0;
}.icon-meidi {display: block;width: 20px;height: 20px;position: absolute;right: 30px;cursor: pointer;background-image: url(../images/index_sprite.png);background-repeat: no-repeat;
}.search {top: 12px;background-position: -96px -215px;
}.searchbox {width: 45px;transition: width .4s ease-in;
}.searchbox:hover {width: 250px;
}.searchbox:hover input {opacity: 1;
}.searchbox:hover i {top: 12px;left: 10px;background-position: -66px -215px;
}.mobilebox {width: 65px;padding-top: 11px;box-sizing: border-box;
}.mobile {background-position: -120px -215px;
}.carbox {padding: 0 20px;padding-top: 11px;box-sizing: border-box;
}.car {position: static;background-position: -146px -215px;cursor: pointer;
}.loginbox {width: 85px;padding-top: 11px;box-sizing: border-box;
}.login {position: static;float: left;width: 20px;height: 20px;cursor: pointer;background-position: -35px -216px;margin-left: 20px;
}.loginbox span {float: left;font-size: 12px;color: #fff;
}.news {font-size: 12px;background: rgb(0, 59, 102);line-height: 16px;color: rgb(255, 255, 255);text-align: center;padding: 4px;
}

排版搜索栏默认的样式，设置当鼠标经过父盒子的样式
打开首页文件，观察效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><header><div class="logo"></div><div class="topnav"><ul><li><a href="#">首页</a></li><li><a href="#">商家入驻</a></li><li><a href="#">企业采购</a></li><li><a href="#">全屋家电套购</a></li><li><a href="#">会员福利社</a></li><li><a href="#">美的分期</a></li></ul></div><div class="right-info"><ul><li class="searchbox"><input type="text" placeholder="美的热水器"><i class="icon-meidi search"></i></li><li class="mobilebox"><i class="icon-meidi mobile"></i></li><li class="carbox"><i class="icon-meidi car"></i></li><li class="loginbox"><i class="icon-meidi login"></i><span>登录</span></li></ul></div></header><div class="news">【通知】1、美的商城为美的集团官方渠道，请勿相信任何刷单信息。2、新疆部分区域无法快递正常发货，恢复时间待定。3、 因美的会员体系改版，10月26-29日期间美的积分将处于冻结状态。届时您将无法获得和消耗积分，感谢理解！</div>
</body>
</html>

* {margin: 0;padding: 0;
}ul, ol {list-style: none;
}input, button {outline: none;border: none;
}a {text-decoration: none;
}.clearfix::before,
.clearfix::after {content: "";height: 0;line-height: 0;display: block;visibility: hidden;
}.clearfix::after {clear: both;
}


body {height: 2000px;
}header {min-width: 1200px;height: 44px;background-color: #0092d8;
}header .logo {float: left;width: 120px;height: 44px;background-image: url(../images/index_service_sprite@2x.png);background-repeat: no-repeat;background-size: 200px 80px;background-position: -80px 0;
}header .topnav {float: left;height: 44px;
}header .topnav li {float: left;
}header .topnav li a {display: block;height: 44px;line-height: 44px;color: #a3c3e6;font-size: 12px;padding: 0 30px;
}header .topnav li a:hover {color: #fff;
}.right-info {float: right;
}.right-info li {float: left;height: 44px;position: relative;
}.right-info li input {width: 100%;height: 100%;text-indent: 2rem;opacity: 0;
}.icon-meidi {display: block;width: 20px;height: 20px;position: absolute;right: 30px;cursor: pointer;background-image: url(../images/index_sprite.png);background-repeat: no-repeat;
}.search {top: 12px;background-position: -96px -215px;
}.searchbox {width: 45px;transition: width .4s ease-in;
}.searchbox:hover {width: 250px;
}.searchbox:hover input {opacity: 1;
}.searchbox:hover i {top: 12px;left: 10px;background-position: -66px -215px;
}.mobilebox {width: 65px;padding-top: 11px;box-sizing: border-box;
}.mobile {background-position: -120px -215px;
}.carbox {padding: 0 20px;padding-top: 11px;box-sizing: border-box;
}.car {position: static;background-position: -146px -215px;cursor: pointer;
}.loginbox {width: 85px;padding-top: 11px;box-sizing: border-box;
}.login {position: static;float: left;width: 20px;height: 20px;cursor: pointer;background-position: -35px -216px;margin-left: 20px;
}.loginbox span {float: left;font-size: 12px;color: #fff;
}.news {font-size: 12px;background: rgb(0, 59, 102);line-height: 16px;color: rgb(255, 255, 255);text-align: center;padding: 4px;
}

02-《小米》产品

训练描述

这个产品模块中，鼠标经过大盒子，底部有信息模块升上来，并且本身上移2像素，并且加上投影

训练提示

先进行基本的布局，排出来具体的大小位置
添加底部信息块，，定位在bottom底部，完成后，将高度设置为0，加上溢出隐藏属性
当鼠标经过盒子，显示盒子，并且加上阴影和位移

操作步骤

1，创建index文件，新建css文件夹并创建base.css文件，初始化css样式

2，新建images文件夹，在首页文件中引入样式

3，创建基本的结构

 <div class="product"><ul><li><div class="pro-img"><a href="#"><img src="images/pms_1524883847.49276938!220x220.jpg" alt=""></a></div><h3><a href="#">小米电视4A 43英寸青春版</a></h3><p class="desc">全高清屏 / 人工智能语音</p><p class="price"><span>1499</span>元<del>1699</del></p><div class="review"><a href="#"><span class="msg">一如既往的好，小米情怀</span><span class="auther"> 来自于 惊喜 的评价 </span></a></div></li></ul></div>

4，排版基本的样式

body {padding: 100px;background-color: #f5f5f5;
}.product li {float: left;width: 234px;height: 246px;padding: 34px 0 20px;z-index: 1;margin-left: 14px;margin-bottom: 14px;background: #fff;-webkit-transition: all .2s linear;transition: all .2s linear;position: relative;
}.pro-img {width: 150px;height: 150px;margin: 0 auto 18px;
}.pro-img a {width: 100%;height: 100%;
}.pro-img img {display: block;width: 100%;height: 100%;
}.product li h3 {margin: 0 10px;font-size: 14px;font-weight: 400;text-align: center;
}.product li h3 a {color: #333;
}.desc {margin: 0 10px 10px;height: 18px;font-size: 12px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #b0b0b0;
}.price {font-size: 14px;margin: 0 10px 10px;text-align: center;color: #ff6700;
}.price del {color: #b0b0b0;
}.review {position: absolute;bottom: 0;left: 0;z-index: 3;width: 234px;height: 0;overflow: hidden;font-size: 12px;background: #ff6700;opacity: 0;-webkit-transition: all .2s linear;transition: all .2s linear;
}.review a {color: #757575;display: block;padding: 8px 30px;outline: 0;
}.review a span {display: block;margin-bottom: 5px;color: #fff;
}

5，设置鼠标经过样式

.product li:hover {-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1);-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0);/*这里的位移可以使用2d的转换方式*/
}.product li:hover .review {opacity: 1;height: 76px;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><div class="product"><ul><li><div class="pro-img"><a href="#"><img src="images/pms_1524883847.49276938!220x220.jpg" alt=""></a></div><h3><a href="#">小米电视4A 43英寸青春版</a></h3><p class="desc">全高清屏 / 人工智能语音</p><p class="price"><span>1499</span>元<del>1699</del></p><div class="review"><a href="#"><span class="msg">一如既往的好，小米情怀</span><span class="auther"> 来自于 惊喜 的评价 </span></a></div></li></ul></div>
</body>
</html>

* {margin: 0;padding: 0;
}ul, ol {list-style: none;
}input, button {outline: none;border: none;
}a {text-decoration: none;
}.clearfix::before,
.clearfix::after {content: "";height: 0;line-height: 0;display: block;visibility: hidden;
}.clearfix::after {clear: both;
}


body {padding: 100px;background-color: #f5f5f5;
}.product li {float: left;width: 234px;height: 246px;padding: 34px 0 20px;z-index: 1;margin-left: 14px;margin-bottom: 14px;background: #fff;-webkit-transition: all .2s linear;transition: all .2s linear;position: relative;
}.pro-img {width: 150px;height: 150px;margin: 0 auto 18px;
}.pro-img a {width: 100%;height: 100%;
}.pro-img img {display: block;width: 100%;height: 100%;
}.product li h3 {margin: 0 10px;font-size: 14px;font-weight: 400;text-align: center;
}.product li h3 a {color: #333;
}.desc {margin: 0 10px 10px;height: 18px;font-size: 12px;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #b0b0b0;
}.price {font-size: 14px;margin: 0 10px 10px;text-align: center;color: #ff6700;
}.price del {color: #b0b0b0;
}.review {position: absolute;bottom: 0;left: 0;z-index: 3;width: 234px;height: 0;overflow: hidden;font-size: 12px;background: #ff6700;opacity: 0;-webkit-transition: all .2s linear;transition: all .2s linear;
}.review a {color: #757575;display: block;padding: 8px 30px;outline: 0;
}.review a span {display: block;margin-bottom: 5px;color: #fff;
}.product li:hover {-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);box-shadow: 0 15px 30px rgba(0,0,0,0.1);-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0);
}.product li:hover .review {opacity: 1;height: 76px;
}

03-《beats耳机》按钮

训练描述

当鼠标经过按钮的时候，有一个灰色的背景或者其他颜色的背景升上来

训练提示

创建index文件，新建css文件创建base.css文件，完成css初始化
在首页文件中引入文件，完成结构布局
完成样式排版，设计鼠标经过样式（预先有一个盒子在底部等待，鼠标经过就升上来）

操作步骤

创建基本结构

  <div class="button"><ul><li><a href="#"><span class="button-inner">探索<span class="a11y"></span></span><span class="mask"></span></a></li></ul></div>

设置基本样式和鼠标经过样式

body {padding: 50px;
}.button ul li {float: left;
}.button li a {display: inline-block;position: relative;line-height: 30px;text-align: center;color: #1e1e1e;/* 文字间距 */letter-spacing: 0.5px;border-radius: 50px;overflow: hidden;z-index: 1;cursor: pointer;vertical-align: middle;box-sizing: border-box;
}
.button-inner {position: relative;z-index: 3;display: block;border-radius: 22px;padding: 5px 37px 0 37px;margin-right: 0px;box-sizing: border-box;
}
.a11y {height: 1px;overflow: hidden;position: absolute !important;width: 1px;display: block;margin: 0;padding: 0;
}
.mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;background-color: #d6d6d6;padding-top: 0px;line-height: 46px;color: #fff;display: block;transition: transform 0.2s ease-in;transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}
.button li a:after, .button li a:after {content: "";display: block;position: absolute;z-index: 1;top: 1px;left: 1px;bottom: 1.1px;right: 1px;box-shadow: inset 0px 0px 0px 2px #d3d2d2;border-radius: 50px;
}
.button li a:hover .mask {transform: none;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><div class="button"><ul><li><a href="#"><span class="button-inner">探索<span class="a11y"></span></span><span class="mask"></span></a></li></ul></div>
</body>
</html>

* {margin: 0;padding: 0;
}ul, ol {list-style: none;
}input, button {outline: none;border: none;
}a {text-decoration: none;
}.clearfix::before,
.clearfix::after {content: "";height: 0;line-height: 0;display: block;visibility: hidden;
}.clearfix::after {clear: both;
}

body {padding: 50px;
}.button ul li {float: left;
}.button li a {display: inline-block;position: relative;line-height: 30px;text-align: center;color: #1e1e1e;/* 文字间距 */letter-spacing: 0.5px;border-radius: 50px;overflow: hidden;z-index: 1;cursor: pointer;vertical-align: middle;box-sizing: border-box;
}.button-inner {position: relative;z-index: 3;display: block;border-radius: 22px;padding: 5px 37px 0 37px;margin-right: 0px;box-sizing: border-box;
}.a11y {height: 1px;overflow: hidden;position: absolute !important;width: 1px;display: block;margin: 0;padding: 0;
}.mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;background-color: #d6d6d6;padding-top: 0px;line-height: 46px;color: #fff;display: block;transition: transform 0.2s ease-in;transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}.button li a:after, .button li a:after {content: "";display: block;position: absolute;z-index: 1;top: 1px;left: 1px;bottom: 1.1px;right: 1px;box-shadow: inset 0px 0px 0px 2px #d3d2d2;border-radius: 50px;
}.button li a:hover .mask {transform: none;
}

扩展案例

04- 整理icomoon图标, 阿里图标，awesome图标

训练描述

1，熟练使用三个平台提供的图标字体
2，熟练使用伪元素

训练提示

先下载，然后通过@font-face声明字体文件
利用单独类名的伪元素引入图标，建立基本类名设置字体名称和文字相关
给当前的元素加入基本类名，和单独的类名

操作步骤

1，在平台中下载文件，得到download.zip，解压文件

2，新建fonts文件夹，创建css引入字体图标，注意路径，注意路径，注意路径

@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot'); /* IE9*/src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

3，建立基本类名声明字体和样式

.myFont{font-family: iconfont;font-size: 16px;
}

3，利用单独的类名设置伪元素，加载图标的编码

.output::before{content: "\e640";
}

太极图案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: skyblue;}div {width: 200px;height: 400px;background-color: #fff;border-left: 200px solid #000;margin: 50px auto;border-radius: 50%;transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;-o-transition: all .6s ease-in-out;}div::before,div::after {content: "";display: block;width: 50px;height: 50px;border-radius: 50%;margin-left: -100px;}div::before {background-color: #fff;border: 75px solid #000;}div::after {background-color: #000;border: 75px solid #fff;}div:hover {transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}</style>
</head>
<body><div></div>
</body>
</html>