html5学习笔记--leon
html5学习笔记–leon
####什么是html5
1.H5并不是新的语言，而是html语言的第五次重大修改–版本
2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.
3.改变了用户与文档的交互方式：多媒体：video audio canvas
4.增加了其它的新特性：语义特性，本地存储特性，网页多媒体，以及动画
5.相对于h4:
1.进步：抛弃了一些不合理不常用的标记和属性
2.新增了一些标记和属性–表单
3.从代码角度而言，h5的网页结构代码更简洁。
什么是语义化标签
语义化标签：很直观的清楚这个标签的作用
- header: 页眉 头部
- nav：导航
- main：主体内容
- article：文章
- aside：侧边栏
- footer：页脚，底部
语义标签兼容处理
ie9 及以下: 变成行内元素，手动变成块元素
ie8以下：根本不识别html5,手动创建html5标签或者引入html5shiv.min.js
表单新增的type属性
- email：对邮箱可以进行验证
- tel：不会进行验证，会在手机端会切换成数字键盘
- url：会对输入的网址进行验证
- number：可以进行数字的输入，不是数字类型
- search：会携带清除的 “X” 号；
- range：范围限制的拉动杆
- color: 颜色的选择 可以出现选择颜色的选项
- time: 时分的选择
- date：年月日的选择
- datetime-local：年月日时分的完整时间选择
- month：月份的选择
- week: 最终显示的格式为周
表单新增的属性
-
placeholder：默认占位符，当输入文本的时候，会自动将默认的占位清除 比用value 属性好 这个不用在输入 文本时先删除默认的提示信息
-
autofocus：自动获取焦点
-
autocomplete：会有提示之前填过的内容，on:打开 off: 关闭 前提条件：1.必须提交过，必须要有name属性
-
required：为必填项，输入框不能为空，如果为空，会有提示
-
pattern：正则表达式验证
-
multiple：如果input类型为file，提交多个文件，如果类型email，可以输入多个邮箱
-
form：值form表单的id名，这样的话就会将当前输入框和id对应的表单进行关联，提交的时候会一起提交 这个可以写在form表单标签之外 当需要的时候用它的id名追加；
用户名：<input type="text" name="userName" placeholder="请输入用户名" autocomplete="on"> <br>手机号：<input type="tel" name="userPhone" autofocus required pattern="^(\+86)?1\d{10}$"> <br><!--email:有默认验证 在email中，multiple允许输入多个邮箱地址，以逗号分隔--> 文件：<input type="file" name="photo" multiple> <br><form action="" id="myForm"> </form> <!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交--> <!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交--> 地址：<input type="text" name="address" form="myForm">
表单新增事件
-
oninput：只要内容发生变化，即触发事件
/*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/ document.getElementById("userName").oninput=function(){ console.log("oninput:"+this.value); } -
onkeyup：键盘弹起时触发
/*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/ document.getElementById("userName").onkeyup=function(){ console.log("onkeyup:"+this.value); } -
oninvalid：代表当前输入框验证没有通过即可触发
/*oninvalid:当验证不通过时触发*/ document.getElementById("userPhone").oninvalid=function(){ /*设置默认的提示信息*/ console.log(123) this.setCustomValidity('您输入的电话不合法'); }- setCustomValidity：修改默认的提示内容
媒体标签
audio：播放音频文件的
-
src：音频文件的地址
-
controls：控制面板 显示
-
autoplay：自动播放
-
loop：循环播放
<audio src="../mp3/aa.mp3" autoplay loop controls ></audio>
video
-
src：视频的文件地址
-
controls：控制面板
-
autoplay：自动播放
-
muted：静音
-
loop：循环播放
-
poster：定义视频封面图，如果不设置，默认视频画面的第一帧 一般用来在视频前面加广告
-
width：视频的width
-
height：视频height
-
设置width不设置height,设置height，不设置width 如果两个都设就会冲突 因为视频是等比例的 都设会变形
-
source标签：可以设置多个资源文件，浏览器在加载的时候，从上到下加载，如果不支持该文件类型，继续加载，一直到找到兼容该浏览器的资源文件
<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls autoplay height="600"></video> <video controls> <!--视频源，可以有多个源--> <source src="../mp3/flv.flv" type="video/flv"> <source src="../mp3/mp4.mp4" type="video/mp4"> </video>
DOM 获取元素
- querySelector：该方法可以传递任何选择器，但是只会查抄到满足条件的第一个
- querySelectorAll：该方法可以传递任何选择器。会查找到满足条件的所有的元素，最终返回的是伪数组，如果想设置样式，遍历该数组，拿到每一个元素，设置样式即可
类名的操作
所有关于类样式操作的都在classList，classList属于dom元素上的
-
add：为当前元素添加类名，如果想添加多个用 ，（逗号）进行分割
-
remove：移除某一个类名
-
toggle：进行类名的切换
-
contains：判断是否包含某一个类名，如果包含，返回true，不包含返回false
<style> .red{ color:red } .green{ color: green; } .blue{ color: blue; } .underline{ text-decoration: underline; } </style> </head> <body> <ul> <li class="red">前端与移动开发</li> <li class="blue">java</li> <li>javascript</li> <li class="red">c++</li> </ul> <input type="button" value="为第一个li元素添加样式" id="add"> <input type="button" value="为第二个li元素移除样式" id="remove"> <input type="button" value="为第三个li元素切换样式" id="toggle"> <input type="button" value="判断第四个li元素是否包含某个样式" id="contain"> <script> window.onload=function(){ /*add:为元素添加指定名称的样式.一次只能添加一个样式*/ document.querySelector("#add").onclick=function(){ /*classList:当前元素的所有样式列表-数组*/ console.dir(document.querySelector("li")) document.querySelector("li").classList.add("red"); document.querySelector("li").classList.add("underline"); //document.querySelector("li").className="red underline" /*获取样式*/ var result=document.querySelector("li").classList.item(0); console.log(document.querySelector("li").classList); } /*remove:为元素移除指定名称的样式(不是移除class属性)，一次也只能移除一个*/ document.querySelector("#remove").onclick=function(){ document.querySelector(".blue").classList.remove("blue"); } /*toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加。如果有则移除*/ document.querySelector("#toggle").onclick=function(){ document.querySelectorAll("li")[2].classList.toggle("green"); } /*contains:判断元素是否包含指定名称的样式，返回true/false*/ document.querySelector("#contain").onclick=function(){ var isContain=document.querySelectorAll("li")[3].classList.contains("red"); console.log(isContain); } } </script>
DOM 自定义属性
-
如何自定义一个属性？
凡是以data-开头的都是一个自定义属性
-
如何获取自定义属性的值？
所有的自定义属性都在dom元素下面的dataset里面以属性的形式进行存储
-
如何修改自定义属性？
给dataset里面对应的属性重新赋值，即修改完成
第二天
写代码：
第一步：我们要做什么事情
第二步：这件事情应该在什么时候去做
获取元素的方式：
document.getElementById(“id名”)；
注意 ：
1.这个是属于document 的，因为在一个页面中通常只有一个id所以 这里用的是document 来获取这个属性 2. 这个括号里面不能加#id名 而是直接加id 名
document.getElementsByTageName(“标签名”)
注意：
这里得到的是一个伪数组
document.getElementsByClassName(“类名 不加点”)
注意：
这里得到的也是一个伪数组
querySelector(“选择器”)
注意:
1.这里默认的是选择符合条件的第一个元素
2.这里的选择器可以使任何选择器 ， ‘.类名’（类选择器） ‘#id名’（id选择器） ‘后代选择器’ ‘子代选择器’
querySelector(“选择器”)
注意：
1. 这里选择的是所有的符合条件的元素 是一个伪数组
2.这里的选择器可以使任何选择器 ， ‘.类名’（类选择器） ‘#id名’（id选择器） ‘后代选择器’ ‘子代选择器’
网络接口
-
ononline：网络连通时触发
-
onoffline：网络断开时触发
//window.addEventListener('online',function(){ // var div = document.querySelector("div"); // div.style.height = 200 + "px"; // div.style.width = 200 + 'px'; // console.log(200) // alert("网接通了") // }) // window.addEventListener("offline",function(){ // var div = document.querySelector("div"); // div.style.height = 300 + "px"; // div.style.width = 300 + 'px'; // console.log(300) // alert("网断了") // }) window.ononline=function(){ alert("来网了") } window.onoffline = function(){ alert("没网了") }
全屏接口（两个方法一个属性）
-
requestFullScreen（）：开启全屏显示 注意： msRequestFullscreen(ie全屏)
-
cancelFullScreen（）：取消全屏，这个方法属于 document
-
fullscreenElement：判断当前状态，是否处于全屏，如果是全屏可以拿到全屏的元素，如果不是返回的就是null 返回的是个布尔值 这个属性也是属于document
-
通过不同的前缀来解决兼容问题
chrome:webkit firefox（火狐）:moz ie:ms opera（欧鹏）
-
* cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现 * fullScreenElement:是否是全屏状态，也只能使用document进行判断 -
需要确定是在页面加载完成后再进行操作
案例演示：
<div>
<img src="images/l1.jpg" alt="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id="isFull" value="是否全屏">
</div>
<script>
//网页加载事件
window.onload = function (){
//获取元素
var div = document.querySelector("div")
var btn =document.getElementById("full");
var btn1 = document.querySelector("#cancelFull")
console.log(btn)
// 点击全屏时需要先判断当前浏览器兼容那个
btn.onclick= function(){
// document.querySelector("#full").οnclick=function(){
if(div.requestFullScreen){
div.requestFullscreen();
}
else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}
else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
else if (div.msRequestFullScreen){
div.msRequestFullscreen();
}
}
// 点击取消全屏时需要先判断当前浏览器兼容那个
//注意： 这里整个文档才是它的对象
btn1.onclick = function (){
if(document.cancelFullScreen){
document.cancelFullScreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msCancelFullscreen){
document.msCancelFullscreen();
}
}
// 判断是否全屏
document.querySelector("#isFull").onclick = function(){
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
alret('true')
} else {
alert('flase')
}
}
FileReader上传图片的使用
FileReader是一个构造函数
所以就可以new FileReader 可以得到一个实例对象
readAsText：读取txt文件
readAsBinaryString：读取任意类型文件
readAsDataURL：这个方法url资源读取到的文件会获取到data开头的一段字符串
result：会将读取成功之后的内容存到result上 他是一个 属性
onload：读取成功
1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
* 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
* 3.readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
* abort():中断读取*/
逻辑分析：
-
我们什么时候要读取图片？
当我们选择图片上传之后要读取，所以注册onchange事件 可以注册在行内
-
既然要读图片，就应该要拿到要读取的图片，拿到之后进行读取 文件存储在 file表单元素的 files属性中，它是一个数组*/
var fileImg = document.querySelector(“input”).files[0]
-
在onchange事件函数内部读取图片，但是什么方法可以读取图片？
readAsDataURL()这个方法用来读取图片
-
既然这个方法可以读取图片，怎么拿到这个方法?
new FileReader() 得到实例对象，通过实例对象可以调用readAsDataURL(fileImg )
-
最终读取成功之后的结果存到了实例对象的result上，那么我们什么时候可以拿到result，也就是读取成功之后
所以在onload（代表图片读取成功）方法里，拿到result的结果
-
最终将读取的结果 设置到页面上img的的src
<style> div{ height: 20px; width: 0%; background-color:red; } </style> </head> <body> <!--展示图片：--> <!--src:指定路径(资源定位--url):src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源--> <!--<img src="../images/l1.jpg" alt="">--> <!--需求：即时预览： 即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange 预览：通过文件读取对象的readAsDataURL()完成--> <form action=""> 文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br> <div></div> <input type="submit"> </form> <img src="" alt=""> <script> var div=document.querySelector("div"); function getFileContent(){ /*1.创建文件读取对象*/ var reader=new FileReader(); /*2.读取文件，获取DataURL * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中 * 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型) * 2.3:文件存储在file表单元素的files属性中，它是一个数组*/ var file=document.querySelector("#myFile").files; console.log(file) reader.readAsDataURL(file[0]); /*获取数据*/ /*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态 * onabort:读取文件中断片时触发 * onerror:读取错误时触发 * onload:文件读取成功完成时触发 * onloadend:读取完成时触发，无论成功还是失败 * onloadstart:开始读取时触发 * onprogress:读取文件过程中持续触发*/ reader.onload=function(){ console.log(reader.result); /*展示*/ document.querySelector("img").src=reader.result; } } </script>
百度地图使用
- 找到你想要的效果，复制代码
- 申请秘钥，并且使用秘钥
- 开发文档》工具支持》坐标拾取器
- 利用百度工具生成地图名片
sessionStorage和localStorage的使用
sessionStorage作用：将数据保存到本地，存储的容量5mb左右
sessionStorage.setItem():像本地存储数据，第一个参数：key（name），第二个参数：value（值）
sessionStorage.getItem():获取本地sessionStorage的数据，参数为key
sessionStorage.removeItem()：移除本地sessionStorage的某一个数据，参数为key
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容
sessionStorage的特性：
- 关闭浏览器，数据就会自动清除
- 数据不可以多页面共享 这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据
localStorage.setItem,localStorage.getItem,localStorage.removeItem用法和sessionStorage一模一样
- 存储的内容大概20mb
- 但是在同一个浏览器的不同窗口中可以共享数据
- 永久存储，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除 只有卸载浏览器或者手动清除浏览器缓存才能清除
在开发中，使用localStorage更多一些
播放器案例
多媒体：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
- 常用方法： play() 播放、 pause() 暂停 、paused
Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素
- 常用属性：
a) currentTime 视频播放的当前时间、
b) duration:视频的总时间 100000/60
c) paused:视频播放的状态.
- 常用事件：
a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
b) ontimeupdate: 视频时间发生变化就会触发
c) onended:播放完时触发—重置
准备工作：因为我们要大量操作video，我们可以在全局声明一个变量，来存储video元素
var video = $('video')[0]
-
播放和暂停功能
-
给暂停播放按钮注册点击事件
-
在事件函数内部写逻辑：判断，如果当前状态为暂停，那么就播放，如果当前状态为播放，那么就暂停
-
video.paused 判断当前状态是否为暂停 是暂停 true 播放状态 false
if(video.paused){ video.play(); /*移除暂停样式，添加播放样式*/ } else{ video.pause(); /*移除播放样式，添加暂停样式*/ } -
toggleClass(“fa-play fa-pause”)；进行类名的切换
-
-
全屏功能
-
利用$拿到全屏按钮，给注册点击事件
-
在事件函数内部：video.requestFullScreen该方法可以让视频全屏，有兼容性，加前缀
if(video.requestFullScreen){ video.requestFullScreen(); } else if(video.webkitRequestFullScreen){ video.webkitRequestFullScreen(); } else if(video.mozRequestFullScreen){ video.mozRequestFullScreen(); } else if(video.msRequestFullscreen){ video.msRequestFullscreen(); }
-
-
视频显示和总时长处理
视频什么时候可以显示？
video.oncanplay = function(){ // 视频显示 video.style.display="block"; }怎么拿到视频的总时长？
var total = video.duration // 3680-
问题：首先秒数，并且还有小数
-
格式化时分秒
var hour = Math.floor(total/3600); hour = hour<10? '0'+hour:hour var minute = Math.floor(total%3600/60) minute=minute<10?"0"+minute:minute; var second=Math.floor(total%60); second=second<10?"0"+second:second; var str = hour+':'+minute+':'+'second' $('.totalTime').html(str)
-
-
播放时，时间跟随变化，进度条跟随变化
-
视频播放的时候设置 时间跟随变化
ontimeupdate：时间发生变化会触发
在ontimeupdate事件函数中拿到当前的时间currentTime ，将当前时间格式化成时分秒
video.ontimeupdate = function(){ var current = video.currentTime var result = time(current) // 00:00:01 $('.currentTime').html(result) }封装格式化时分秒的函数
function time(total){ var hour = Math.floor(total/3600); hour = hour<10? '0'+hour:hour var minute = Math.floor(total%3600/60) minute=minute<10?"0"+minute:minute; var second=Math.floor(total%60); second=second<10?"0"+second:second; return hour+':'+minute+':'+second } -
让进度条跟随变化，其实就是视频播放的时候设置进度条的当前进度，实际进度条的进度=视频的当前播放进度
求：视频的当前播放进度 = 当前视频播放的时间/视频总时间
var percent = video.currentTime/video.duration
将进度转化为百分比 percent = percent *100+‘%’
最终将得到的百分比设置给进度条的宽度
$(".elapse").css("width",percent);
-
-
实现视频的跳播和播放之后的设置
第三天
01-认识css3
-
什么是css3？
CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得 Web开发变得更为高效和便捷
-
css3现状
- 浏览器支持程度差，需要添加私有前缀
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
-
如何对待css3兼容问题？
- 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
- 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
- 考虑用户群体：例如医院、银行等政府网站基本不需要c3
- 听产品经理的
- 听boss的
02-属性选择器
-
li[style]：li标签中有style属性既满足条件
-
li[class=red]：li标签中class属性的值必须是red 必须一模一样 不是包含有
-
li[class*=red]：li标签中只要包含red kreds 也算是包含red
-
li[class^=blue]：li标签中以blue开头的
-
li[class$=blue]：li标签中以blue结尾的
<style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred; } .blueviolet{ color:blueviolet; } /*属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素*/ /*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/ li[style]{ text-decoration: underline; } /*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签 =是严格匹配*/ li[class=red]{ /*font-size: 30px;*/ } /*3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签*/ li[class*=red]{ /*font-size: 30px;*/ } /*4.E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签*/ li[class^=blue]{ font-size: 30px; } /*5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签*/ li[class$=blue]{ /*font-size: 30px;*/ } </style> </head> <body> <p style="">看看能不能也添加样式</p> <ol> <li class="red" style="font-size: 12px;" data-name="hello" id="hello">我是华夏子孙，死伤人数超过100</li> <li class="blue">禽流感次发生蔓延，我是华夏子孙</li> <li class="darkred" style="">南方农作物减产绝收面积上亩</li> <li class="blue">我是华夏子孙</li> <li class="red">我是华夏子孙</li> <li class="blueviolet">我是华夏子孙</li> </ol> </body>
03-兄弟选择器
/兄弟伪类：
+：获取当前元素的相邻的满足条件的元素
~：获取当前元素的满足条件的兄弟元素/
-
.first + li：.first下面相邻的li元素，如果不是li元素就不起作用
1.必须是下面相邻
2.必须是指定类型的元素*/ -
.first ~ li：.first下面所有的li元素会起作用
必须是指定类型的元素*/ 不管是否相邻
04-伪类选择器
- li:first-child：li的父元素的第一个子元素，如果第一个子元素的类型为li起作用，如果不是li，不起作用
- li:last-child：li的父元素的最后一个子元素，如果最后一个子元素的类型为li起作用，如果不是li，不起作用
- li:first-of-type：li的父元素的第一个子元素，如果第一个子元素不是li，自动跳过，继续查找，一直查找到第一个li元素
- li:last-of-type：li的父元素的最后一个子元素，如果最后一个子元素不是li，自动跳过，继续查找，一直查找到最后一个li元素
- li:nth-child(5)：查找到索引为5的（索引从1开始），如果类型不是li，索引也会计算（也就是说 索引如果为5的那个不是li元素就不会生效）
- li:nth-child(even)：查找到索引为偶数的，如果类型不是li，索引也会计算
- li:nth-child(odd)：查找到索引为奇数的，如果类型不是li，索引也会计算
- li:nth-of-type(even)：产找到索引为偶数的，如果类型不是li，索引不会计算
- li:nth-of-type(odd)：产找到索引为奇数的，如果类型不是li，索引不会计算
- li:nth-of-type(n):n取值0~子元素的长度，表达式最后的结果如果小于=0 无效的
- li:empty：代表li的父元素的子元素下面没有任何内容的元素，连空格都没有
05-伪元素
普通的所有标签都会有before、after，但 input、img标签是没有的（单标签没有）
- ::before：默认在普通标签的左面
- ::after：默认在普通标签的右面
- content：放置内容的，并且必须是有的，否则后期不可见 哪怕为 “” 也必须写这个属性
- 默认是行内元素，想设置宽高，转化为块元素，display:block;float、position
06-其他伪元素
-
::first-letter：设置首字母
/*获取第一个字符：实现首字下沉*/ p::first-letter { color: red; font-size: 30px; float: left; /*文本环绕*/ } -
::first-line：设置文本第一行的样式
/*获取第一行内容:如果设置了::first-letter,那么无法同时设置首字母的样式*/ p::first-line { text-decoration: underline; } -
::selection：设置当前选中的内容的样式
/*设置当前选中内容的样式*/ p::selection { background-color: pink; color: red; /*它只能设置显示的样式，而不能设置内容大小*/ /*font-size: 30px;*/ }06-颜色的使用
/hsl(颜色(0360)，饱和度(0%100%)，明度(0%~100%))/
/明度默认是50%,一般建议保留50的值/
/background-color: hsl(300,100%,50%);//h5中的颜色设置/
/rgba(红色，绿色，蓝色，透明度)
透明度：0代表完全透明 1代表完成不透明 不会影响子元素/
/background-color: rgba(255,0,255,0.2);/background-color: hsla(300,100%,50%,0.2); } 注意： /通过opacity设置透明度:如果设置父容器，那么父容器中的所有子元素也会透明/ 会遗传
07-文本阴影的使用
添加阴影 text-shadow:offsetX offsetY blur color
-
text-shadow:2px 1px 1px red;
-
第一个值：设置文本阴影横向的偏移
-
第二个值：设置文本阴影纵向的偏移
-
第三个值：设置文本阴影虚化程度
-
第四个值：设置文本阴影的颜色
-
文本阴影是可以设置多层的，用逗号隔开即可
<style> *{ padding: 0; margin: 0; } .demo{ width: 600px; padding: 30px; background-color: #666; margin:20px auto; text-align: center; font:bold 80px/100% "微软雅黑"; color: #fff; } /*添加阴影 text-shadow:offsetX offsetY blur color*/ .demo1{ text-shadow: -2px -2px 5px red; } .demo2{ text-shadow: 0px 0px 30px #fff; } /*多层阴影效果*/ .demo3{ text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff; } .demo4{ color: black; text-shadow: 0px 1px 0px #fff; } /*浮雕立体效果*/ .demo5{ color: #fff; text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc; } .demo6{ color: transparent; text-shadow: 0px 0px 8px hsla(30,100%,30%,1); } </style> </head> <body> <div class="demo demo1">我是华夏子孙</div> <div class="demo demo2">我是华夏子孙</div> <div class="demo demo3">我是华夏子孙我是华夏子孙我是华夏子孙我是华夏子孙我是华夏子孙</div> <div class="demo demo4">我是华夏子孙我是华夏子孙我是华夏子孙我是华夏子孙</div> <div class="demo demo5">我是华夏子孙我是华夏子孙我是华夏子孙</div> <div class="demo demo6">我是华夏子孙我是华夏子孙</div> <div class="demo demo7">我是华夏子孙</div> </body>
08-盒模型
我们在给元素设置宽和高的时候，默认，宽高是内容的宽高
-
box-sizing：border-box
宽高是设置盒子的实际的宽高，不会被padding、border给撑开，并且内容，会变小，因为padding和border向里撑开
-
box-sizing：content-box
设置内容的宽高，会被padding、border给撑开，content-box也是默认状态
/*设置盒模型*/ /*content-box:你设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度*/ /*border-box:你设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容。如果添加了padding和border,那么真正放置内容的区域会减小--但是它可以稳固页面的结构*/
09-边框圆角
-
border-radius：10px;这样是设置四个角都有效果
-
border-radius：10px 20px;
第一个值：左上、右下
第二个值：右上、左下
-
border-radius：10px 20px 30px;
第一个值：左上
第二个值：右上、左下
第三个值：右下
-
border-radius：10px 20px 30px;
第一个值：左上
第二个值：右上
第三个值：右下
第四个值：左下
-
圆：设置圆角的宽高的一般
-
半圆：高度设置一半，圆角设置，左上和右上即可
/*添加边框圆角*/ /*1.设置一个值：四个角的圆角值都一样*/ /*border-radius: 10px;*/ /*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/ /*border-radius: 10px 30px;*/ /*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/ /*border-radius: 10px 40px 60px;*/ /*4.设置四个值：左上 右上 右下 左下*/
11-盒子阴影
-
box-shadow:6px 4px 12px #000；
-
第一个值：设置盒子阴影横向偏移
-
第二个值：设置盒子阴影纵向偏移
-
第三个值：设置盒子阴影的虚化程度
-
第四个值：设置盒子阴影的颜色
-
第五个值：设置盒子的内阴影
-
同样也是可以设置多层阴影，还是用逗号隔开
12-边框阴影
机器人案例
-
头
脑袋和眼睛
脑袋：一个半圆，高度设置为宽度的一般，圆角给左上和右上设置
眼睛：给脑袋这个元素设置伪元素，左眼睛：before,右眼睛：after
-
身体
胳膊和身体
身体：长方形，左下和右下设置圆角
胳膊：左胳膊：before，右胳膊：after
-
腿部
准备一个元素，设置伪元素即可
左腿：before，右腿：after
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #ccc;
}
.content{
width: 500px;
height: 500px;
border: 1px solid red;
margin:50px auto;
}
.an_header{
/*这里是半圆 所以高度是宽度的一半*/
width: 250px;
height: 125px;
background-color: darkgreen;
margin: 10px auto;
/*添加圆角 设置左上和右上即可 不用管下面*/
border-radius: 125px 125px 0 0;
position: relative;
}
/*使用伪元素添加眼睛*/
.an_header::before,
.an_header::after{
/*1.一定设置content属性*/
content: "";
/*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素 float display position*/
position: absolute;
bottom: 40px;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
}
.an_header::before{
left: 70px;
}
.an_header::after{
right: 70px;
}
.an_body{
width: 250px;
height: 250px;
background-color: darkgreen;
border-radius: 0px 0px 20px 20px;
margin:0 auto;
position: relative;
}
.an_body::before,
.an_body::after{
content: "";
position: absolute;
top: 20px;
background-color: darkgreen;
width: 30px;
height: 180px;
border-radius: 10px;
}
.an_body::before{
left:-40px;
}
.an_body::after{
right:-40px;
}
.an_footer{
width: 250px;
height: 100px;
position: relative;
margin:0 auto;
}
.an_footer::before,
.an_footer::after{
content: "";
position: absolute;
top: 00px;
background-color: darkgreen;
width: 30px;
height: 90px;
border-radius: 0px 0px 10px 10px;
}
.an_footer::before{
left: 50px;
}
.an_footer::after{
right: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="an_header"></div>
<div class="an_body"></div>
<div class="an_footer"></div>
</div>
</body>
第四天
01-线性渐变
background:linear-gradient(to top left,red 0%,red 30%,blue 50%,blue 100%);
linear-gradient参数
-
第一个参数：渐变的方向或者角度
-
第二个参数
-
第三个参数
-
第四个参数
-
…
-
渐变的颜色值和渐变的百分比
/*添加渐变：渐变不是一个单一钩，它产生的是图像，所以需要使用background*/ /*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/ /*方向： to top:0deg to right:90deg to bottom:180deg --默认值 to left:270deg*/ /*background: linear-gradient(to right,red,blue)*/; background: linear-gradient(to top,red 0%,red 30%,blue 50%,blue 100%);
02-径向渐变
background: radial-gradient(shape size at position,color,color);
-
position 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center 可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
-
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
circle:产生正方形的渐变色
-
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
-
color ：指定颜色
不懂
div{
width: 300px;
height: 200px;
background: radial-gradient(red,red 50%,blue 50%,blue);
}
03-背景样式（上）
如果图片大于容器，那么默认就从容器左上角开始放置
如果图片小于容器，那么图片默认会平铺*/
-
background-repeat
- round：能够将平铺的背景图完整的显示在容器内部，所以也就会将背景图进行缩放
- space：能够将平铺的背景图完整的显示在容器内部，但是会产生相同的间距
-
background-attachment
-
fixed
相对于整个文档来说，背景图是固定的
相对于容器来说，背景图也是固定的
-
scroll
相对于整个文档来说，是随着滚动条变化的
相对于容器来说，是固定的
-
local
相对于整个文档来说，是随着滚动条变化的
相对于容器，是随着滚动条变化的
-
04-background-size
-
background-size
- 300px：设置的宽度300，高度auto
-
300px 500px：第一个参数是设置宽度，第二个设置高度
-
50% 50%：参照与当前容器的宽和高
-
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。（使背景图片缩放至容器刚好填满）–主要针对于容器，让容器刚好填满
-
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（使其背景图片刚好的放在容器内部））--主要针对于背景图片，让背景图片刚好放在容器内部
/*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内 1.图片大于容器：有可能造成容器的空白区域,将图片缩小 2.图片小于容器：有可能造成容器的空白区域，将图片放大*/ /*cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出 1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见 2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/一半美工妹妹会给张大图一用来自适应不同分辨率的电脑 所以
<style> *{ padding: 0; margin: 0; } div{ width: 100%; height: 360px; background: url("../images/slide_01_2000x410.jpg"); /*设置背景图片的大小*/ background-size: cover; /*设置position*/ background-position: center; } </style>
05-背景的填充和裁剪
背景图的默认原点，如果有padding，原点就基于padding的，如果没有padding，默认原点基于内容的
- background-origin
- border-box：设置背景图的原点以边框的左上角为原点 会与border重叠
- padding-box：设置背景图的原点以内间距的左上角为原点 会与padding重叠
- content-box：设置背景图的原点以内容的左上角为原点
- background-clip
- border-box：以边框进行裁剪，边框以外的被裁减掉 其实是显示border及以内的内容
- padding-box：以内间距进行裁剪，内间距以外的被裁减掉 :其实是显示padding及以内的内容
- content-box：以内容进行裁剪，内容以外的被裁减掉 其实是显示content及以内的内容*/
06-过渡
/添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态/
-
transition-property:添加过渡效果的样式属性名称
-
transition-duration：过渡效果的耗时 以秒做为单位
-
transition-timing-function：设置时间函数–控制运动的速度 linear 匀速，ease-in-out,由慢到快(默认)
-
transition-delay：设置动画的延迟效果 以秒做为单位
-
transition：left 2s linear 0s； 可以不按照顺序
- 第一个参数设置样式属性名称
- 第二个参数过渡效果的耗时
- 第三个参数控制运动的速度
- 第四个参数设置动画的延迟
-
如果想设置多个过度，可以利用逗号隔开即可
-
transition: all 2s ease-in-out 0s; 代表设置所有的属性都会有过渡效果
-
/*为所有样式添加过渡效果 all:所有样式 1.所有样式的过渡效果一样 2.效率低下，它会去查询所有添加的样式 3.建议：以后不要这么写 4.steps(4):可以让过渡效果分为指定的几次来完成*/
4.steps(4):可以让过渡效果分为指定的几次来完成
07-二维变换
-
移动：transform中translate的设置 translate能够让当前的元素进行移动，
1.移动的距离是当前本身位置的左上角进行移动
- 执行完毕之后会恢复到原始状态
- transform: translate(100px); 如果只写了一个参数，代表设置的x位移
- transform: translate(400px,500px); 如果写了两个参数，第一个代表x轴的位移，第二个代表y轴的位移
- transform:translateX(300px); 只针对x轴的位移
- transform:translateY(300px);只针对y轴的位移
-
缩放：transform中scale的设置 如果值为1，就是默认状态，大于1放大，小于缩小
- transform:scale(2);如果只有一个参数，代表设置x,y进行缩放
- transform: scale(2,1); 如果设置两个参数，第一个代表x缩放，第二个参数代表y轴的缩放
- transform:scaleX(2); 代表设置x轴的缩放
- transform:scaleY(2);代表设置Y轴的缩放
-
旋转 transform中 rotate的设置
- transform:rotate(90deg); 默认是沿着Z轴旋转
- transform:rotateX(90deg); 沿着X轴进行旋转（单双杠）
- transform:rotateY(90deg); 沿着Y轴进行旋转（双手握着 钢管 围着钢管转 ）
-
斜切：transform中skew的设置(作为了解)
- transform:skew(60deg);代表x轴倾斜60deg
- transform:skewX(60deg);代表x轴倾斜60deg
- transform:skewY(60deg);代表Y轴倾斜60deg
-
原点设置： transform中origin的设置
08-同时添加多个transform属性
transform:translateX(700px) rotate(-90deg);
*注意点：如果是写多个属性的话，**把旋转的放在最后，**因为旋转属性会将坐标系进行旋转
盾牌案例步骤
- 先将图片结构书写好，只要给父盒子设置一个宽度即可
- 利用transform将图片的位置和角度进行打乱
- 鼠标经过的时候讲transform属性清空transform：none
- 给图片加过度效果
09-实现任意元素居中
实现任意元素的居中
定位设置left：50%；top：50%； transform:translate(-50%,-50%);定位的百分比：相对于父容器，translate的百分比相对于本身
10-3d
p:active{
transform: translate3d(0px,0px,-100px);
}
转换
1.转换的简介
1.什么是转换（什么是变形）
改变元素在网页中的形状，尺寸，位置和角度的一种方式。
元素能够实现2D转换或者3D转换
能够对元素实现旋转 缩放 位移以及倾斜的效果
2D使元素 在 X轴和Y轴上发生变化
3D Z轴上发生变化
2.转换属性
1.属性：transform
2.取值：
1.none 默认值 无转换效果
2.transform-function
一个或多个转换函数，中间用空格隔开
3.转换原点
指的是转换操作所围绕的中心点
1.属性：
transform-origin
默认情况下，转换原点在元素的中心位置
2.取值：
1.value1 value2
2.value1 value2 value3
3.取值的单位
1.百分比：
以元素左上角为0% 0%开始
2.数值：
以元素左上角为0px 0px开始
3.关键字
top right bottom left center
2.2D转换
1.2D位移
1.2D位移
1.作用
改变元素在页面中的位置
2.属性和函数（值）
属性：transform
函数：
translate（x）：横向移动
translate（x，y）：既横向移动，又纵向移动
translateX（x）：单项位移函数
translateY（y）：单项位移函数
取值：
1.数字
2.百分比
3.负值
2.2D缩放
1.作用
改变元素的大小
可以让元素实现x轴缩放（改变宽度）
以及y轴的缩放（高度）
2.属性和函数（值）
属性：transform
函数：scale（value）
scale（x，y）
scaleX（x）
scaleY（y）
注意：一个参数的时候，第二个参数与第一个参数默认值相等
x：
y：
取值：
默认值1
缩放：0-1之间的小数
放大：大于1的值
3.2D旋转
1.作用：
使元素围绕原点使角度发生变化
进而改变显示的角度
2.属性和函数
属性：transform
函数：rotate（ndeg）；
注意：
deg是单位 不能省略
n 旋转的角度
+：顺时针旋转
-：逆时针旋转
4.2D倾斜
1.作用：让元素向X轴或者Y轴产生一定的倾斜角度
2.属性和函数
属性：transform
函数：skew（ndeg）
skew（xdeg，ydeg）
skewX（xdeg）
skewY（ydeg）
元素向x轴方向倾斜，实际上是改变y轴的倾斜角度
3.3D转换
1.什么是3D
在2D的基础上，增加了对Z轴（空间轴）上的转换变化
2.空间距离
1.属性
perspective
-webkit-perspective：500px
2.作用
定义：人眼到3D投射平面的距离
3.定义位置
该属性要定义在实现3D转换元素的父元素上
3.3D转换的效果
1.3D旋转
1.属性和函数、
属性：transform
函数：1.rotateX（xdeg）
2.rotateY（ydeg）
3.rotateZ（zdeg）
4.rotate3D（x，y，z，ndeg）
x，y，z的取值如果为0，则该轴不参与旋转
2.3D位移
元素在2D位移的基础上，又增加了元素在Z轴上的位移距离
1.属性和函数
属性：transform
函数：translateX();
translateY();
translateZ();
translate(x，y，z);
4.属性：transform-style
作用：如何在3D空间中呈现被嵌套的元素，子元素如何去摆放
取值：
1.flat
2.preserve
第五天
动画的添加
- 如何创建动画？
@keyframes 动画的名字 {
/*百分比是指整个动画耗时的百分比 10s*/
/*0%{
transform: translate(0,0);
}*/
/*from:0%*/
from{
transform: translate(0,0) rotate(45deg);
}
/*0~1*/
50%{
transform: translate(0,500px);
}
/*1~2*/
/*100%{
transform: translate(500px,600px);
}*/
/*to:100%*/
to{
transform: translate(500px,600px);
}
花括号内部利用百分比的形式设置动画的状态
动画的百分比是针对于动画的总耗时的
-
如何使用动画？
-
animation-name：值为动画的名字
-
animation-duration：设置动画的总耗时
-
animation-iteration-count：设置动画的播放次数，可以是一个具体数值，或者也可以设置infinite无限次播放 如果设置了 动画为交替动画 则回去也算执行了一次动画
-
animation-direction：alternate，设置动画为交替动画
-
animation-delay：设置动画的延迟时间
-
animation-fill-mode：设置动画的起始或者结束状态 默认情况下，动画执行完毕之后，会回到原始状态
- forwards：会保留结束状态 在有延迟的情况下，并不会立刻进行到动画的初始状态
- backwards：时刻准备着开始的状态 在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
- both：相当于同时设置forwards、backwards 会保留结束状态 在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
-
animation-timing-function：设置动画运动的速度 linear ease-in-out,由慢到快(默认)
-
animation-play-state：设置动画是播放还是暂停
-
running：播放
-
paused：暂停
<div></div> <input type="button" value="播放" id="play"> <input type="button" value="暂停" id="pause"> <script> var div=document.querySelector("div"); document.querySelector("#play").onclick=function(){ div.style.animationPlayState="running"; } document.querySelector("#pause").onclick=function(){ div.style.animationPlayState="paused"; } </script>
-
-
-
动画的缩写： animation: moveTest 2s linear 0s infinite alternate both;
-
第一个参数：动画的名字
-
第二个参数：动画的耗时
-
第三个参数：动画的速度函数
-
第四个参数：延迟时间
-
第五个参数：播放次数
-
第六个参数：交替动画
-
第七个参数：设置动画的起始的状态
使用动画实现无缝滚动 案例
<style> *{ padding: 0; margin: 0; } div{ width: 882px; height: 86px; margin:100px auto; background-color: #ddd; overflow: hidden; } div >ul{ width: 200%; list-style: none; /*1.设置的名称*/ animation-name: move; /*2.设置动画的耗时*/ animation-duration: 7s; /*3.市场无限循环*/ animation-iteration-count: infinite; /*4.设置时间函数*/ animation-timing-function: linear; } div > ul > li{ width:126px; float: left; } div > ul > li > img{ width:100%; } /*鼠标上移，停止动画*/ div:hover > ul{ cursor: pointer; animation-play-state: paused; } /*创建动画*/ @keyframes move { from{ transform:translateX(0); } to{ transform:translateX(-882px); } } </style> </head> <body> <div> <ul> <li><img src="../images/1.jpg" alt=""></li> <li><img src="../images/2.jpg" alt=""></li> <li><img src="../images/3.jpg" alt=""></li> <li><img src="../images/4.jpg" alt=""></li> <li><img src="../images/5.jpg" alt=""></li> <li><img src="../images/6.jpg" alt=""></li> <li><img src="../images/7.jpg" alt=""></li> // 妙点 就在这里 复制两份图片实现无缝滚动 <li><img src="../images/1.jpg" alt=""></li> <li><img src="../images/2.jpg" alt=""></li> <li><img src="../images/3.jpg" alt=""></li> <li><img src="../images/4.jpg" alt=""></li> <li><img src="../images/5.jpg" alt=""></li> <li><img src="../images/6.jpg" alt=""></li> <li><img src="../images/7.jpg" alt=""></li> </ul> </div> </body>web字体
-
字体图标的使用
- @font-face：可以声明一个自定义的字体名字
- 字体图标的使用方式根据文档的提示步骤一步一步去写即可
- 图片以图标的形式呈现以及控制，可以利用font-size控制大小，并且不会失真，通过color控制颜色
多列布局
-
column-count：设置当前的内容以几列的形式展现 具体数值
/*1.设置列数*/ column-count: 3; /*2.添加列间隙样式,与边框样式的添加一样*/ column-rule: dashed 3px red; /*3。设置列间隙大小*/ column-gap: 50px; /*4.设置列宽 原则：取大优先 1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度--填充满整个屏幕 2.如果人为设置宽度更小，使用默认计算的宽度*/ column-width: 200px; } h4{ /*设置跨列显示 1 / all*/ column-span: all; } -
column-rule：设置列与列之间的边框的样式
-
column-gap：设置列与列之间的间距
-
column-width：设置列宽
-
column-span：设置跨列显示，但是只有1和all
c3知识点
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。 </p> <p>1、 CSS3圆角表格 CSS3圆角表格 圆角表格，对应属性：border-radius。 2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。 3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。 4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。 边框 border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果 </p> <p> 变形(transform)、转换(transition)和动画(animation) transform: rotate | scale | skew | translate |matrix; 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值 在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes: Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。[2]
伸缩布局
flex布局 = 伸缩布局
伸缩布局就是flex布局，能够更轻松有效的操作、调整容器的布局方式
设置伸缩布局需要先将父元素开启伸缩布局，display:flex，子元素变成块元素，并且会有浮动的效果 会取消子盒子的浮动和定位
开启伸缩布局后的效果，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，并且默认不换行，如果子元素的宽度超过了父元素的宽度，自动缩放
-
横轴：设置子元素水平排列的方式
-
纵轴：设置子元素垂直排列的方式
-
默认主轴：横轴
-
justify-content 设置子元素主轴的排列方式
- flex-start：设置所有的子元素从开始的位置进行排列
- flex-end：设置所有的子元素总从结束的位置开始排列
- center：设置所有的子元素居中显示
- space-between：两边贴边对齐，中间的平均分配
- space-around：两边不在贴边，所有的子元素都是平均分配
-
flex-wrap
- wrap：换行
- nowrap：不换行显示（默认） 收缩大小
- wrap-reverse：换行并且翻转
-
flex-direction
- row：设置主轴为横轴，水平排列（默认）
- row-reverse：设置主轴为横轴，并且翻转显示
- column：主轴是纵轴
- column-reverse：主轴是纵轴，并且翻转
-
flex-flow：同时设置换行和主轴的设置
-
flex-grow属性用于设置或检索弹性盒子的扩展比率（如果子盒子没有占满父盒子，设置子盒子占据剩余空间的比例） 本身的宽度+剩余的空间占据的比例值 默认是0:说明子元素并不会去占据剩余的空间*/
-
flex-shrink属性用于设置或检索弹性盒子的缩放比率 默认值为1*/
- flex-shrinkwidth/所有的flex-shrinkwidth并且累加*超出的部分
-
flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间（如何设置子元素的占据的宽度）
-
flex是设置父元素剩余空间占据的比例 （主要用这个 重点）
-
align-items 设置所有子元素在侧轴（默认纵轴）方向的排列方式（单行用）
- center：在侧轴居中
- flex-start：在侧轴的起始位置
- flex-end：在侧轴的结束位置
- stretch：子元素在侧轴方向上进行拉伸，填充满整个侧轴方向>> 默认值，不能设置height
- baseline：设置文本基线对齐
-
align-content（多行）
- space-between
- space-around
-
align-self 属性同上 设置当前的子元素 /设置单个元素在侧轴方向上的对齐方式/
利用flex实现任意元素居中显示
设置主轴居中和侧轴居中
justify-content: center;
align-items: center;
伸缩菜单栏案例
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin:100px auto;
}
div > ul{
list-style: none;
width: 100%;
/*将父容器设置了伸缩盒子，子元素默认成为伸缩项 float margin*/
display: flex;
}
div > ul > li{
/*宽度
1.我们并不知道li的具体的数量
2.也不直接设置%*/
height: 36px;
line-height: 36px;
text-align: center;
background-color: #9fff9d;
border-right: 1px solid #ccc;
flex: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>商品分类</li>
<li>我的订单</li>
<li>最新商品</li>
<li>联系我们</li>
</ul>
</div>
宽高自适应案例
<style>
*{
padding: 0;
margin: 0;
}
.layout{
width: 500px;
height: 600px;
background-color: #CCCCCC;
margin:10px auto;
/*设置父容器为伸缩盒子*/
display: flex;
/*默认的主轴是row,这里需要以列的方式进行排列*/
flex-direction: column;
}
header{
width: 100%;
height: 60px;
background-color: red;
}
main{
width: 100%;
background-color: green;
/*让当前伸缩项占据父容器的剩余空间*/
flex: 1;
/*让main成为伸缩盒子*/
display: flex;
}
main > article{
height: 100%;
flex: 1;
background-color: pink;
}
main > aside{
height: 100%;
flex: 3;
background-color: darkblue;
}
footer{
width: 100%;
height: 80px;
background-color: purple;
}
</style>
</head>
<body>
<div class="layout">
<header></header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
</div>
</body>
fa使用步骤
-
下载文件
-
将css、fonts引入到自己的项目里面
-
将css通过link的形式引入进来
-
复制对应的字体图标的代码标签
-
将css\