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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論