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

下載本文檔

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

文檔簡介

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

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

position:relative含義說明屬性值9.1.1定位實例：《國家大劇院簡介》網(wǎng)頁

中國國家大劇院

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

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

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

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

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

9.1.1定位實例：《國家大劇院簡介》網(wǎng)頁<body><divid=“container”><h1>

</h1><p>

</p><img/><p>

</p><p>

</p><p>

</p><p>

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

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

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

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

相對定位應(yīng)用產(chǎn)生偏移效果定義“已定位的祖先元素”絕對定位應(yīng)用靈活地定位固定定位應(yīng)用將元素固定在屏幕上第9章定位布局兩列定位布局9.2定位的概念9.1實例分析：泡泡潛水俱樂部9.4三列定位布局9.3兩列定位布局兩列布局網(wǎng)頁的邏輯結(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定位布局的常見錯誤#sidebar{width:240px;position:absolute;left:0;top:150px;}#container{760px;position:relative;}containerheadercontentfootersidebar9.2.3定位布局的常見錯誤#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定位布局的常見錯誤#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實例分析：泡泡潛水俱樂部9.4三列定位布局9.3三列定位布局三列布局網(wǎng)頁的邏輯結(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. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論