第9章 定位布局_第1頁(yè)
第9章 定位布局_第2頁(yè)
第9章 定位布局_第3頁(yè)
第9章 定位布局_第4頁(yè)
第9章 定位布局_第5頁(yè)
已閱讀5頁(yè)，還剩153頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第9章定位布局聊城大學(xué)傳媒技術(shù)學(xué)院王麗萍第9章定位布局兩列定位布局9.2定位的概念9.1實(shí)例分析：泡泡潛水俱樂部9.4三列定位布局9.3定位的概念定位定位是指通過(guò)選取適合的參照物，并設(shè)置left或right、top或bottom屬性，來(lái)確定元素在網(wǎng)頁(yè)中的位置。position:relative|absolute|fixed固定定位絕對(duì)定位相對(duì)定位元素相對(duì)于已定位的祖先元素定位。position:absolute元素相對(duì)于瀏覽器視口定位。

position:fixed元素相對(duì)于它的原始位置定位。

position:relative含義說(shuō)明屬性值9.1.1定位實(shí)例：《國(guó)家大劇院簡(jiǎn)介》網(wǎng)頁(yè)

中國(guó)國(guó)家大劇院

中國(guó)國(guó)家大劇院位于北京市中心天安門廣場(chǎng)……src=“juyuan.jpg”alt=“國(guó)家大劇院”width=“200”height=“133”

國(guó)家大劇院由法國(guó)建筑師保羅·安德魯主持設(shè)計(jì)……

國(guó)家大劇院主體建筑由外部圍護(hù)鋼結(jié)構(gòu)殼體和內(nèi)部的……

國(guó)家大劇院主體建筑外環(huán)繞人工湖……

大劇院南部入口與北部入口的“水下走廊”……

9.1.1定位實(shí)例：《國(guó)家大劇院簡(jiǎn)介》網(wǎng)頁(yè)<body><divid=“container”><h1>

</h1><p>

</p><img/><p>

</p><p>

</p><p>

</p><p>

</p></div></body>class=“p1”9.1.1定位實(shí)例：《國(guó)家大劇院簡(jiǎn)介》網(wǎng)頁(yè)瀏覽器視口9.1.1定位瀏覽器視口實(shí)例：《國(guó)家大劇院簡(jiǎn)介》網(wǎng)頁(yè)bodycontainer相對(duì)定位是指元素相對(duì)于它的原始位置定位。

（1）相對(duì)定位position:relative;left:20px;top:20px;h1{position:relative;}left:50px;top:50px;}（1）相對(duì)定位5050（0,0）toplefth1{position:relative;}left:50px;top:50px;}p.p1{position:relative;right:100px;bottom:50px;}（1）相對(duì)定位（0,0）rightbottom10050h1{position:relative;}left:50px;top:50px;}p.p1{position:relative;right:100px;bottom:50px;}（1）相對(duì)定位

position:relative;相對(duì)定位是指元素相對(duì)于它的原始位置定位。相對(duì)定位元素仍然保留它在文檔流中的原始位置。如果不設(shè)置寬度，相對(duì)定位元素的寬度保持原來(lái)大小。小結(jié)：（1）相對(duì)定位絕對(duì)定位是指元素相對(duì)于最近的已定位的祖先元素定位。如果不存在已定位的祖先元素，則相對(duì)于瀏覽器視口定位。

（2）絕對(duì)定位position:absolute;left:20px;top:20px;h1{position:absolute;left:0;top:0;}img{position:absolute;right:0;bottom:0;}（2）絕對(duì)定位h1{position:absolute;left:0;top:0;}body{position:relative;}img{position:absolute;right:0;bottom:0;}（2）絕對(duì)定位h1{position:absolute;left:0;top:0;}img{position:absolute;right:0;bottom:0;}body{position:relative;}#container{position:relative;}（2）絕對(duì)定位h1{position:absolute;left:0;top:0;}img{position:absolute;right:0;bottom:0;}#container{position:relative;}（2）絕對(duì)定位10050（0,0）toplefth1{position:absolute;left:100px;top:50px;}img{position:absolute;right:0;bottom:0;}#container{position:relative;}（2）絕對(duì)定位position:absolute;絕對(duì)定位是指元素相對(duì)于最近的已定位的祖先元素定位。如果不存在已定位的祖先元素，則相對(duì)于瀏覽器視口定位。絕對(duì)定位元素放棄它在文檔流中的原始位置。如果不設(shè)置寬度，絕對(duì)定位元素的寬度收縮至最小。小結(jié)：（2）絕對(duì)定位固定定位是指元素相對(duì)于瀏覽器視口定位。固定定位的元素固定在瀏覽器視口的某個(gè)位置，不隨網(wǎng)頁(yè)滾動(dòng)。

（3）固定定位position:fixed;left:20px;top:20px;h1{position:fixed;right:50px;top:50px;}righttop5050（3）固定定位h1{position:fixed;right:50px;top:50px;}（3）固定定位h1{position:fixed;right:50px;top:50px;}（3）固定定位position:fixed;固定定位是指元素相對(duì)于瀏覽器視口定位。固定定位的元素固定在瀏覽器視口的某個(gè)位置，不隨網(wǎng)頁(yè)滾動(dòng)。固定定位元素放棄它在文檔流中的原始位置。如果不設(shè)置寬度，固定定位元素的寬度收縮至最小。IE6瀏覽器不支持固定定位。小結(jié)：（3）固定定位練習(xí)題：三種定位方式的比較position:fixedposition:absoluteposition:relative隨網(wǎng)頁(yè)滾動(dòng)參照物定位方式寬度變化原始位置9.1.2定位坐標(biāo)系定位坐標(biāo)系有四種：left-top坐標(biāo)系left-bottom坐標(biāo)系right-top坐標(biāo)系right-bottom坐標(biāo)系marginborderpadding中國(guó)國(guó)家大劇院位于北京市中心天安門廣場(chǎng)西，人民大會(huì)堂西側(cè)，西長(zhǎng)安街以南，由國(guó)家大劇院主體建筑及南北兩側(cè)的水下長(zhǎng)廊、地下停車場(chǎng)、人工湖、綠地組成，總占地面積11.89萬(wàn)平方米。ABCD（1）left-top坐標(biāo)系當(dāng)元素使用left、top屬性定位時(shí)，采用left-top坐標(biāo)系。position:absolute;left:50px;top:25px;top（0,0）left5025abcd中國(guó)國(guó)家大劇院位于北京市中心天安門廣場(chǎng)西，人民大會(huì)堂西側(cè)，西長(zhǎng)安街以南，由國(guó)家大劇院主體建筑及南北兩側(cè)的水下長(zhǎng)廊、地下停車場(chǎng)、人工湖、綠地組成，總占地面積11.89萬(wàn)平方米。-50-25當(dāng)元素使用left、top屬性定位時(shí)，采用left-top坐標(biāo)系。position:absolute;left:50px;top:25px;top（0,0）leftposition:absolute;left:-50px;top:-25px;（1）left-top坐標(biāo)系（0,0）leftbottom5025（2）left-bottom坐標(biāo)系當(dāng)元素使用left、bottom屬性定位時(shí)，采用left-bottom坐標(biāo)系。position:absolute;left:50px;bottom:25px;中國(guó)國(guó)家大劇院位于北京市中心天安門廣場(chǎng)西，人民大會(huì)堂西側(cè)，西長(zhǎng)安街以南，由國(guó)家大劇院主體建筑及南北兩側(cè)的水下長(zhǎng)廊、地下停車場(chǎng)、人工湖、綠地組成，總占地面積11.89萬(wàn)平方米。（3）right-top坐標(biāo)系當(dāng)元素使用rigth、top屬性定位時(shí)，采用right-top坐標(biāo)系。position:absolute;right:50px;top:25px;中國(guó)國(guó)家大劇院位于北京市中心天安門廣場(chǎng)西，人民大會(huì)堂西側(cè)，西長(zhǎng)安街以南，由國(guó)家大劇院主體建筑及南北兩側(cè)的水下長(zhǎng)廊、地下停車場(chǎng)、人工湖、綠地組成，總占地面積11.89萬(wàn)平方米。（0,0）righttop5025（4）right-bottom坐標(biāo)系當(dāng)元素使用rigth、bottom屬性定位時(shí)，采用right-bottom坐標(biāo)系。position:absolute;right:50px;bottom:25px;（0,0）rightbottom5025中國(guó)國(guó)家大劇院位于北京市中心天安門廣場(chǎng)西，人民大會(huì)堂西側(cè)，西長(zhǎng)安街以南，由國(guó)家大劇院主體建筑及南北兩側(cè)的水下長(zhǎng)廊、地下停車場(chǎng)、人工湖、綠地組成，總占地面積11.89萬(wàn)平方米。定位坐標(biāo)系有四種。坐標(biāo)系的坐標(biāo)原點(diǎn)位于參照物元素的padding區(qū)域外邊緣，坐標(biāo)軸的正值方向指向參照物的內(nèi)部。定位元素的定位點(diǎn)位于定位元素的margin區(qū)域外邊緣。小結(jié)：定位坐標(biāo)系9.1.3定位元素的層疊順序h1{position:absolute;left:100px;top:50px;}img{position:absolute;left:150px;top:70px;}#container{position:relative;}zh1{position:absolute;left:100px;top:50px;}img{position:absolute;left:150px;top:70px;}#container{position:relative;}9.1.3定位元素的層疊順序z-index屬性用于確定定位元素在Z軸上的層疊順序。一般情況下，z-index值較大的元素將疊加在z-index值較小的元素之上。9.1.3定位元素的層疊順序z-index:整數(shù)（可為負(fù)數(shù)）h1{position:absolute;left:100px;top:50px;}img{position:absolute;left:150px;top:70px;}#container{position:relative;}9.1.3定位元素的層疊順序h1{position:absolute;left:100px;top:50px;z-index:1;}img{position:absolute;left:150px;top:70px;}#container{position:relative;}9.1.3定位元素的層疊順序h1{position:absolute;left:100px;top:50px;z-index:1;}img{position:absolute;left:150px;top:70px;z-index:2;}#container{position:relative;}p.p1{z-index:5;}9.1.3定位元素的層疊順序h1{position:absolute;left:100px;top:50px;z-index:-1;}img{position:absolute;left:150px;top:70px;z-index:-2;}#container{position:relative;}9.1.3定位元素的層疊順序h1{position:absolute;left:100px;top:50px;z-index:-1;}img{position:absolute;left:150px;top:70px;z-index:-2;}#container{position:relative;}body9.1.3定位元素的層疊順序正值空間負(fù)值空間h1{position:absolute;left:100px;top:50px;z-index:-1;}img{position:absolute;left:150px;top:70px;z-index:-2;}#container{position:relative;z-index:9;}body9.1.3定位元素的層疊順序h1{position:absolute;left:100px;top:50px;z-index:-1;}img{position:absolute;left:150px;top:70px;z-index:-2;}#container{position:relative;z-index:9;}bodycontainer9.1.3定位元素的層疊順序正值空間負(fù)值空間9.1.3定位元素的層疊順序h1{position:absolute;left:100px;top:50px;z-index:-1;}img{position:absolute;left:150px;top:70px;z-index:-2;}#container{position:relative;z-index:9;}z-index屬性用于確定定位元素在Z軸上的層疊順序。z-index屬性具有相對(duì)性，即每個(gè)z-index值都?xì)w屬于一個(gè)“層級(jí)”。body是“基礎(chǔ)層級(jí)”。已定位的祖先元素設(shè)置了z-index后會(huì)產(chǎn)生新的“層級(jí)”。對(duì)于同一“層級(jí)”的定位元素，z-index值較大的元素將疊加在z-index值較小的元素之上。當(dāng)z-index值為負(fù)數(shù)時(shí)，定位元素顯示在“層級(jí)”元素的內(nèi)容之下、背景之上。小結(jié)：9.1.3定位元素的層疊順序9.1.4定位應(yīng)用

相對(duì)定位應(yīng)用產(chǎn)生偏移效果定義“已定位的祖先元素”絕對(duì)定位應(yīng)用靈活地定位固定定位應(yīng)用將元素固定在屏幕上第9章定位布局兩列定位布局9.2定位的概念9.1實(shí)例分析：泡泡潛水俱樂部9.4三列定位布局9.3兩列定位布局兩列布局網(wǎng)頁(yè)的邏輯結(jié)構(gòu)containerheadercontentfootersidebar<body><divid=“container”><divid=“header”>…</div><divid=“sidebar”>…</div><divid=“content”>…</div><divid=“footer”>…</div></div></body>containerheadercontentfootersidebar9.2.2兩列定位布局的CSS#sidebar{width:240px;position:absolute;left:0;top:150px;}#container{760px;position:relative;}9.2.2兩列定位布局的CSScontainerheadercontentfootersidebar#sidebar{width:240px;position:absolute;left:0;top:150px;}#content{margin-left:260px;}#container{760px;position:relative;}#sidebar{width:240px;position:absolute;left:0;top:150px;}#content{margin-left:260px;}containerheadercontentfootersidebar9.2.2兩列定位布局的CSS#container{760px;position:relative;}containerheadercontentfootersidebar9.2.3定位布局的常見錯(cuò)誤#sidebar{width:240px;position:absolute;left:0;top:150px;}#container{760px;position:relative;}containerheadercontentfootersidebar9.2.3定位布局的常見錯(cuò)誤#sidebar{width:240px;position:absolute;left:0;top:150px;}#content{width:500px;position:absolute;right:0;top:150px;}#container{760px;position:relative;}9.2.3定位布局的常見錯(cuò)誤#container{760px;position:relative;}#sidebar{width:240px;position:absolute;left:0;top:150px;}#content{width:500px;position:absolute;right:0;top:150px;}footercontainerheadercontentsidebar第9章定位布局兩列定位布局9.2定位的概念9.1實(shí)例分析：泡泡潛水俱樂部9.4三列定位布局9.3三列定位布局三列布局網(wǎng)頁(yè)的邏輯結(jié)構(gòu)<body><divid=“container”><divid=“header”>…</div><divid=“sidebar1”>…</div><divid=“content”>…</div><divid=“sidebar2”>…</div><divid=“footer”>…</div></div></body>containerheadersidebar2footercontentsidebar19.3.2三列定位布局的CSScontainerheadersidebar2footercontentsidebar1#container{width:760px;position:relative;}#sidebar1{width:160px;position:absolute;left:0;top:150px;}9.3.2三列定位布局的CSScontainerheadersidebar2footercontentsidebar1#container{width:760px;position:relative;}#sidebar1{width:160px;position:absolute;left:0;top:150px;}#sidebar2{width:160px;position:absolute;right:0;top:150px;}9.3.2三列定位布局的CSScontainerheaderfootercontentsidebar1sidebar2#container{width:760px;position:relative;}#sidebar1{width:160px;position:absolute;left:0;top:150px;}#sidebar2{width:160px;position:absolute;right:0;top:150px;}#content{widt

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論