HTML5和CSS3的新特性
阿新 • • 發佈：2021-02-17
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>