前端速成（13）css
阿新 • • 發佈：2021-10-07
注：以前全是用div實現，而且表單的資料型別輸入也應該有限制
section代替div
<!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>HTML5新增視訊標籤</title> <style> video { width: 100%; } </style> </head> <body> <video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video> </body> </html>
<!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>
</head>
<body>
<!-- 我們驗證的時候必須新增form表單域 -->
<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>
</html>
<!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>CSS3新增屬性選擇器</title> <style> /* 必須是input 但是同時具有 value這個屬性 選擇這個元素 [] */ /* input[value] { color:pink; } */ /* 只選擇 type =text 文字框的input 選取出來 */ input[type=text] { color: pink; } /* 選擇首先是div 然後 具有class屬性 並且屬性值 必須是 icon開頭的這些元素 權重為1+10=11*/ div[class^=icon] { color: red; } section[class$=data] { color: blue; } div.icon1 { /* 若是icon1 則權重只有1 */ color: skyblue; } /* 類選擇器和屬性選擇器 偽類選擇器 權重都是 10 */ </style> </head> <body> <!-- 1. 利用屬性選擇器就可以不用藉助於類或者id選擇器 --> <!-- <input type="text" value="請輸入使用者名稱"> <input type="text"> --> <!-- 2. 屬性選擇器還可以選擇屬性=值的某些元素 重點務必掌握的 --> <input type="text" name="" id=""> <input type="password" name="" id=""> <!-- 3. 屬性選擇器可以選擇屬性值開頭的某些元素 --> <div class="icon1">小圖示1</div> <div class="icon2">小圖示2</div> <div class="icon3">小圖示3</div> <div class="icon4">小圖示4</div> <div>我是打醬油的</div> <!-- 4. 屬性選擇器可以選擇屬性值結尾的某些元素 --> <section class="icon1-data">我是安其拉</section> <section class="icon2-data">我是哥斯拉</section> <section class="icon3-ico">哪我是誰</section> </body> </html>
<!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>CSS3新增結構偽類選擇器</title> <style> /* 1. 選擇ul裡面的第一個孩子 小li */ ul li:first-child { background-color: pink; } /* 2. 選擇ul裡面的最後一個孩子 小li */ ul li:last-child { background-color: pink; } /* 3. 選擇ul裡面的第2個孩子 小li */ ul li:nth-child(2) { background-color: skyblue; } ul li:nth-child(6) { background-color: skyblue; } </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> </html>
<!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>CSS3新增結構偽類選擇器-nth-child</title> <style> /* 1.把所有的偶數 even的孩子選出來 */ ul li:nth-child(even) { background-color: #ccc; } /* 2.把所有的奇數 odd的孩子選出來 */ ul li:nth-child(odd) { background-color: gray; } /* 3.nth-child(n) 從0開始 每次加1 往後面計算 這裡面必須是n 不能是其他的字母 選擇了所有的孩子*/ /* ol li:nth-child(n) { background-color: pink; } */ /* 4.nth-child(2n)母選擇了所有的偶數孩子 等價於 even*/ /* ol li:nth-child(2n) { background-color: pink; } ol li:nth-child(2n+1) { background-color: skyblue; } */ /* ol li:nth-child(n+3) { background-color: pink; } */ ol li:nth-child(-n+3) { background-color: pink; } </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> <ol> <li>我是第1個孩子</li> <li>我是第2個孩子</li> <li>我是第3個孩子</li> <li>我是第4個孩子</li> <li>我是第5個孩子</li> <li>我是第6個孩子</li> <li>我是第7個孩子</li> <li>我是第8個孩子</li> </ol> </body> </html>
<!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>CSS3新增選擇器nth-type-of</title> <style> ul li:first-of-type { background-color: pink; } ul li:last-of-type { background-color: pink; } ul li:nth-of-type(even) { background-color: skyblue; } /* nth-child 會把所有的盒子都排列序號 */ /* 執行的時候首先看 :nth-child(1) 之後回去看 前面 div 不匹配所以忽略 */ section div:nth-child(1) { background-color: red; } /* nth-of-type 會把指定元素的盒子排列序號 */ /* 執行的時候首先看 div指定的元素 之後回去看 :nth-of-type(1) 第幾個孩子 */ section div:nth-of-type(1) { background-color: blue; } </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> <!-- 區別 --> <section> <p>光頭強</p> <div>熊大</div> <div>熊二</div> </section> </body> </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>偽元素選擇器before和after</title> <style> div { width: 200px; height: 200px; background-color: pink; } /* div::before 權重是2 */ div::before { /* 這個content是必須要寫的 */ /* display: inline-block; */ content: '我'; /* width: 30px; height: 40px; background-color: purple; */ } div::after { content: '小豬佩奇'; } </style> </head> <body> <div> 是 </div> </body></html>
<!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>偽元素選擇器使用場景-字型圖示</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?1lv3na'); src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } div { position: relative; width: 200px; height: 35px; border: 1px solid red; } div::after { position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* content: ''; */ content: '\e91e'; color: red; font-size: 18px; } </style> </head> <body> <div></div> </body> </html>
<!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>偽元素選擇器使用場景2-仿土豆網顯示隱藏遮罩案例</title> <style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .tudou::before { content: ''; /* 隱藏遮罩層 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; } /* 當我們滑鼠經過了 土豆這個盒子，就讓裡面before遮罩層顯示出來 */ .tudou:hover::before { /* 而是顯示元素 */ display: block; } </style> </head> <body> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> <div class="tudou"> <img src="images/tudou.jpg" alt=""> </div> </body> </html>
。
<!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>圖片模糊處理filter</title> <style> img { /* blur是一個函式 小括號裡面數值越大，圖片越模糊 注意數值要加px單位 */ filter: blur(15px); } img:hover { filter: blur(0); } </style> </head> <body> <img src="images/pink.jpg" alt=""> </body> </html>
<!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>CSS3屬性calc函式</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我們的子盒子寬度永遠比父盒子小30畫素 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<!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>CSS3 過渡效果</title> <style> div { width: 200px; height: 100px; background-color: pink; /* transition: 變化的屬性 花費時間 運動曲線 何時開始; */ /* transition: width .5s ease 0s, height .5s ease 1s; */ /* 如果想要寫多個屬性，利用逗號進行分割 */ /* transition: width .5s, height .5s; */ /* 如果想要多個屬性都變化，屬性寫all就可以了 */ /* transition: height .5s ease 1s; */ /* 誰做過渡，給誰加 */ transition: all 0.5s; } div:hover { width: 400px; height: 200px; background-color: skyblue; } </style> </head> <body> <div></div> </body> </html>
<!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>CSS3過渡練習-進度條</title> <style> .bar { width: 150px; height: 15px; border: 1px solid red; border-radius: 7px; padding: 1px; } .bar_in { width: 50%; height: 100%; background-color: red; /* 誰做過渡給誰加 */ transition: all .7s; } .bar:hover .bar_in { width: 100%; } </style> </head> <body> <div class="bar"> <div class="bar_in"></div> </div> </body> </html>