Python全棧之學(xué)習(xí)CSS(2)
更新時(shí)間：2022年01月23日 16:59:53 作者：熬夜泡枸杞
這篇文章主要為大家介紹了Python全棧之CSS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
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
{
/* 具體寫(xiě)法 */
width:600px;
height:600px;
border:solid 1px red;
background-color: yellow;
/* 控制背景圖 */
background-image:url("./images/xiao.jpg");
/* 控制是否平鋪 repeat-x repeat-y no-repeat repeat(默認(rèn))*/
background-repeat:no-repeat;
/* 控制背景圖像的位置 ; 參數(shù)1 控制左右 參數(shù) 控制上下 */
/* background-position: 50% 50%; */
/* 固定背景圖使用 fixed 了解 */
background-attachment: fixed;
}
.c2
{
/* 簡(jiǎn)寫(xiě) */
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>
/* 鼠標(biāo)滑過(guò),點(diǎn)亮圖片 */
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;
}
/* 一張圖片的導(dǎo)入 */
div.c2
{
background: url("./images/xiao.jpg") no-repeat;
/* 參數(shù)1:寬 參數(shù)2:高 50px 50px / 100% 100% */
/* 控制背景圖像的尺寸大小 background-size: 100% 100% ; */
background-size: 100% auto;
}
/* 多張圖片導(dǎo)入 */
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. 相對(duì)_絕對(duì)_固定
2.1 相對(duì)定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:相對(duì)定位 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>
<!--
相對(duì)定位: 參考點(diǎn)是他自己本身,相對(duì)于原始的位置進(jìn)行定位;
如果添加了定位:無(wú)論是添加(相對(duì),絕對(duì),固定)屬性,添加之后會(huì)增加額外的其他屬性:
z-index 控制層疊關(guān)系: 值越大越在上層,值越小越在下層
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 絕對(duì)定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:絕對(duì)定位 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;
/* 無(wú)效 */
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>
<!--
絕對(duì)定位:參考點(diǎn)默認(rèn)參考的是body
效果:脫離文檔流,后面的內(nèi)容自動(dòng)補(bǔ)位
使用:絕對(duì)定位會(huì)參照父級(jí)的相對(duì)定位進(jìn)行移動(dòng),如果父級(jí)中沒(méi)有relative,相對(duì)于body進(jìn)行定位;
(1)把想要的父級(jí)元素變成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>定位:絕對(duì)定位 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;
/* 無(wú)效 */
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>
<!--
絕對(duì)定位:參考點(diǎn)默認(rèn)參考的是body
效果:脫離文檔流,后面的內(nèi)容自動(dòng)補(bǔ)位
使用:絕對(duì)定位會(huì)參照父級(jí)的相對(duì)定位進(jìn)行移動(dòng),如果父級(jí)中沒(méi)有relative,相對(duì)于body進(jìn)行定位;
(1)把想要的父級(jí)元素變成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>
/* *號(hào)代表通配選擇符,代表所有標(biāo)簽,默認(rèn)標(biāo)簽中含有默認(rèn)的間距,要在一開(kāi)始的時(shí)候全部去掉; */
*
{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 '>： 檢索或設(shè)置對(duì)象中的參與過(guò)渡的屬性
<' transition-duration '>： 檢索或設(shè)置對(duì)象過(guò)渡的持續(xù)時(shí)間
<' transition-timing-function '>： 檢索或設(shè)置對(duì)象中過(guò)渡的動(dòng)畫(huà)類(lèi)型
<' transition-delay '>： 檢索或設(shè)置對(duì)象延遲過(guò)渡的時(shí)間
*/
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">我沒(méi)動(dòng)</div>
<p>1111222333444</p>
</body>
</html>
3. float浮動(dòng)
3.1 display轉(zhuǎn)換元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display 轉(zhuǎn)換元素</title>
<style>
div
/* display:inline; 轉(zhuǎn)換成行內(nèi)元素 */
{display:inline;border:solid 1px red;width:1000px;height:20px;}
span
/* display:block; 轉(zhuǎn)換成塊狀元素 */
{display:block;width:100px;height:50px;border:solid 1px red;}
a
/* display:inline-block; 轉(zhuǎn)換成行內(nèi)塊狀元素 */
{display:inline-block;width:500px;height:30px;border:solid 1px red;}
p
/* display:none 隱藏元素 */
{display:none;}
</style>
</head>
<body>
<!-- 元素的分類(lèi):
塊狀元素 : block
行內(nèi)元素 : inline
行內(nèi)塊狀元素 : inline-block
-->
<div>第一個(gè)div</div>
<div>第二個(gè)div</div>
<span>我是span1</span>
<span>我是span2</span>
<a href="#">我是鏈接1</a>
<a href="#">我是鏈接2</a>
<p>12345</p>
</body>
</html>
3.2 float浮動(dòng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 浮動(dòng)</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>
<!--
# ###塊狀元素浮動(dòng):
float:left 向左浮動(dòng) ,元素脫離原始文檔流,后面的內(nèi)容自動(dòng)補(bǔ)齊;
float:right 向右浮動(dòng) ,元素脫離原始文檔流,后面的內(nèi)容自動(dòng)補(bǔ)齊;
目的: 讓塊狀元素在一排顯示
clear:both; 清除兩邊的浮動(dòng)
-->
<div class="content">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<!--
# ###行內(nèi)元素浮動(dòng):
如果對(duì)行內(nèi)元素進(jìn)行浮動(dòng):
默認(rèn)會(huì)把行內(nèi)元素升級(jí)成行內(nèi)塊狀元素,可以設(shè)置寬和高
消除浮動(dòng)產(chǎn)生的影響:clear:both;
-->
<div class="content2">
<a href="#" id="a1">點(diǎn)擊我跳轉(zhuǎn)1</a>
<a href="#" id="a2">點(diǎn)擊我跳轉(zhuǎn)2</a>
</div>
</body>
</html>
4. html里面的bug
4.1 float內(nèi)容塌陷問(wèn)題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 浮動(dòng)</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>
<!--
# ###塊狀元素浮動(dòng):
float:left 向左浮動(dòng) ,元素脫離原始文檔流,后面的內(nèi)容自動(dòng)補(bǔ)齊;
float:right 向右浮動(dòng) ,元素脫離原始文檔流,后面的內(nèi)容自動(dòng)補(bǔ)齊;
目的: 讓塊狀元素在一排顯示
clear:both; 清除兩邊的浮動(dòng)
-->
<div class="content">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<!--
# ###行內(nèi)元素浮動(dòng):
如果對(duì)行內(nèi)元素進(jìn)行浮動(dòng):
默認(rèn)會(huì)把行內(nèi)元素升級(jí)成行內(nèi)塊狀元素,可以設(shè)置寬和高
消除浮動(dòng)產(chǎn)生的影響:clear:both;
-->
<div class="content2">
<a href="#" id="a1">點(diǎn)擊我跳轉(zhuǎn)1</a>
<a href="#" id="a2">點(diǎn)擊我跳轉(zhuǎn)2</a>
</div>
</body>
</html>
4.2 margin-top失效問(wèn)題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin-top失效問(wèn)題</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 如果內(nèi)容超出邊框，會(huì)以下拉框的形式顯示，不會(huì)溢出 -->
<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 對(duì)超出部分內(nèi)容進(jìn)行隱藏 -->
<div class="test">
<p>蘇打速度</p>
<p>蘇打速度</p>
<p>蘇打速度</p>
<p>蘇打速度</p>
<p>蘇打速度</p>
</div>
</body>
</html>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家介紹了python關(guān)于第三方日志的QA記錄詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
python實(shí)現(xiàn)帶錯(cuò)誤處理功能的遠(yuǎn)程文件讀取方法
這篇文章主要介紹了python實(shí)現(xiàn)帶錯(cuò)誤處理功能的遠(yuǎn)程文件讀取方法,涉及Python使用socket操作遠(yuǎn)程文件的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
python怎樣更加簡(jiǎn)潔的解決小明種蘋(píng)果
這篇文章主要介紹了python怎樣更加簡(jiǎn)潔的解決小明種蘋(píng)果。想了解數(shù)據(jù)結(jié)構(gòu)和算法的同學(xué)，可以參考下2021-04-04
淺談PyTorch的可重復(fù)性問(wèn)題(如何使實(shí)驗(yàn)結(jié)果可復(fù)現(xiàn))
今天小編就為大家分享一篇淺談PyTorch的可重復(fù)性問(wèn)題(如何使實(shí)驗(yàn)結(jié)果可復(fù)現(xiàn))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-02-02
這篇文章主要介紹了Python數(shù)據(jù)可視化庫(kù)Bokeh的使用總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-11-11
如何在Cloud Studio上執(zhí)行Python代碼？
這篇文章主要介紹了如何在Cloud Studio上執(zhí)行Python代碼？,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
對(duì)python中的pop函數(shù)和append函數(shù)詳解
今天小編就為大家分享一篇對(duì)python中的pop函數(shù)和append函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了Python函數(shù)裝飾器,結(jié)合實(shí)例形式詳細(xì)分析了Python裝飾器的原理、功能、分類(lèi)、常見(jiàn)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2021-10-10
python中24小時(shí)制轉(zhuǎn)換為12小時(shí)制的方法
最近需要實(shí)現(xiàn)一個(gè)需求，求用戶(hù)輸入24小時(shí)制的時(shí)間，然后顯示12小時(shí)制的時(shí)間。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
python數(shù)據(jù)分析必會(huì)的Pandas技巧匯總
用Python做數(shù)據(jù)分析光是掌握numpy和matplotlib可不夠，numpy雖然能夠幫我們處理處理數(shù)值型數(shù)據(jù)，但很多時(shí)候，還有字符串，還有時(shí)間序列等，比如：我們通過(guò)爬蟲(chóng)獲取到了存儲(chǔ)在數(shù)據(jù)庫(kù)中的數(shù)據(jù)，一些Pandas必會(huì)的用法，讓你的數(shù)據(jù)分析水平更上一層樓2021-08-08