音频视频
html5新增的标签：
< header>头部标签
< nav>导航标签
< article>内容标签
< section>定义文档某个区域
< aside>侧边栏标签
< footer>尾部标签
多媒体标签：
1：音频：< audio>
<video src="文件地址" ></video>
viceo常见属性
src属性：添加播放文件
autoplay属性：video标签默认不会播放，需要添加一个autoplay才可以自动播放
controls属性：显示控制条
poster属性：播放前的占位图片
loop属性：循环播放，一般广告视频使用
preload属性：预加载视频，于autoplay相冲
muted属性：静音
width/height：同img
2:视频： < video>
<audio src="文件地址"></audio>
1.src：用于指明video标签需要播放的音频的地址
2.autoplay：用于指明video标签是否需要自动播放音频
3.controls：用于指明video标签是否显示控制台
4.loop：用于设置video标签音频播放完毕之后是否循环播放
5.preload：预加载音频
6.muted：让音频静音
input新增
3：input新增表单
html5新增表单属性
<li>邮箱: <input type="email" required="required"></li>
css新增选择器
1：属性选择器：
<style>
/* 必需是input，但是同时具有value这个属性 */
input[value] {
color: pink;
}
/* 只选择type=text的文本框选取出来 */
input[type=text] {
color: aqua;
}
/* 选择首先是div然后具有class属性，并且属性值必须是icon开头的元素 */
div[class^=icon] {
color: red;
}
section[class$=date] {
color: azure;
}
</style>
</head>
<body>
<!-- 利用属性选择器可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 属性选择器还可以选择属性=值的某些元素 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="icon4">4</div>
<!-- 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-date"></section>
<section class="icon2-date"></section>
<section class="icon3-ico"></section>
</body>
2：结构伪类选择器：
/* 这个代表从0开始每次加一往后面计算 这里必须是n */
ul li:nth-child(n)
{
color: #000;
}
nth-child（n）{
}
这里n可以等于2n，2n+1，5n，n+5....这里n都是从n开始的；
4:（E:first-child）
5:（E:flast-child）
6:（E:nth-of-type(n)）
其123于456有什么区别呢：
/* nth-child会把所有的盒子都排列序号，执行时候首先看nth-child（1） */
/* 之后会去看前面一个div，如果匹配不上这个nth-child就没有作用 */
section div:nth-child(1)
{
color: aqua;
}
/* 这里nth-of-child会把指定盒子排列序号然后再从指定盒子里面选指定的 */
section div:nth-of-type(1)
{
color: black;
}
3：伪元素选择器：
div:before{}:黑盒子
div:after{}:黄盒子
css3盒子模型
boder-box: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这样子padding和margin就不会乘大盒子了
* {
/* 去除盒子默认的内边距和外边距 */
margin: 0;
padding: 0;
/* 让所有盒子都遵从border-box属性 */
box-sizing: border-box;
}
filter图片模糊
<style>
img {
width: 100px;
height: 100px;
filter: blur(10px);
/* 数值越大越模糊 */
}
</style>
</head>
<body>
<img src="bitbug_favicon.ico" alt="">
</body>
css3过渡
从一个状态渐渐过渡到另外一个状态
经常搭配hover使用。
谁做过渡给谁加
要多个属性发生变化，属性写all就可以了
transition: 要过渡属性 花费时间 运动曲线 何时开始;
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: width 0.5s ，height 0.6s;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
css3 2D转换
transform可以实现元素的位移旋转缩放
图为x轴，y轴。
1：2D转换之translate，可以改变元素在页面中的位置，
语法
div{
/* x就是x轴上移动位置，y就是y轴上移动位置，之间用逗号隔开 */
transform: translate(x,y);或者分开写
/* 如果我们只移动x坐标 */
transform: translateX(n);
/* 如果我们只移动y轴 */
transform: translateY(n);
/* 单位都是px */
}
移动盒子的位置方法：定位 盒子的外边距 2d转换
translate最大优点就是不会影响其他元素位置。
对行内标签没有影响。translate中百分比单位是相对于自己元素宽高对比的translate（50%，50%）
让一个盒子水平垂直居中：
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background-color: black;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
/* 盒子往上走自身高度50%，往左走自身高度百分之50% */
background-color: black;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
2D转换之旋转rotate
让元素在2维平面内顺时针或者逆时针旋转。
语法:
transform:rotate(度数)
rotate里面跟度数，单位是deg比如rotate（45deg）
角度为正时，顺时针，负时为逆时针
默认旋转的中心点是元素的中心点
<style>
img {
width: 150px;
height: 100px;
border-radius: 50%;
border: 5px solid pink;
/* 加过渡 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="bitbug_favicon.ico" alt="">
</body>
设置转换中心点
默认中心点是元素中心点。
transform-origin
我们设置元素中心点
transform-origin:x y;
后面参数x y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center）
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.4s;
transform-origin: left bottom;
/* 默认是50% 50% 等价于 center center */
/* 也可以是px像素 */
transform-origin: 100px 200px;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
2D转换之缩放scale：
给元素加上这个属性就可以控制它放大还是缩小。
transform：scale（x,y);
x y用逗号隔开
transform：scale（1，1）：宽和高都放大一倍，相对于没有放大
transform：scale（2，2）：宽和高都放大2倍
transform：scale（2）：宽高都放大两倍
transform：scale（0.5，0.5）缩小
优势：可以设置转换中心缩放，默认以中心点缩放，而且不影响其他盒子
2D转换综合写法：
transform:translate() rotate() scale()…
其顺序会影响转换效果。
当我们有位移和其他属性时候，记得吧位移放在最前面。
css3动画
1：先定义动画
2：在使用（调用）动画
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
定义动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
@keyframes 动画名称
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@keyframes 动画名称
{
from {background: red;}
to {background: yellow;}
}
调用动画
1：当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
div
{
animation: myfirst 5s;
动画名称 动画时长
}
在这里插入代码片div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
animation-timing-function属性
step属性是指从一个状态到另外一个状态分成多少步。这个用的比较多
css3 3D
3D位移：translate3D
translform：translateX（100px):仅仅在x轴上移动
translform：translateY（100px):仅仅在y轴上移动
translform：translateZ（100px):仅仅在z轴上移动
translform：translate3D（x,y,z):在x,y,z轴上移动距离
3D转换 -透视perspective
如果网页想要有3D效果就要加透视。
透视：人的眼睛到屏幕的距离。所以视透越小，看到物体越大，透视越大，看到物体越小。
z轴越大（+）看到物体越大
透视写在被观察元素的父盒子上面。
translatez：加了透视才可以看到更好的效果。
3D转换-rotate3D：加透视才有3D效果
rotateX：沿x轴向上翻转为正方向。左手定理
transform：rotateX（45deg）；
rotateyY：沿y轴向内左翻转为正左手定理
transform：rotateY（45deg）；
沿z轴
transform：rotateZ（45deg）；
复合写法
transform：rotate3D（1，0，0，45deg）；x轴旋转45deg
transform：rotate3D（1，1，0，45deg）；沿对角线旋转45deg
3D呈现transform-style：
控制子元素是否开启三维立体环境
transform-style：flat 默认子元素不开启3D效果
transform-style：preserve 子元素开启3D效果
代码写在父盒子，影响是对子盒子，
移动端
流式布局：
视口：布局视口，视觉视口，理想视口。
布局视口：pc端的网页大多都可以在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口：他是用户正在看到的网站的区域，意思是手机视觉多大就只能看到网页多大区域。
理想视口：布局视口和我们理想视口一致，意思就是我们设备多宽，我们布局的页面就有多宽，可以看到网页全部。
2.5：理想视口 meta视口标签：
标准的viewport设置：
视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许缩放比例1.0
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”, maximum-scale=“1.0”, minimum-scale=“1.0”,user-scalable=“no”>
二倍图：
物理像素 物理像素比
物理像素点是指屏幕显示的最小颗粒，是物理真实存在的。
pc端里1px等于1个物理像素，但是移动端就不是。（移动端里面不是1：1可能图片在移动端就会变大变模糊）
一个px可以显示的物理像素个数，称为物理像素比。
二倍图：解决在移动端页面中图片显示被放大变模糊情况，
<style>
/* 我们需要一个50*50像素的图片 直接放在我们手机页面就会可能放大2倍，就会变模糊 */
/* 我们采取就是放一个100*100的图片，然后手动把图片缩小为50*50 */
/* 我们准备的图片比我们实际需要的大小大2倍，这种方式就是2倍图 */
img:nth-child(2){
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- 模糊的 -->
<img src="bitbug_favicon.ico50" alt="">
<!-- 我们采取二倍图 -->
<img src="bitbug_favicon.ico100" alt="">
</body>
背景缩放：background-size
其是规定背景图的尺寸。
background-size：背景图片宽度 背景图片高度；
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(bitbug_favicon.ico) no-repeat;
/* background-size: 图片宽度 图片高度; */
/* 图片进行拉伸 */
background-size: 500px 200px;
/* 只写一个参数 肯定是宽度 高度省略了 会等比例缩放 */
/* 里面可以跟百分比是相对于父盒子来说 */
/* background-size: cover; */
/* cover要完全覆盖div盒子可能有部分背景图片显示不全 */
/* background-size: contain; */
/* contain将图片扩展到最大尺寸，使其宽度高度等比例拉伸使高度或者宽度完全适应盒子就不再进行拉伸，可能有部分空白区域 */
}
背景图片缩放：
<style>
/* 我们需要一个50*50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍 100*100*/
/* 我们需要把这个图片缩放一半，也就是50*50 */
div{
width: 50px;
height: 50px;
border: 1px solid red;
background: url(bitbug_favicon.ico100*100)no-repeat;
background-size: 50px 50px;
/* 背景图片缩放到50*50就不会模糊 */
}
</style>
移动端开发选择：
1：单独制作移动端页面：通过页面不同判断打开的是哪个页面（pc/移动端
2：响应式页面兼容移动端：通过判断屏幕来改变样式：制作麻烦
移动端技术解决方案：
css3盒子模型 box-sizing
<style>
a {
-webkit-tap-highlight-color: transparent;
/* 去除a标签默认的外观样式 */
}
input {
-webkit-appearance: none;
/* 去除button按钮默认的外观样式 */
}
</style>
</head>
<body>
<a href=""></a>
<input type="button" value="按钮">
</body>
移动端常见布局：
1：单独制作移动端页面：流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局
2：响应式页面兼容移动端：媒体查询，bootstarp
流式布局：通过盒子的宽度设置百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
设置max-width 最大宽度
设置min-width 最小宽度
<style>
section {
width: 100%;
/* 设置伸缩最大宽度 */
min-width: 980px;
/* 设置伸缩最小宽度 */
min-width: 320px;
}
section div {
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: rgb(20, 120, 10);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
