H5 C3新特性
1.HTML5新特性
-
新增语义化标签
- < header >:头部标签
- < nav >:导航标签
- < article >:内容标签
- < section >:定义文档某个区域
- < aside >:侧边栏标签
- < footer >:尾部标签
注意
- ie9,需要把这些元素转换为块级元素
-
新增多媒体标签
-
音频:< audio >
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" poster="img/QQ截图20210204193046.png"></audio>
-
视频:< video >
<video src="img/section2-1.mp4" autoplay="autoplay" controls="controls" loop="loop" poster="img/QQ截图20210204193046.png"></video>
autoplay:自动播放
controls:显示插件
loop:循环播放
poster:预先加载显示
-
-
新增input类型 type=" "
- url
- date
- time
- month
- week
- number
- tel
- search 搜索框
- color
-
新增表单属性
- required=“required” 非空
- placeholder=“xinyue” 提示信息
- autofocus=“autofocus” 自动聚焦
- autocomplete=“off” 阻止记录信息
- multipe=“multipe” 提交多个文件
2.CSS3新特性
-
新增选择器
-
属性选择器 权重为10
-
利用属性选择器就可以不用借助于类或者id选择器
- 语法:input[ ]
<style> input[value] { color: blue; } </style> </head> <body> <form> <input type="text"> <input type="text" value="12344"> </form> </body>
-
属性选择器还可以选择属性=值的某些元素
<style> input[type=password] { color: rgb(255, 0, 34); } </style> </head> <body> <form> <input type="text"> <input type="password" value="12344"> </form> </body>
- 属性选择器可以选择属性值开头的某些元素
<style> div[class^=icon] { color: blue; } </style> </head> <body> <div class="icon1">夏普图标</div> <div class="icon2">夏普图标</div> <div class="icon3">夏普图标</div> <div class="icon4">夏普图标</div> </body>
-
属性上选择器可以选择属性值结尾的某些元素
<style> div[class$=icon] { color: blue; } </style> </head> <body> <div class="1icon">下坡替补</div> <div class="2icon">下坡替补</div> <div class="3icon">下坡替补</div> <div class="4icon">下坡替补</div> </body>
-
属性上选择器可以选择属性值含有某些元素
<style> div[class*=i] { color: blue; } </style> </head> <body> <div class="1icon">替补</div> <div class="2icon">下坡替补</div> <div class="3icon">下坡替补</div> <div class="4icon">下坡替补</div> </body>
-
-
结构伪类选择器 权重为10
<style> ul li:first-child { color: red; } ul li:nth-child(5) {/*nth-child():()里可以是关键字 公式 数字*/ color: red; } ul li:last-child { color: red; } </style> </head> <body> <ul> <li>第1个孩子</li> <li>第2个孩子</li> <li>第3个孩子</li> <li>第4个孩子</li> <li>第5个孩子</li> <li>第6个孩子</li> <li>第7个孩子</li> <li>第8个孩子</li> </ul> </body>
-
隔行变色(关键字)
ul li:nth-child(even) //选中偶数
ul li:nth-child(odd) //选中奇数
-
公式
ul li:nth-child(n)
2n:偶数
2n+1:奇数
5n:5的倍数
n+5:从5开始
-n+5:前5个
-
nth-child(),first-child, last-child与nth-of-type(),nth-of-type,nth-of-type区别
前者会把所有子元素编号
后者会把指定元素作为子元素编号
-
-
伪元素选择器
::before
::after
<style> div { width: 150px; height: 50px; background-color: blue; text-align: center; color: white; } div::before { content: 'xin'; } div::after { content: 'yue'; } </style> </head> <body> <div> 时 </div> </body>
遮罩层
清除浮动
-
-
新增盒子模型
box-sizing:content-box 盒子所占位置大小为width+padding+border(默认的)
box-sizing:border-box 盒子所占位置大小为width,padding和border就不会撑大盒子了
<style> .box { width: 150px; height: 150px; background-color: violet; border: 5px solid seagreen; padding: 50px; } .box1 { width: 150px; height: 150px; background-color: violet; border: 5px solid seagreen; padding: 50px; box-sizing: border-box; } </style> </head> <body> <div class="box"> 我是默认 </div> <div class="box1"> 我是加了border-box </div> </body>
-新增其他特性
- 图片模糊 滤镜 filter:blur(5px) 数值越大越模糊
- width:calc(100% +30px)可以加减乘除
- 2D、3D(单独写)
- CSS3过渡
transition:要过渡的属性 花费时间 运动曲线 何时开始
- 属性:宽高背景颜色 内外边距都可
- 花费时间:单位是秒
- 运动曲线:默认ease
- 何时开始:单位是秒
<style>
.box1 {
width: 150px;
height: 150px;
background-color: violet;
border: 5px solid seagreen;
padding: 50px;
box-sizing: border-box;
transition: all 0.5s;
/* transition: height .5s, width .5s; */
}
.box1:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
我是加了border-box
</div>
</body>
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 250px;
height: 390px;
border: 1px solid palevioletred;
margin: 0 auto;
box-sizing: border-box;
padding: 18px;
}
.box img {
width: 100%;
height: 250px;
}
.box p {
color: rgb(161, 159, 159);
font-size: 13px;
}
.box .price {
color: red;
font-size: 20px;
}
.box .oldprice {
color: rgb(161, 159, 159);
text-decoration: line-through;
}
.box .jidutiao {
font-size: 12px;
height: 10px;
color: rgb(161, 159, 159);
margin-top: 10px;
text-align: center;
line-height: 10px;
}
.box .jidutiao label {
color: rgb(146, 145, 145);
float: left;
}
.box .jidutiao .right {
float: right;
}
.box .jidutiao .jdt {
width: 50%;
height: 10px;
border: 1px solid red;
float: left;
border-radius: 5px;
margin-left: 3px;
}
.box .jidutiao label span {
color: red;
}
.box .jidutiao .jdt .jidu {
background-color: red;
width: 70%;
height: 100%;
transition: width .7s;
}
.box .jidutiao .jdt .jidu:hover {
width: 100%;
}
.box button {
width: 95%;
height: 30px;
position: absolute;
bottom: 0;
left: 6px;
border: 1px solid red;
background-color: rgb(160, 7, 7);
border-bottom: 0;
color: white;
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg">
<p>Apple苹果iphone 6s plus(A1699) 32G 金色 移动联通电信4G手机</p>
<span class="price">¥6088</span>
<span class="oldprice">¥6988</span>
<div class="jidutiao">
<label>已售<span>87%</span></label>
<div class="jdt">
<div class="jidu"></div>
</div>
<label class="right">剩余<span>29</span>件</label>
</div>
<button>立即抢购</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 50px;
height: 50px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.box div {
width: 102px;
height: 52px;
position: absolute;
transform: translateX(0);
/* 移回也需要0.4s时间过渡 */
transition: transform 0.4s;
color: white;
}
.box label {
float: left;
width: 50px;
height: 50px;
background-color: orange;
text-align: center;
line-height: 50px;
}
.box:hover div {
transform: translateX(-50px);
/* 0.4s完成transform移动效果*/
transition: transform 0.4s;
}
</style>
</head>
<body>
<div class="box">
<div>
<label>好</label>
<label>看</label>
</div>
</div>
</body>
</html>