Python全棧之學習CSS(2)
1. css背景圖
1.1 背景屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 背景屬性</title> <style> .c1 { /* 具體寫法 */ width:600px; height:600px; border:solid 1px red; background-color: yellow; /* 控制背景圖 */ background-image:url("./images/xiao.jpg"); /* 控制是否平鋪 repeat-x repeat-y no-repeat repeat(默認)*/ background-repeat:no-repeat; /* 控制背景圖像的位置 ; 參數1 控制左右 參數 控制上下 */ /* background-position: 50% 50%; */ /* 固定背景圖使用 fixed 瞭解 */ background-attachment: fixed; } .c2 { /* 簡寫 */ width:600px; height:600px; margin:10px 20px; border:solid 1px red; /* 圖片 是否平鋪 [圖片位置] */ background: url("./images/xiao.jpg") no-repeat 50% 50%; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
1.2 背景圖片引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景圖片的引入</title> <style> /* 鼠標滑過,點亮圖片 */ div.c1 {width:60px;height:60px;border:solid 1px gray;background: url("./images/tag.jpg") no-repeat;} div.c1:hover { background: url("./images/tag.jpg") no-repeat; background-position: -312px -3.5px; } .gg { width:400px; height:400px; border:solid 1px red; } /* 一張圖片的導入 */ div.c2 { background: url("./images/xiao.jpg") no-repeat; /* 參數1:寬 參數2:高 50px 50px / 100% 100% */ /* 控制背景圖像的尺寸大小 background-size: 100% 100% ; */ background-size: 100% auto; } /* 多張圖片導入 */ div.c3 { background: url("./images/game/map_19.gif") no-repeat 30px 80px, url("./images/game/map_20.gif") no-repeat 50px 50px, url("./images/game/map_18.gif") no-repeat 100px 50px, url("./images/game/map_14.gif") no-repeat 180px 100px, url("./images/game/map_03.gif"); } </style> </head> <body> <div class="c1"></div> <div class="c2 gg"></div> <div class="c3 gg"></div> </body> </html>
2. 相對_絕對_固定
2.1 相對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位:相對定位 relative</title> <style> .gg { width:200px; height:200px; border:solid 1px red; } .c1 {background:violet;} .c2 { background:tan; position:relative; top:10px; left:100px; z-index:2; } .c3 {background:blue;} .c4 {background:green;} </style> </head> <body> <!-- 相對定位: 參考點是他自己本身,相對於原始的位置進行定位; 如果添加瞭定位:無論是添加(相對,絕對,固定)屬性,添加之後會增加額外的其他屬性: z-index 控制層疊關系: 值越大越在上層,值越小越在下層 left top right bottom z-index --> <div class="c1 gg"></div> <div class="c2 gg"></div> <div class="c3 gg"></div> <div class="c4 gg"></div> </body> </html>
2.2 絕對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位:絕對定位 absolute</title> <style> .gg {width:200px;height:200px;border:solid 1px red;} .big { width:1000px; height:1000px; border:solid 1px red; margin:100px 220px; } .c1 { background:violet; /* 無效 */ position: relative; } .c2 { background:tan; position: absolute; top:0px; left:0px; /* bottom:0px; right:0px; */ /* z-index:-1; */ } .c3 {background:blue;} .c4 {background:green;} </style> </head> <body> <!-- 絕對定位:參考點默認參考的是body 效果:脫離文檔流,後面的內容自動補位 使用:絕對定位會參照父級的相對定位進行移動,如果父級中沒有relative,相對於body進行定位; (1)把想要的父級元素變成relative (2)把要定位的元素變成 absolute --> <div class="big"> <div class="c1 gg"></div> <div class="c2 gg"></div> <div class="c3 gg"></div> <div class="c4 gg"></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"> <title>定位:絕對定位 absolute</title> <style> .gg {width:200px;height:200px;border:solid 1px red;} .big { width:1000px; height:1000px; border:solid 1px red; margin:100px 220px; } .c1 { background:violet; /* 無效 */ position: relative; } .c2 { background:tan; position: absolute; top:0px; left:0px; /* bottom:0px; right:0px; */ /* z-index:-1; */ } .c3 {background:blue;} .c4 {background:green;} </style> </head> <body> <!-- 絕對定位:參考點默認參考的是body 效果:脫離文檔流,後面的內容自動補位 使用:絕對定位會參照父級的相對定位進行移動,如果父級中沒有relative,相對於body進行定位; (1)把想要的父級元素變成relative (2)把要定位的元素變成 absolute --> <div class="big"> <div class="c1 gg"></div> <div class="c2 gg"></div> <div class="c3 gg"></div> <div class="c4 gg"></div> </div> </body> </html>
2.3 固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位:固定定位 fixed</title> <style> /* *號代表通配選擇符,代表所有標簽,默認標簽中含有默認的間距,要在一開始的時候全部去掉; */ * {margin:0px;padding:0px;} body {height:2000px;} .c1 { width:500px; height: 600px; border:solid 1px red; background-color: green; position: fixed; left:50%; margin-left:-250px; top:50%; margin-top:-300px; } /* <' transition-property '>: 檢索或設置對象中的參與過渡的屬性 <' transition-duration '>: 檢索或設置對象過渡的持續時間 <' transition-timing-function '>: 檢索或設置對象中過渡的動畫類型 <' transition-delay '>: 檢索或設置對象延遲過渡的時間 */ img { position:fixed; bottom:20px; left:-100px; transition: all 1s ease 0.1s; } img:hover { left:0px; background-color: red; } </style> </head> <body> <img src="images/xiao.jpg"/> <div class="c1">我沒動</div> <p>1111222333444</p> </body> </html>
3. float浮動
3.1 display轉換元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>display 轉換元素</title> <style> div /* display:inline; 轉換成行內元素 */ {display:inline;border:solid 1px red;width:1000px;height:20px;} span /* display:block; 轉換成塊狀元素 */ {display:block;width:100px;height:50px;border:solid 1px red;} a /* display:inline-block; 轉換成行內塊狀元素 */ {display:inline-block;width:500px;height:30px;border:solid 1px red;} p /* display:none 隱藏元素 */ {display:none;} </style> </head> <body> <!-- 元素的分類: 塊狀元素 : block 行內元素 : inline 行內塊狀元素 : inline-block --> <div>第一個div</div> <div>第二個div</div> <span>我是span1</span> <span>我是span2</span> <a href="#">我是鏈接1</a> <a href="#">我是鏈接2</a> <p>12345</p> </body> </html>
3.2 float浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float 浮動</title> <style> .content {width:700px;clear:both;} .content .c1 {background: red;width:100px;height:100px;float:left;} .content .c2 {background: tan;width:100px;height:100px;float:left;} .content .c3 {background:blue;width:100px;height:100px;float:left;} .content .c4 {background:green;width:100px;height:100px;float:left;} .content2 {width:700px;height:500px;border:solid 1px red;clear:both;} #a1 {float:left;width:100px;height:100px;border:solid 1px red;} #a2 {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;} </style> </head> <body> <!-- # ###塊狀元素浮動: float:left 向左浮動 ,元素脫離原始文檔流,後面的內容自動補齊; float:right 向右浮動 ,元素脫離原始文檔流,後面的內容自動補齊; 目的: 讓塊狀元素在一排顯示 clear:both; 清除兩邊的浮動 --> <div class="content"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div> <!-- # ###行內元素浮動: 如果對行內元素進行浮動: 默認會把行內元素升級成行內塊狀元素,可以設置寬和高 消除浮動產生的影響:clear:both; --> <div class="content2"> <a href="#" id="a1">點擊我跳轉1</a> <a href="#" id="a2">點擊我跳轉2</a> </div> </body> </html>
4. html裡面的bug
4.1 float內容塌陷問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float 浮動</title> <style> .content {width:700px;clear:both;} .content .c1 {background: red;width:100px;height:100px;float:left;} .content .c2 {background: tan;width:100px;height:100px;float:left;} .content .c3 {background:blue;width:100px;height:100px;float:left;} .content .c4 {background:green;width:100px;height:100px;float:left;} .content2 {width:700px;height:500px;border:solid 1px red;clear:both;} #a1 {float:left;width:100px;height:100px;border:solid 1px red;} #a2 {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;} </style> </head> <body> <!-- # ###塊狀元素浮動: float:left 向左浮動 ,元素脫離原始文檔流,後面的內容自動補齊; float:right 向右浮動 ,元素脫離原始文檔流,後面的內容自動補齊; 目的: 讓塊狀元素在一排顯示 clear:both; 清除兩邊的浮動 --> <div class="content"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div> <!-- # ###行內元素浮動: 如果對行內元素進行浮動: 默認會把行內元素升級成行內塊狀元素,可以設置寬和高 消除浮動產生的影響:clear:both; --> <div class="content2"> <a href="#" id="a1">點擊我跳轉1</a> <a href="#" id="a2">點擊我跳轉2</a> </div> </body> </html>
4.2 margin-top失效問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin-top失效問題</title> <style> * {margin:0px;padding:0px;} .box1 {width:100px;height:100px;margin-top:10px;border:solid 1px red;} .father {width:300px;height:300px;background: yellow;overflow: hidden;} .son {width:150px;height:150px;margin-top:50px;} </style> </head> <body> <!-- overflow: hidden; overflow auto 如果內容超出邊框,會以下拉框的形式顯示,不會溢出 --> <div class="box1"> sdfsf </div> <div class="father"> <div class="son">12</div> </div> </body> </html>
4.3 overflow
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .test { overflow: hidden; width: 200px; height: 100px; background: #eee; } </style> </head> <body> <!-- overflow:hidden 對超出部分內容進行隱藏 --> <div class="test"> <p>蘇打速度</p> <p>蘇打速度</p> <p>蘇打速度</p> <p>蘇打速度</p> <p>蘇打速度</p> </div> </body> </html>
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!