《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第16課 元素的浮動與定位_第1頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第16課 元素的浮動與定位_第2頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第16課 元素的浮動與定位_第3頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第16課 元素的浮動與定位_第4頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第16課 元素的浮動與定位_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1621第1621第課元素的浮動與定位的基基本本PAGE1216211621元素的浮動與定位第課PAGE1316212元素的浮動與定位第16212元素的浮動與定位第課PAGE1

課題元素的浮動與定位課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）了解浮動屬性與清除浮動的方法（2）掌握通過定位屬性、相對定位、絕對定位、固定定位對元素進(jìn)行定位的方法（3）掌握設(shè)置元素層疊等級屬性的方法思政育人目標(biāo)：通過對本節(jié)課的學(xué)習(xí)，培養(yǎng)學(xué)生舉一反三的能力，使學(xué)生學(xué)會通過發(fā)散式的思維方式尋找解決問題的辦法，幫助學(xué)生在模仿中提高創(chuàng)新能力，增強創(chuàng)新意識教學(xué)重難點教學(xué)重點：掌握CSS3設(shè)置元素浮動與定位元素的方法教學(xué)難點：使用CSS3語言在HTML5中浮動與定位元素教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、手機、平板教學(xué)設(shè)計第1節(jié)課：考勤（2min）→導(dǎo)入新知（4min）→知識講解（24min）→課堂練習(xí)（15min）第2節(jié)課：類比分析（4min）→知識講解（21min）→課堂練習(xí)（14min）→課堂小結(jié)（4min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學(xué)生】班干部報請假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】概述實現(xiàn)元素浮動與定位的原因，引出新知識點網(wǎng)頁中的元素默認(rèn)按照從左到右、從上到下的標(biāo)準(zhǔn)文檔流順序排列，如果想要使元素脫離原來的文檔流，就需要用到浮動或定位屬性【學(xué)生】聆聽、思考通過對新知識定義的概述，讓學(xué)生主動思考如何實現(xiàn)元素的浮動與定位，激發(fā)學(xué)生的求知欲知識講解

（24min）【教師】講述設(shè)置元素浮動屬性的方法浮動屬性浮動屬性在網(wǎng)頁布局中非常重要，設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)文檔流的排列順序，移動到父元素中的指定位置。浮動屬性常用于構(gòu)建頁面布局。在CSS3中，使用float屬性設(shè)置元素浮動，具體格式為：float:none|left|right;其中，none是默認(rèn)值，表示元素不浮動；left表示元素向左浮動；right表示元素向右浮動?！窘處煛垦菔尽纠?-8】操作流程，實現(xiàn)圖8-14的效果為圖像元素設(shè)置浮動屬性，頁面效果如圖8-14所示。設(shè)置浮動屬性設(shè)置浮動屬性圖8-14為圖像元素設(shè)置浮動屬性前后頁面效果的對比（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建圖文內(nèi)容的結(jié)構(gòu)。<div> <imgsrc="images/libai.jpg"alt="李白"/> <p><strong>李白</strong>，字太白，號青蓮居士，又號“謫仙人”，唐代偉大的浪漫主義詩人，被后人譽為“詩仙”，與杜甫并稱為“李杜”，為了與另兩位詩人李商隱與杜牧即“小李杜”區(qū)別，杜甫與李白又合稱“大李杜”。</p> <p>據(jù)《新唐書》記載，李白為興圣皇帝九世孫，與李唐諸王同宗。其人爽朗大方，愛飲酒作詩，喜交友。</p></div>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置圖文內(nèi)容的樣式，使圖像元素向左浮動。div{width:600px;height:170px;padding:10px;margin:10px;border:solid2pxblack;}/*設(shè)置父元素的寬度、高度、內(nèi)外邊距與邊框*/img{padding:10px;float:left;}/*設(shè)置圖像元素的內(nèi)邊距，向左浮動*/p{text-indent:2em;}/*設(shè)置段落元素的縮進(jìn)*/【教師】講述清除元素浮動的方法清除浮動設(shè)置了浮動屬性的元素在脫離標(biāo)準(zhǔn)文檔流后，會影響到附近的兄弟元素。如果不想使某元素因受到浮動兄弟元素的影響而改變位置，可以設(shè)置clear屬性清除該元素前浮動元素帶來的影響，具體格式為：clear:none|left|right|both;其中，none是默認(rèn)值，表示允許元素前有浮動元素；left表示不允許元素前有左浮動元素；right表示不允許元素前有右浮動元素；both表示不允許元素前有浮動元素，無論它是左浮動還是右浮動?！窘處煛垦菔尽纠?-9】操作流程，實現(xiàn)圖8-16的效果清除浮動屬性的應(yīng)用，頁面效果如圖8-16所示。受到元素前左浮動元素的影響清除元素前左浮動元素的影響受到元素前左浮動元素的影響清除元素前左浮動元素的影響圖8-16清除浮動的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼（省略內(nèi)容見圖8-16），構(gòu)建圖文內(nèi)容的結(jié)構(gòu)。<div> <imgsrc="images/dbes_1.jpg"alt="大報恩寺琉璃塔拱門"/> <imgsrc="images/dbes_2.jpg"alt="大報恩寺琉璃塔拱門"/> <imgsrc="images/dbes_3.jpg"alt="大報恩寺琉璃塔拱門"/> <p>大報恩寺琉璃塔拱門是南京大報恩寺的重要建筑構(gòu)件，大報恩寺是明代皇家寺廟建筑的代表，寺中的琉璃塔，被譽為中古世紀(jì)七大奇觀之一?！?lt;/p> <imgsrc="images/ysth_1.jpg"alt="驛使圖畫像磚"/> <imgsrc="images/ysth_2.jpg"alt="驛使圖畫像磚"/> <imgsrc="images/ysth_3.jpg"alt="驛使圖畫像磚"/> <pclass="p1">郵驛是中國傳統(tǒng)通信組織形式，現(xiàn)代郵政的前身之一?！?lt;/p></div>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，清除第二個p元素前左浮動元素的影響。div{width:500px;height:350px;padding:10px;margin:10px;border:solid2px#7f7f72;background-color:beige;}/*設(shè)置父元素的寬度、高度、內(nèi)外邊距、邊框與背景顏色*/img{width:130px;height:80px;padding:10px;float:left;}/*設(shè)置圖像元素的寬度、高度與內(nèi)邊距，并向左浮動*/p{text-indent:2em;}/*設(shè)置段落元素的縮進(jìn)*/.p1{clear:left;}/*為第二個段落元素清除其前左浮動元素的影響*/【學(xué)生】聆聽、思考、理解【教師】講解通過定位屬性對元素進(jìn)行定位的方法定位屬性使用浮動屬性能夠?qū)崿F(xiàn)一定的布局效果，但不能對元素的位置進(jìn)行精確控制。在CSS3中，可以通過定位屬性對元素進(jìn)行精確定位。1．定位模式在CSS3中，使用position屬性設(shè)置元素的定位模式，具體格式為：position:static|relative|absolute|fixed;各屬性值的說明如下。（1）static。默認(rèn)值，靜態(tài)定位模式，它表示元素按照標(biāo)準(zhǔn)文檔流的位置顯示。（2）relative。相對定位模式，它表示將元素以其在標(biāo)準(zhǔn)文檔流中的原位置為基準(zhǔn)進(jìn)行定位。（3）absolute。絕對定位模式，它表示將元素以上一個已定位父元素的位置為基準(zhǔn)進(jìn)行定位。（4）fixed。固定定位模式，它表示以瀏覽器窗口的位置為基準(zhǔn)對元素進(jìn)行定位。2．偏移量定位模式用于設(shè)置元素以哪種方式定位，確定元素的位置還需要設(shè)置偏移量屬性，它們的說明如下。（1）top。頂部偏移量，設(shè)置元素與參照元素上邊線的距離。（2）right。右側(cè)偏移量，設(shè)置元素與參照元素右邊線的距離。（3）bottom。底部偏移量，設(shè)置元素與參照元素下邊線的距離。（4）left。左側(cè)偏移量，設(shè)置元素與參照元素左邊線的距離。它們的屬性值為數(shù)值與單位，也可以是百分比?！窘處煛恐v解通過相對定位對元素進(jìn)行定位的方法相對定位定位模式為相對定位的元素將以其在標(biāo)準(zhǔn)文檔流中的原位置為基準(zhǔn)，根據(jù)所設(shè)置的偏移量向?qū)?yīng)方向移動一定距離，并且保留它在標(biāo)準(zhǔn)文檔流中的位置。在設(shè)置偏移量時，上下與左右方向只需設(shè)置一個屬性值。例如，設(shè)置某元素相對定位模式下的左側(cè)偏移量為10px，則其右側(cè)偏移量自動變?yōu)?10px。【教師】演示【例8-8】操作流程，實現(xiàn)圖8-14的效果設(shè)置元素的相對定位，頁面效果如圖8-18所示。相對元素在原文檔流的位置進(jìn)行定位，并保留其原位置相對元素在原文檔流的位置進(jìn)行定位，并保留其原位置圖8-18相對定位的頁面效果【學(xué)生】聆聽、思考、理解【教師】巡視課堂，督促學(xué)生復(fù)習(xí)課堂內(nèi)容【學(xué)生】回顧課堂內(nèi)容，提出疑問【教師】回答學(xué)生疑問通過講解知識點，讓學(xué)生進(jìn)一步了解元素浮動與定位的處理方法課堂練習(xí)

（15min）【教師】布置課堂練習(xí)內(nèi)容布置課堂練習(xí)內(nèi)容設(shè)置div元素的高度、內(nèi)外邊距、邊框與背景顏色，并向左浮動,設(shè)置第二個div元素的定位模式為相對定位，頂部偏移量為30px，左側(cè)偏移量為80px統(tǒng)計小組得分和回答時間【學(xué)生】閱讀課堂練習(xí)題目【教師】指導(dǎo)學(xué)生分析題目創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，設(shè)置第二個div元素的相對定位。<style> .fd_l{height:30px;padding:10px;margin:10px; .p1{position:relative;top:30px;left:80px;}</style>……<body> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lp1"style="width:80px;">box2</div> <divclass="fd_l"style="width:100px;">box3</div></body>【學(xué)生】完成課堂練習(xí)【教師】公布小組得分和回答時間【學(xué)生】查看小組得分和排名【教師】總結(jié)學(xué)習(xí)心得通過課堂練習(xí)的完成，加深學(xué)生對本節(jié)課內(nèi)容的理解第二節(jié)課類比分析

（4min）【教師】類比分析生活中案例，提出問題，引出新的知識點所謂相對定位，就是以某一個物體為參照物，根據(jù)參照物的改變，它的位置信息也會發(fā)生變化，而絕對定位則是在確定的坐標(biāo)系下，物體所處的位置，擁有確定的坐標(biāo)，固定定位則是將物體固定在一個的位置，不會隨坐標(biāo)系的變化而變化【學(xué)生】聆聽、思考、理解通過對生活中案例的類比分析，激發(fā)學(xué)生對元素浮動與定位的探索欲預(yù)備知識

（21min）【教師】講解通過絕對定位對元素進(jìn)行定位的方法絕對定位定位模式為絕對定位的元素將以最近的已定位（相對、絕對或固定定位）父元素的位置為基準(zhǔn)，根據(jù)所設(shè)置的偏移量向?qū)?yīng)方向移動一定距離。如果所有父元素都未定位，則以瀏覽器窗口為基準(zhǔn)?！窘處煛垦菔尽纠?-11】操作流程，實現(xiàn)圖8-19的效果設(shè)置元素的絕對定位，頁面效果如圖8-19所示。以父元素為基準(zhǔn)的絕對定位以瀏覽器窗口為基準(zhǔn)的絕對定位以父元素為基準(zhǔn)的絕對定位以瀏覽器窗口為基準(zhǔn)的絕對定位圖8-19絕對定位的頁面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，設(shè)置父元素與其第二個子元素的絕對定位。<style>/*省略.fd_1{…}，具體代碼同例8-10*/ .d1{position:absolute;top:50px;left:50px; border:solid2px#000000;overflow:hidden;}/*設(shè)置父元素的定位模式為絕對定位，頂部偏移量和左側(cè)偏移量為50px，添加邊框，隱藏溢出部分*/ .p1{position:absolute;top:30px;left:20px;}/*設(shè)置第二個子元素的定位模式為絕對定位，頂部偏移量為30px，左側(cè)偏移量為20px*/</style>……<body> <divclass="d1"> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lp1"style="width:80px;">box2</div> <divclass="fd_l"style="width:100px;">box3</div> </div></body>【教師】講解通過固定定位對元素進(jìn)行定位的方法固定定位固定定位是絕對定位的特殊情況，即全部以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。為元素設(shè)置固定定位后，該元素脫離標(biāo)準(zhǔn)文檔流，始終顯示在瀏覽器窗口的固定位置，不隨瀏覽器窗口大小變化或滾動條移動而改變?！窘處煛垦菔尽纠?-12】的操作流程，實現(xiàn)圖8-20的效果設(shè)置元素的固定定位，頁面效果如圖8-20所示。元素位置相對于瀏覽器窗口固定元素位置相對于瀏覽器窗口固定圖8-20固定定位的頁面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，設(shè)置第二個div元素的固定定位。<style>/*省略.fd_1{…}，具體代碼同例8-10*/ .p1{position:fixed;right:30px;top:20px;}/*設(shè)置第二個div元素的定位模式為固定定位，右側(cè)偏移量為30px，頂部偏移量為20px*/</style>……<body> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lp1"style="width:80px;">box2</div> <divclass="fd_l"style="width:100px;">box3</div></body>【學(xué)生】觀看代碼，思考【教師】講解參考代碼【學(xué)生】聆聽、思考、記錄【教師】講解設(shè)置元素層疊等級屬性的方法層疊等級屬性對元素進(jìn)行定位時，可能會出現(xiàn)元素重疊的狀況，默認(rèn)情況下，標(biāo)準(zhǔn)文檔流中越靠后的元素顯示在越靠上的層級。在CSS3中，可以使用z-index屬性設(shè)置元素的層疊等級，調(diào)整定位元素的顯示層級。它的值可以為負(fù)數(shù)、正數(shù)和0，默認(rèn)值為0，屬性值越大，定位元素將顯示在越靠上的層級（屬性值相同則以標(biāo)準(zhǔn)文檔流為基準(zhǔn)，越靠后的元素顯示在越靠上的層級。【教師】演示【例8-13】操作流程，實現(xiàn)圖8-21的效果設(shè)置元素的層疊等級，頁面效果如圖8-21所示。未設(shè)置層疊等級根據(jù)設(shè)置的層疊等級顯示未設(shè)置層疊等級根據(jù)設(shè)置的層疊等級顯示圖8-21設(shè)置元素層疊等級的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建div元素的結(jié)構(gòu)。<divclass="d1"> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lf1"style="width:80px;">box2</div> <divclass="fd_lf2"style="width:100px;">box3</div></div><divclass="d1"> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lf1z1"style="width:80px;">box2</div> <divclass="fd_lf2z2"style="width:100px;">box3</div></div>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置第二個容器元素中子元素的層疊等級。/*省略.fd_1{…}，具體代碼同例8-10*/.f1{position:absolute;left:70px;}.f2{position:absolute;left:150px;}/*設(shè)置元素的絕對定位，使它們重疊*/.z1{z-index:-1;}.z2{z-index:-2;}/*設(shè)置元素的層疊等級*/【學(xué)生】聆聽、思考、理解通過講解知識點，讓學(xué)生進(jìn)一步了解元素浮動與定位的使用方法課堂練習(xí)

（15min）【教師】布置課堂練習(xí)內(nèi)容完善“網(wǎng)上書店”頁面【學(xué)生】查看題目，理解【教師】進(jìn)行問題分析本課堂練習(xí)實施將為“網(wǎng)上書店”頁面添加側(cè)邊欄與右側(cè)導(dǎo)航，并設(shè)置網(wǎng)頁整體結(jié)構(gòu)【學(xué)生】完成課堂練習(xí)【教師】演示參考代碼（1）在樣式文檔中添加以下代碼，設(shè)置右側(cè)導(dǎo)航的樣式#main_f{width:40px;position:fixed;right:0px;top:50%;}/*設(shè)置右側(cè)導(dǎo)航的寬度、固定定位的右側(cè)與頂部偏移量*/#main_fp{background-color:#606184;font-weight:bold;border-radius:5px;color:#ffffff;padding:5px05px5px;}/*設(shè)置右側(cè)導(dǎo)航中文本的背景顏色、字體加粗、圓角、文本顏色與內(nèi)邊距*/#main_fa{text-decoration:none;}/*去除右側(cè)導(dǎo)航中超鏈接的下劃線*/（2）繼續(xù)在樣式文檔中添加以下代碼，設(shè)置整體布局#main_n{width:1200px;margin:0pxauto;display:block;}/*設(shè)置中心區(qū)域的寬度與外邊距，將其轉(zhuǎn)化為塊級元素（設(shè)置該屬性是為了兼容個別版本的IE瀏覽器）*/#aside_n{width:23%;margin-left:0.5%;float:right;}/*設(shè)置側(cè)邊欄區(qū)域的寬度為中心區(qū)域的23%、左外邊距為0.5%，并向右浮動*/#main_left{width:75%;float:left;}/*設(shè)置主體內(nèi)容的寬度為中心區(qū)域的75%，并向左浮動*/#main_left>div{margin:0;}/*去除主體內(nèi)容中div元素的外邊距*/.clear{clear:both;}/*清除空的div元素前的浮動元素的影響（解決高度塌陷問題）*/（3）繼續(xù)在樣式文檔中添加以下代碼，設(shè)置側(cè)邊欄的樣式.as_dw,.as_sd{border:solid1px#d4d4d4;padding-bottom:20px;background-color:#ffffff;border-radius:8px;margin-top:20px;}/*設(shè)置兩個側(cè)邊欄的邊框、下內(nèi)邊距、背景顏色、圓角與上外邊距*/#aside_nh3{text-indent:3em;color:#5f556b;border-bottom:solid1px#cdd1ff;}/*設(shè)置側(cè)邊欄標(biāo)題的縮進(jìn)、文本顏色與下邊框*/.as_dwulli{display:inline-block;width:100%;border-bottom:dotted1px#cccccc;text-indent:1em;margin:5pxauto;list-style-type:none;}/*將短文推薦側(cè)邊欄中的列表項轉(zhuǎn)換為行內(nèi)塊元素，設(shè)置其寬度、下邊框、縮進(jìn)與外邊距，去除列表樣式*/.as_dwullia{display:block;color:#666666;font-size:0.95em;margin-bottom:5px;text-decoration:none;}/*將短文推薦側(cè)邊欄列表項中的超鏈接轉(zhuǎn)換為塊級元素，設(shè)置其文本顏色、字號與下外邊距，去除下劃線*/.as_dwullia:hover{color:#b8b8b8;}/*設(shè)置鼠標(biāo)指針移動至短文推薦側(cè)邊欄中超鏈接上時的文本顏色*//*設(shè)置熱門書單側(cè)邊欄中列表項的內(nèi)邊距，隱藏溢出部分并去除列表樣式*/.as_sdimg{display:block;width:100px;height:50px;border-radius:5px;padding-right:10px;float:left;}/*將熱門書單側(cè)邊欄中的圖像轉(zhuǎn)換為塊級元素，設(shè)置其寬度、高度、圓角與右內(nèi)邊距，并向左浮動*/.as_sda{color:#66687f;font-size:0.8em;text-indent:0.5em;}/*設(shè)置熱門書單側(cè)邊欄中超鏈接的文本顏色、字號與縮進(jìn)*/.as_sda:hover{color:#959595;}/*設(shè)置鼠標(biāo)指針移動至熱門書單側(cè)邊欄中超鏈接上時的文本顏色*/【學(xué)生】對比參考代碼，修改內(nèi)容【教師】講解參考代碼【學(xué)生】聆聽、思考、記錄利用練習(xí)法，培養(yǎng)出學(xué)生對元素浮動與定位的使用經(jīng)驗，強化學(xué)生利用元素浮動與定位解決實際問題的能力課堂小結(jié)

（4min）【教師】簡要總結(jié)本章的知識要點本節(jié)課學(xué)習(xí)了浮動屬性與清除浮動的方法、通過定位屬性，相對定位、絕對定位、固定定位對元素進(jì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

提交評論