Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)12-元素的定位課件_第1頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)12-元素的定位課件_第2頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)12-元素的定位課件_第3頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)12-元素的定位課件_第4頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)12-元素的定位課件_第5頁(yè)
已閱讀5頁(yè)，還剩31頁(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)介

任務(wù)12元素的定位第五單元盒子模型任務(wù)12元素的定位第五單元盒子模型1學(xué)習(xí)目標(biāo)固定定位（fixed）靜態(tài)定位（static）相對(duì)定位（relative）絕對(duì)定位（absolute）掌握學(xué)習(xí)目標(biāo)固定定位（fixed）靜態(tài)定位（static）相對(duì)定2不同定位模式的應(yīng)用場(chǎng)合了解:學(xué)習(xí)目標(biāo)不同定位模式的應(yīng)用場(chǎng)合了解:學(xué)習(xí)目標(biāo)3任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游景點(diǎn)推薦網(wǎng)banner強(qiáng)化訓(xùn)練——制作個(gè)人博客首頁(yè)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游景點(diǎn)推薦網(wǎng)banner強(qiáng)化訓(xùn)練—4知識(shí)準(zhǔn)備1.元素的定位元素的定位：可以精確定義一個(gè)元素的準(zhǔn)確位置（1）定位模式：position屬性static：靜態(tài)定位relative：相對(duì)定位absolute：絕對(duì)定位fixed：固定定位（2）邊偏移：left：左側(cè)偏移量right：右側(cè)偏移量top：頂端偏移量bottom：底部偏移量知識(shí)準(zhǔn)備1.元素的定位元素的定位：可以精確定義一個(gè)元素的準(zhǔn)5知識(shí)準(zhǔn)備2.靜態(tài)定位（static）靜態(tài)定位（static）：網(wǎng)頁(yè)元素默認(rèn)的定位方式，元素按照標(biāo)準(zhǔn)流進(jìn)行布局。不能通過設(shè)置邊偏移屬性left、right、top、bottom值來(lái)改變?cè)氐奈恢?。知識(shí)準(zhǔn)備2.靜態(tài)定位（static）靜態(tài)定位（static6知識(shí)準(zhǔn)備3.相對(duì)定位（relative）相對(duì)定位（relative）：網(wǎng)頁(yè)元素相對(duì)于其在原文檔流的位置進(jìn)行定位，當(dāng)元素設(shè)置為相對(duì)定位“position:relative;”，該元素就會(huì)相對(duì)于其自身的默認(rèn)位置進(jìn)行偏移，但是它在文檔流中的位置仍然保留。知識(shí)準(zhǔn)備3.相對(duì)定位（relative）相對(duì)定位（rela7知識(shí)準(zhǔn)備示例：元素的相對(duì)定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:relative;/*相對(duì)定位*/left:150px;/*距離原位置左邊線150px*/top:100px;/*距離原位置頂部邊線100px*/}</style>知識(shí)準(zhǔn)備示例：元素的相對(duì)定位<styletype="tex8知識(shí)準(zhǔn)備4.絕對(duì)定位（absolute）絕對(duì)定位（absolute）：將元素相對(duì)于距離其最近的、已經(jīng)定位（相對(duì)、絕對(duì)或固定定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。當(dāng)元素設(shè)置為絕對(duì)定位“position:absolute;”，該元素就會(huì)相對(duì)于其父元素或body根元素進(jìn)行偏移，脫離文檔流，它在文檔流中的位置將被其他元素占據(jù)。知識(shí)準(zhǔn)備4.絕對(duì)定位（absolute）絕對(duì)定位（abs9知識(shí)準(zhǔn)備示例：元素的絕對(duì)定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:absolute;/*絕對(duì)定位*/left:150px;/*距離父元素左邊線150px*/top:100px;/*距離父元素頂部邊線100px*/}</style>知識(shí)準(zhǔn)備示例：元素的絕對(duì)定位<styletype="tex10知識(shí)準(zhǔn)備示例：“子絕父相”原則<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{

position:relative;margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}

<body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:absolute;/*絕對(duì)定位*/left:150px;/*距離父元素左邊線150px*/top:100px;/*距離父元素頂部邊線100px*/}</style>知識(shí)準(zhǔn)備示例：“子絕父相”原則<styletype="te11知識(shí)準(zhǔn)備5.固定定位（fixed）固定定位（fixed）：相對(duì)于瀏覽器窗口進(jìn)行定位。元素設(shè)置為固定定位之后，就會(huì)脫離原來(lái)的文檔流進(jìn)行定位，原有的位置將被其他元素占據(jù)。無(wú)論瀏覽器窗口大小如何改變，瀏覽器滾動(dòng)條如何拖動(dòng)，固定定位的元素都將顯示在瀏覽器的固定位置。知識(shí)準(zhǔn)備5.固定定位（fixed）固定定位（fixed）：12知識(shí)準(zhǔn)備6.z-index層疊等級(jí)屬性z-index層疊等級(jí)屬性：定義疊加元素的堆疊順序，其值可以取正整數(shù)、0、負(fù)整數(shù)，默認(rèn)值為0，取值越大，定位元素的位置就越靠上。知識(shí)準(zhǔn)備6.z-index層疊等級(jí)屬性z-index層疊等13實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作旅游景點(diǎn)推薦網(wǎng)banner，網(wǎng)頁(yè)效果如下圖1所示。當(dāng)鼠標(biāo)移動(dòng)到每個(gè)導(dǎo)航選項(xiàng)上時(shí)，超鏈接的樣式將會(huì)發(fā)生變化，效果如圖2所示。制作旅游景點(diǎn)推薦網(wǎng)banner圖1圖2網(wǎng)頁(yè)布局圖實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作旅游景點(diǎn)推薦網(wǎng)b14強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作個(gè)人博客首頁(yè)，網(wǎng)頁(yè)效果如下。制作個(gè)人博客首頁(yè)強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作個(gè)人博客首頁(yè)，網(wǎng)頁(yè)效果如下。制作15任務(wù)小結(jié)01靜態(tài)定位static02相對(duì)定位relative03絕對(duì)定位absolute04固定定位fixed任務(wù)小結(jié)01靜態(tài)定位static02相對(duì)定位relative16課后實(shí)訓(xùn)設(shè)計(jì)新聞列表頁(yè)面，效果如圖所示。課后實(shí)訓(xùn)設(shè)計(jì)新聞列表頁(yè)面，效果如圖所示。17謝謝觀看謝謝觀看18任務(wù)12元素的定位第五單元盒子模型任務(wù)12元素的定位第五單元盒子模型19學(xué)習(xí)目標(biāo)固定定位（fixed）靜態(tài)定位（static）相對(duì)定位（relative）絕對(duì)定位（absolute）掌握學(xué)習(xí)目標(biāo)固定定位（fixed）靜態(tài)定位（static）相對(duì)定20不同定位模式的應(yīng)用場(chǎng)合了解:學(xué)習(xí)目標(biāo)不同定位模式的應(yīng)用場(chǎng)合了解:學(xué)習(xí)目標(biāo)21任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游景點(diǎn)推薦網(wǎng)banner強(qiáng)化訓(xùn)練——制作個(gè)人博客首頁(yè)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游景點(diǎn)推薦網(wǎng)banner強(qiáng)化訓(xùn)練—22知識(shí)準(zhǔn)備1.元素的定位元素的定位：可以精確定義一個(gè)元素的準(zhǔn)確位置（1）定位模式：position屬性static：靜態(tài)定位relative：相對(duì)定位absolute：絕對(duì)定位fixed：固定定位（2）邊偏移：left：左側(cè)偏移量right：右側(cè)偏移量top：頂端偏移量bottom：底部偏移量知識(shí)準(zhǔn)備1.元素的定位元素的定位：可以精確定義一個(gè)元素的準(zhǔn)23知識(shí)準(zhǔn)備2.靜態(tài)定位（static）靜態(tài)定位（static）：網(wǎng)頁(yè)元素默認(rèn)的定位方式，元素按照標(biāo)準(zhǔn)流進(jìn)行布局。不能通過設(shè)置邊偏移屬性left、right、top、bottom值來(lái)改變?cè)氐奈恢?。知識(shí)準(zhǔn)備2.靜態(tài)定位（static）靜態(tài)定位（static24知識(shí)準(zhǔn)備3.相對(duì)定位（relative）相對(duì)定位（relative）：網(wǎng)頁(yè)元素相對(duì)于其在原文檔流的位置進(jìn)行定位，當(dāng)元素設(shè)置為相對(duì)定位“position:relative;”，該元素就會(huì)相對(duì)于其自身的默認(rèn)位置進(jìn)行偏移，但是它在文檔流中的位置仍然保留。知識(shí)準(zhǔn)備3.相對(duì)定位（relative）相對(duì)定位（rela25知識(shí)準(zhǔn)備示例：元素的相對(duì)定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:relative;/*相對(duì)定位*/left:150px;/*距離原位置左邊線150px*/top:100px;/*距離原位置頂部邊線100px*/}</style>知識(shí)準(zhǔn)備示例：元素的相對(duì)定位<styletype="tex26知識(shí)準(zhǔn)備4.絕對(duì)定位（absolute）絕對(duì)定位（absolute）：將元素相對(duì)于距離其最近的、已經(jīng)定位（相對(duì)、絕對(duì)或固定定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。當(dāng)元素設(shè)置為絕對(duì)定位“position:absolute;”，該元素就會(huì)相對(duì)于其父元素或body根元素進(jìn)行偏移，脫離文檔流，它在文檔流中的位置將被其他元素占據(jù)。知識(shí)準(zhǔn)備4.絕對(duì)定位（absolute）絕對(duì)定位（abs27知識(shí)準(zhǔn)備示例：元素的絕對(duì)定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:absolute;/*絕對(duì)定位*/left:150px;/*距離父元素左邊線150px*/top:100px;/*距離父元素頂部邊線100px*/}</style>知識(shí)準(zhǔn)備示例：元素的絕對(duì)定位<styletype="tex28知識(shí)準(zhǔn)備示例：“子絕父相”原則<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{

position:relative;margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}

<body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</di

溫馨提示

  • 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)論