前端6-定位布局

發(fā)布時(shí)間：2021-11-09 | 雜志分類：計(jì)算機(jī)

前端6-定位布局

作者: 風(fēng)亦

免費(fèi)制作

更多內(nèi)容

風(fēng)亦

粉絲：{{bookData.followerCount}}

前端6-定位布局

{{`發(fā)布時(shí)間：2021-11-09`}} | 云展網(wǎng)企業(yè)畫(huà)冊(cè)制作產(chǎn)品說(shuō)明書(shū) 計(jì)算機(jī) 前端6-定位布局

?HTML基礎(chǔ)05-定位布局定位position 概念：是一種布局方式，主要用來(lái)確定元素的位置。作用解決是具有層級(jí)疊加（覆蓋）效果的布局。實(shí)現(xiàn)方式通過(guò)給元素添加position屬性,并且定位位置調(diào)整都是配合left, top, right, bottom四個(gè)屬性來(lái) 使用的。 position用來(lái)設(shè)置定位元素的參照物。 left, top, right, bottom用來(lái)設(shè)置定位元素相對(duì)于參照物橫向和縱向距離。 #mark{ ? ? width: 100px; ? ? height: 100px; ? ? background-c... [收起]

[展開(kāi)]

風(fēng)亦

粉絲: {{bookData.followerCount}}

文本內(nèi)容

第1頁(yè)

第2頁(yè)

相對(duì)定位的元素會(huì)提升層級(jí)，但是不會(huì)脫離文檔流,所以會(huì)為其保留位置。相對(duì)定位是相對(duì)于元素自身原來(lái)的位置進(jìn)行位置調(diào)整。代碼 <!DOCTYPE html> <html> <head> ? ?<meta charset=\"UTF-8\"> ? ?<title></title> ? ?<style type=\"text/css\"> ? ? ? *{ ? ? ? ? ? ?margin: 0; ? ? ? ? ? ?padding: 0; ??? } ? ? ? ?/* 相對(duì)定位測(cè)試!!!!!*/ ? ? ? ?#relative{ ? ? ? ? ? ?width: 100px; ? ? ? ? ? ?height: 100px; ? ? ? ? ? ?background-color: salmon; ? ? ? ? ? ?position: relative; ? ? ? ? ? ?left: 100px; ? ? ? ? ? ?top: 50px; ??? } ? ? ? ?#two{ ? ? ? ? ? ?width: 150px; ? ? ? ? ? ?height: 150px; ? ? ? ? ? ?background-color: seagreen; ??? } ?? ? ?</style> </head> <body> ? ? ? ?<div id=\"relative\"></div> ? ?<div id=\"two\"></div> </body> </html> 瀏覽器效果

第3頁(yè)

absolute 絕對(duì)定位特點(diǎn): 脫離文檔流,所以不會(huì)為其保留位置。實(shí)現(xiàn) 未設(shè)置position:absolute; <!DOCTYPE html> <html> ? ?<head> ? ? ? ?<meta charset=\"UTF-8\"> ? ? ? ?<title></title> ? ? ? ?<style type=\"text/css\"> ????? *{ ? ? ? ? ? ? ? ?margin: 0; ? ? ? ? ? ? ? ?padding: 0; ????? } ? ? ? ? ? ?#absolute { ? ? ? ? ? ? ? ?width: 100px; ? ? ? ? ? ? ? ?height: 100px; ? ? ? ? ? ? ? ?background-color: red; ????? } ? ? ? ? ? ?#one { ? ? ? ? ? ? ? ?width: 150px; ? ? ? ? ? ? ? ?height: 150px; ? ? ? ? ? ? ? ?background-color: yellow; ????? } ? ? ? ?</style> ? ?</head> ? ?<body> ? ? ? ?<div id=\"absolute\"></div> ? ? ? ?<div id=\"one\">這是標(biāo)簽one</div> ??? ? ?</body> </html>

第4頁(yè)

設(shè)置position:absolute; <!DOCTYPE html> <html> ? ?<head> ? ? ? ?<meta charset=\"UTF-8\"> ? ? ? ?<title></title> ? ? ? ?<style type=\"text/css\"> ????? *{ ? ? ? ? ? ? ? ?margin: 0; ? ? ? ? ? ? ? ?padding: 0; ????? } ? ? ? ? ? ?#absolute { ? ? ? ? ? ? ? ?width: 100px; ? ? ? ? ? ? ? ?height: 100px; ? ? ? ? ? ? ? ?background-color: red; ? ? ? ? ? ? ? ?position: absolute; ? ? ? ? ? ? ? ?left: 20px; ? ? ? ? ? ? ? ?top: 100px; ????? } ? ? ? ? ? ?#one { ? ? ? ? ? ? ? ?width: 150px; ? ? ? ? ? ? ? ?height: 150px; ? ? ? ? ? ? ? ?background-color: yellow; ????? } ? ? ? ?</style> ? ?</head> ? ?<body> ? ? ? ?<div id=\"absolute\"></div> ? ? ? ?<div id=\"one\">這是標(biāo)簽one</div> ??? ? ?</body> </html> 瀏覽器效果

第5頁(yè)

? 注意：絕對(duì)定位的定位參照物不一定是父級(jí)元素，如果想要讓絕對(duì)定位的參照物為父級(jí) 元素，此時(shí)父級(jí)元素必需設(shè)置position為relative，absolute或者?xed。父級(jí)元素未設(shè)置position時(shí)，默認(rèn)以瀏覽器窗口為參考進(jìn)行位置移動(dòng)。 <!DOCTYPE html> <html> ? ?<head> ? ? ? ?<meta charset=\"UTF-8\"> ? ? ? ?<title></title> ? ? ? ?<style type=\"text/css\"> ????? *{ ? ? ? ? ? ? ? ?margin: 0; ? ? ? ? ? ? ? ?padding: 0; ????? } ? ? ? ? ? ?#absolute { ? ? ? ? ? ? ? ?width: 100px; ? ? ? ? ? ? ? ?height: 100px; ? ? ? ? ? ? ? ?background-color: red; ? ? ? ? ? ? ? ?position: absolute; ? ? ? ? ? ? ? ?left: 20px; ? ? ? ? ? ? ? ?top: 100px; ??????} ? ? ? ? ? ?#one { ? ? ? ? ? ? ? ?width: 150px; ? ? ? ? ? ? ? ?height: 150px; ? ? ? ? ? ? ? ?background-color: yellow; ????? } ? ? ? ? ? ?#a{ ????? width: 350px; ????? height: 300px; ????? background-color: deeppink; ????? } ? ? ? ? ? ?#b{ ????? width: 250px; ????? height: 250px; ????? background-color: lightcoral; ????? } ? ? ? ? ? ?#c{ ????? width: 150px; ????? height: 150px; ????? background-color: deepskyblue; ????? position: absolute; ????? left: 30px;

第6頁(yè)

????? top: 30px; ????? } ? ? ? ?</style> ? ?</head> ? ?<body> ? ? ? ?<div id=\"absolute\"></div> ? ? ? ?<div id=\"one\">這是標(biāo)簽one</div> ? ? ? ?<div id=\"a\"> ? ? ?<div id=\"b\"> ? ? <div id=\"c\">這是設(shè)置了絕對(duì)定位的標(biāo)簽</div> ? ? </div> ? ? ?</div> ? ?</body> </html> ? 父級(jí)元素設(shè)置position時(shí)，此時(shí)以父級(jí)元素為定位參照物。如果其父標(biāo)簽已經(jīng)設(shè)置了除靜態(tài)定位之外的其他定位，那么就以父標(biāo)簽為參考進(jìn)行位置移動(dòng)。 <!DOCTYPE html> ? ?<html> ? ? ? ?<head> ? ? ? ? ? ?<meta charset=\"UTF-8\"> ? ? ? ? ? ?<title></title> ? ? ? ? ? ?<style type=\"text/css\"> ??????? *{ ? ? ? ? ? ? ? ? ? ?margin: 0; ? ? ? ? ? ? ? ? ? ?padding: 0;

第7頁(yè)

??????? } ? ? ? ? ? ? ? ?#absolute { ? ? ? ? ? ? ? ? ? ?width: 100px; ? ? ? ? ? ? ? ? ? ?height: 100px; ? ? ? ? ? ? ? ? ? ?background-color: red; ? ? ? ? ? ? ? ? ? ?position: absolute; ? ? ? ? ? ? ? ? ? ?left: 20px; ? ? ? ? ? ? ? ? ? ?top: 30px; ????????} ? ? ? ? ? ? ? ?#one { ? ? ? ? ? ? ? ? ? ?width: 150px; ? ? ? ? ? ? ? ? ? ?height: 150px; ? ? ? ? ? ? ? ? ? ?background-color: yellow; ??????? } ? ? ? ? ? ? ? ?#a{ ??????? width: 350px; ??????? height: 300px; ??????? background-color: pink; ? ? ? ? ? ? ? ? ? ?padding: 30px; ??????? } ? ? ? ? ? ? ? //#b是#c的父級(jí)此時(shí)#c的選擇器定位參照物為#b對(duì)應(yīng)的父級(jí)元素 ? ? ? ? ? ? ? ?#b{ ??????? width: 250px; ??????? height: 250px; ??????? background-color: greenyellow; ? ? ? ? ? ? ? ? ? ?position: relative; ??????? } ? ? ? ? ? ? ? ?#c{ ??????? width: 150px; ??????? height: 150px; ??????? background-color: deepskyblue; ??????? position: absolute; ??????? left: 30px; ??????? top: 30px; ??????? } ? ? ? ? ? ?</style> ? ? ? ?</head> ? ? ? ?<body> ? ? ? ? ? ?<div id=\"absolute\"></div> ? ? ? ? ? ?<div id=\"one\">這是標(biāo)簽one</div> ? ? ? ? ? ?<div id=\"a\">這是第b的父標(biāo)簽a ???? ?<div id=\"b\">這是c的父標(biāo)簽b ???? ? <div id=\"c\">這是設(shè)置了絕對(duì)定位的標(biāo)簽c</div> ? ? ? ? </div> ? ? ? ? ?</div> ? ? ? ?</body> ? ?</html>

第8頁(yè)

如果多個(gè)相鄰標(biāo)簽都設(shè)置絕對(duì)定位,層級(jí)如何顯示? 絕對(duì)定位的元素會(huì)脫離文檔流，提升層級(jí)。相鄰的標(biāo)簽都設(shè)置了絕對(duì)定位,越晚設(shè)置定位的層級(jí)越靠上。 <!DOCTYPE html> <html> ? ?<head> ? ? ? ?<meta charset=\"UTF-8\"> ? ? ? ?<title></title> ? ? ? ?<style type=\"text/css\"> ????? *{ ? ? ? ? ? ? ? ?margin: 0; ? ? ? ? ? ? ? ?padding: 0; ????? } ? ? ? ? ? ?/*兄弟標(biāo)簽絕對(duì)定位*/ ? ? ? ? ? ?#div1 { ? ? ? ? ? ? ? ?width: 150px; ? ? ? ? ? ? ? ?height: 150px; ? ? ? ? ? ? ? ?background-color: yellowgreen; ? ? ? ? ? ? ? ?position: absolute; ? ? ? ? ? ? ? ?left: 10px; ? ? ? ? ? ? ? ?top: 10px; ????? } ? ? ? ? ? ?#div2 {

第9頁(yè)

? ? ? ? ? ? ? ?width: 100px; ? ? ? ? ? ? ? ?height: 100px; ? ? ? ? ? ? ? ?background-color: yellow; ? ? ? ? ? ? ? ?position: absolute; ? ? ? ? ? ? ? ?left: 10px; ? ? ? ? ? ? ? ?top: 10px; ????? } ? ? ? ? ? ?#div3 { ? ? ? ? ? ? ? ?width: 50px; ? ? ? ? ? ? ? ?height: 50px; ? ? ? ? ? ? ? ?background-color: green; ? ? ? ? ? ? ? ?position: absolute; ? ? ? ? ? ? ? ?left: 10px; ? ? ? ? ? ? ? ?top: 10px; ????? } ? ? ? ?</style> ? ?</head> ? ?<body> ? ? ? ? ? ? ? ?<div id=\"div1\">1111111</div> ? ? ? ?<div id=\"div2\">2222</div> ? ?<div id=\"div3\">333</div> ? ?</body> </html> ? z-index屬性可以調(diào)整定位后標(biāo)簽的顯示層級(jí)。默認(rèn)z-index的值都為0;值越大，層級(jí)越靠上。例如:給div2設(shè)置z-index:1; 那么div2就會(huì)在最上層顯示。 #div2 { ? ? width: 100px; ? ? height: 100px; ? ? background-color: yellow; ? ? position: absolute; ? ? left: 10px; ? ? top: 10px; ? ? z-index: 2; }

第10頁(yè)

?xed固定定位設(shè)置固定定位之前的樣式特點(diǎn):固定定位是相對(duì)于瀏覽器窗口進(jìn)行位置調(diào)整,并且會(huì)脫離文檔流.不會(huì)隨著頁(yè)面滾動(dòng)而滾動(dòng). <!DOCTYPE html> <html> ? ?<head> ? ? ? ?<meta charset=\"UTF-8\"> ? ? ? ?<title></title> ? ? ? ?<style type=\"text/css\"> ????? *{ ? ? ? ? ? ? ? ?margin: 0; ? ? ? ? ? ? ? ?padding: 0; ????? } ? ? ? ? ? ?body{

第11頁(yè)

? ? ? ? ? ? ? ?height: 3000px; ????? } ? ? ? ? ? ?#fixed { ? ? ? ? ? ? ? ?width: 100px; ? ? ? ? ? ? ? ?height: 300px; ? ? ? ? ? ? ? ?background-color: sandybrown; ? ? ? ? ? ? ? ?position: fixed; ? ? ? ? ? ? ? ?left: 200px; ? ? ? ? ? ? ? ?top: 100px; ????? } ? ? ? ? ? ?#one { ? ? ? ? ? ? ? ?width: 500px; ? ? ? ? ? ? ? ?height: 500px; ? ? ? ? ? ? ? ?background-color: skyblue; ????? } ? ? ? ?</style> ? ?</head> ? ?<body> ? ? ? <div id=\"fixed\">這是一個(gè)設(shè)置了固定定位的div</div> ? ? ? ? ? <div id=\"one\">這是一個(gè)普通的div</div> ? ?</body> </html> ? ? 課堂綜合練習(xí) 小米官網(wǎng)輪播圖模塊的定位效果:

第12頁(yè)

代碼在工程文件中; 超鏈接的四種狀態(tài) 作用:用來(lái)修改超鏈接的訪問(wèn)狀態(tài). :link 該選擇器能找到所有定義了超鏈接且沒(méi)有被訪問(wèn)過(guò)的元素.只適用于a標(biāo)簽. :visited 該選擇器能找到所有定義了超鏈接且已經(jīng)被訪問(wèn)過(guò)的元素.只適用于a標(biāo)簽. :hover 該選擇器能找到鼠標(biāo)移動(dòng)到其上面的元素.任意標(biāo)簽都適用. :active 該選擇器能找到鼠標(biāo)在其上面點(diǎn)擊按下且不松開(kāi)的元素.任意標(biāo)簽都適用. 注意:以上選擇器,如果對(duì)同一個(gè)標(biāo)簽用了兩個(gè)包含兩個(gè)以上就要遵循以下順序來(lái)設(shè)置! link-visited-hover-active <!DOCTYPE html> <html> ? ?<head> ? ? ? ?<meta charset=\"utf-8\" /> ? ? ? ?<title>偽類選擇器</title> ? ? ? ?<style type=\"text/css\"> ? ? ? ? ? ?a { ? ? ? ? ? ? ? ?margin: 0 20px; ????? } ? ? ? ? ? ?/*1. :link 該選擇器能找到所有定義了超鏈接且沒(méi)有被訪問(wèn)過(guò)的元素 ? 只適用于a標(biāo)簽 */ ? ? ? ? ? ?a:link { ? ? ? ? ? ? ? ?color: deeppink; ????? } ? ? ? ? ? ?/*2. :visited 該選擇器能找到所有定義了超鏈接且已經(jīng)被訪問(wèn)過(guò)的元素 ? 只適用于a 標(biāo)簽*/ ? ? ? ? ? ?a:visited { ? ? ? ? ? ? ? ?color: deepskyblue; ????? } ? ? ? ? ? ?/*3. :hover 該選擇器能找到鼠標(biāo)移動(dòng)到其上面的標(biāo)簽 ? 任意標(biāo)簽都適用*/ ? ? ? ? ? ?a:hover { ? ? ? ? ? ? ? ?color: darkgreen; ????? } ? ? ? ? ? ?/*4. :active 該選擇器能找到鼠標(biāo)在其上面點(diǎn)擊按下且不松開(kāi)的元素 ? 任意標(biāo)簽都適用 */ ? ? ? ? ? ?a:active { ? ? ? ? ? ? ? ?color: red; ????? } ? ? ? ? ? ?#one {

第13頁(yè)

? ? ? ? ? ? ? ?width: 200px; ? ? ? ? ? ? ? ?height: 200px; ? ? ? ? ? ? ? ?margin: 100px; ? ? ? ? ? ? ? ?background-color: skyblue; ????? } ? ? ? ? ? ?#one:hover{ ? ? ? ? ? ? ? ?background-color: red; ????? } ? ? ? ? ? ?#one:active{ ? ? ? ? ? ? ? ?background-color: #006400; ????? } ? ? ? ?</style> ? ?</head> ? ?<body> ? ? ? ?<a href=\"http://www.jd.com\">京東</a> ? ? ? ?<a href=\"http://www.taobao.com\">淘寶</a> ? ? ? ?<a href=\"http://www.tianmao.com\">天貓</a> ? ? ? ?<a href=\"http://www.sohu.com\">搜狐</a> ? ? ? ?<a href=\"http://www.huaban.com\">百度</a> ? ? ? ?<div id=\"one\"></div> ? ?</body> </html> 課堂小結(jié) 熟練使用定位布局,并且能清楚的區(qū)分不同定位方式的區(qū)別掌握提高定位后標(biāo)簽層級(jí)的方式重點(diǎn)掌握絕對(duì)布局特點(diǎn) 了解偽類選擇器

百萬(wàn)用戶使用云展網(wǎng)進(jìn)行翻頁(yè)電子圖書(shū)制作，只要您有文檔，即可一鍵上傳，自動(dòng)生成鏈接和二維碼(獨(dú)立電子書(shū))，支持分享到微信和網(wǎng)站！

轉(zhuǎn)發(fā)

下載

免費(fèi)制作

其他案例