文章目录
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>
【04】HTML5+CSS3：01-HTML5新增标签 多媒体标签 input标签 新增表单属性 CSS3属性选择器 伪元素选择器 2D转换
