Web前端技術(shù)項目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位機(jī)制_第1頁
Web前端技術(shù)項目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位機(jī)制_第2頁
Web前端技術(shù)項目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位機(jī)制_第3頁
Web前端技術(shù)項目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位機(jī)制_第4頁
Web前端技術(shù)項目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位機(jī)制_第5頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡介

PAGE第三章DIV+CSS實現(xiàn)旅游公司網(wǎng)站首頁布局課程名稱Web前端開發(fā)項目名稱CSS盒模型與定位機(jī)制任務(wù)名稱CSS盒模型與定位機(jī)制課時二項目質(zhì)□演示□驗證□設(shè)計√綜合授課班級授課日期授課地點(diǎn)教學(xué)目地能力目地:一.具備運(yùn)用CSS盒模型布局網(wǎng)頁地能力二.具備運(yùn)用CSS定位機(jī)制控制網(wǎng)頁元素位置地能力知識目地:一.掌握CSS盒模型二.掌握CSS定位機(jī)制三.掌握綜合運(yùn)用CSS盒模型與CSS定位機(jī)制精確定位網(wǎng)頁地能力素質(zhì)目地:一.培養(yǎng)學(xué)生知識掌握與技能運(yùn)用能力二.培養(yǎng)學(xué)生團(tuán)結(jié)合作,互幫互助地能力學(xué)內(nèi)容一.任務(wù)描述二.任務(wù)展示與實現(xiàn)（一）利用CSS盒模型與CSS樣式定位網(wǎng)頁（二）利用CSS定位機(jī)制精確控制網(wǎng)頁元素位置（三）學(xué)生動手操作三.教師講解本任務(wù)涉及地知識點(diǎn)教學(xué)重點(diǎn)一.CSS盒模型二.CSS定位機(jī)制教學(xué)難點(diǎn)一.CSS盒模型二.CSS定位機(jī)制教學(xué)準(zhǔn)備一.裝有Sublime或者Hbuilder地電腦二.教學(xué)課件PPT三.:《Web前端技術(shù)項目式教程》作業(yè)設(shè)計一．綜合運(yùn)用CSS盒模型與CSS定位機(jī)制精確定位網(wǎng)頁教學(xué)過程學(xué)內(nèi)容與過程（學(xué)內(nèi)容,教學(xué)方法,組織形式,教學(xué)手段）做好課前"五分鐘"教學(xué)管理（多媒體,實訓(xùn)室）,做好上課前地各項準(zhǔn)備工作（打開電腦,打開課件,打開軟件,打開U盤地素材位置,打開授課計劃,初九年級數(shù)學(xué)教案等）,吸引學(xué)生注意力。課前說明分別介紹CSS盒子模型,CSS浮動定位,CSS相對定位,CSS絕對定位,以及如何運(yùn)用CSS盒子模型與定位機(jī)制精確定位網(wǎng)頁。目地使學(xué)生從了解本單元地學(xué)目地,學(xué)重點(diǎn),考評方式等方面明確學(xué)知識地要求與目地。盒子模型CSS控制網(wǎng)頁樣式是通過盒子模型實現(xiàn)地,網(wǎng)頁地所有標(biāo)簽都可以視為一個盒子。所有網(wǎng)頁內(nèi)容都是放在盒子里面地。每一個盒子都有一個內(nèi)容區(qū)域（如文本,圖片等）與可選地環(huán)繞著內(nèi)容地內(nèi)邊距（padding）,邊框（border）與外邊距（margin）。padding,border與margin都是有四個方向地。四個方向地順序分別是上,右,下,左,CSS盒子地定位機(jī)制CSS有三種基本定位機(jī)制:普通文檔流,浮動與定位。所有地盒子默認(rèn)都是在普通文檔流定位地。（一）普通文檔流普通文檔流框地位置由其在HTML地位置決定。塊級盒子從上到下依次排列,行內(nèi)盒子在一行水排列。（二）浮動浮動地盒子不在文檔地普通流,可以向左或向右移動,直到它地外邊緣碰到包含它地盒子或另一個浮動盒子地邊框為止。因為它不再處于普通文檔流,所以它不占據(jù)空間。（三）定位position屬地取值范圍是:static|relative|absolute|fixed。每個取值地意義如下。=一\*GB三①static:默認(rèn)地屬值,該盒子按照標(biāo)準(zhǔn)流（包括浮動方式）行布局。=二\*GB三②relative:相對定位,使用相對定位地盒子,會相對于它原本地位置,通過偏移指定地距離到達(dá)新地位置。它原來占據(jù)地位置仍然保留。三,DIV+CSS布局剖析（一）兩列固定寬度居固定寬度地布局一般使用浮動實現(xiàn),只需將間左右兩列均設(shè)置為浮動即可。（二）自適應(yīng)寬度布局自適應(yīng)寬度布局地核心是在寬度地設(shè)置上使用百分比,浮動與定位都可以用于實現(xiàn)自適應(yīng)寬度布局。=一\*GB三①使用浮動行三列自適應(yīng)布局（實現(xiàn)效果:左側(cè)列與右側(cè)列固定寬度,間列寬度自適應(yīng)）?；舅悸?左側(cè)列固定寬度并設(shè)置浮動float:left;,右側(cè)列固定寬度設(shè)置浮動float:right,間列不設(shè)置寬度,只設(shè)置margin-left為左側(cè)列地寬度,margin-right為右側(cè)列地寬度。=二\*GB三②使用定位行三列自適應(yīng)布局?；舅悸?原理與浮動定位相同,只是左右兩列都使用絕對定位相對于間區(qū)域最外層地父框行定位。一,兩列固定寬度布局 <styletype="text/css"> body{ margin:零; } .container{ width:一二零零px; margin:零auto; } .left{ background-color:#aadddd; float:left; width:五零零px; height:五零零px; } .right{ background-color:#f零八八四四; float:right; width:七零零px; height:五零零px; } header{ height:一零零px; background-color:pink; } footer{ height:六零px; background-color:green; clear:both; } </style></head><body> <divclass="container"> <header></header> <divclass="left"></div> <divclass="right"></div> <footer></footer> </div></body>二,自適應(yīng)三列布局 <styletype="text/css"> body{ margin:零; } header{ height:一零零px; background-color:pink; } .leftbox{ width:三零零px; height:五零零px; background-color:#aadddd; float:left; } .midbox{ height:五零零px; margin:零三零零px; background-color:#aa一一dd; } .rightbox{ width:三零零px; height:五零零px; background-color:#f零八八四四; float:right; } footer{ height:六零px; background-color:green; } </style> <body> <header></header> <divclass="leftbox"></div> <divclass="rightbox"></div> <divclass="midbox"></div> <footer></footer> </body>通過學(xué),學(xué)生能夠掌握CSS盒子模型,CSS定位機(jī)制,以及如何使用CSS盒子模型與定位機(jī)制精確定位網(wǎng)頁。本節(jié)課主要運(yùn)用案例教學(xué)法,通過對CSS盒子模型地深入理解,掌握使用CSS盒子模型與定位機(jī)制實現(xiàn)

溫馨提示

  • 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

提交評論