《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第10-24次課：定位與浮動(dòng)- 實(shí)驗(yàn)8 登錄與注冊(cè)表單_第1頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第10-24次課：定位與浮動(dòng)- 實(shí)驗(yàn)8 登錄與注冊(cè)表單_第2頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第10-24次課：定位與浮動(dòng)- 實(shí)驗(yàn)8 登錄與注冊(cè)表單_第3頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第10-24次課：定位與浮動(dòng)- 實(shí)驗(yàn)8 登錄與注冊(cè)表單_第4頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第10-24次課：定位與浮動(dòng)- 實(shí)驗(yàn)8 登錄與注冊(cè)表單_第5頁
已閱讀5頁，還剩162頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

PAGE16PAGEXXX學(xué)院教案二0二～二0二學(xué)年第學(xué)期課程名稱課程類別￡公共基礎(chǔ)課￡大類平臺(tái)課￡通識(shí)課R專業(yè)課￡實(shí)驗(yàn)課￡集中實(shí)踐課課程性質(zhì)R必修□選修授課專業(yè)及班級(jí)任課教師系（教研室）主教材信息（教材名稱、出版社及出版時(shí)間）Web前端開發(fā)(HTML5+CSS3+JavaScript)嚴(yán)健武主編中國(guó)鐵道出版社2024年8月出版總學(xué)時(shí)起始周理論課時(shí)數(shù)實(shí)驗(yàn)課時(shí)數(shù)習(xí)題課時(shí)數(shù)機(jī)動(dòng)48321600W7第10次課：定位與浮動(dòng)第次課10課題定位與浮動(dòng)教學(xué)目標(biāo)與要求：掌握和理解位置和定位屬性，能夠?qū)⑽恢脤傩杂糜陧撁娌季帧Ｊ谡n類型(請(qǐng)打√)：理論課R討論課□實(shí)驗(yàn)課□習(xí)題課□上機(jī)□輔導(dǎo)□其他□教學(xué)重點(diǎn)：相對(duì)定位絕對(duì)定位固定定位教學(xué)難點(diǎn)：相對(duì)定位和絕對(duì)定位的應(yīng)用教學(xué)方法和手段：教學(xué)方法：課堂講授、實(shí)例演示與實(shí)操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(jì)(可續(xù)頁)：教學(xué)內(nèi)容主要包括：1.相對(duì)定位；2.絕對(duì)定位；3.固定定位；4.粘性定位。1相對(duì)定位相對(duì)定位是指當(dāng)元素的位置屬性position取值為relative時(shí)，可以通過改變其left、top、right、bottom四個(gè)定位屬性來改變其默認(rèn)位置。在定位屬性中，left和top指離原來位置左上角距離，而right和bottom指離右下角的距離。如果同時(shí)設(shè)置left、right，則right屬性無效；同樣，如果同時(shí)設(shè)置top和bottom，則bottom無效。相對(duì)定位的元素依然占據(jù)原來的空間，不影響其前、后的元素的布局；相對(duì)位置屬性一般不單獨(dú)使用，而是作為其子元素在進(jìn)行絕對(duì)定位時(shí)的參考位置。演示與講解理解相對(duì)位置的特性圖9.1（a）是三個(gè)寬度、高度分別為60px、40px的div，位置屬性取默認(rèn)值；如果改變div2的位置屬性為相對(duì)定位，并使其left、top屬性分別為20px和-20px，那么它將相對(duì)其左上角坐標(biāo)向左偏移20px，向上偏移20px，如圖9.1（b）所示。圖9.1（a）默認(rèn)位置圖9.1（b）相對(duì)位置圖9.1（b）效果的實(shí)現(xiàn)代碼如下：<!DOCTYPEhtml><html><body><div>DIV1</div><divclass="rela">DIV2</div><div>DIV3</div></body></html><style>div{border:1pxdottedgray;width:60px;height:40px;}.rela{position:relative;left:20px;top:-20px;}</style>代碼說明：行3~6：頁面添加3個(gè)div，其中DIV2應(yīng)用了樣式類rela。行10~14：使用標(biāo)記選擇器，使3個(gè)div具有相同的高度、寬度以及虛線邊框。注意，在調(diào)試階段為了能看到效果，通常會(huì)為元素加上邊框或背景色。行15~19：聲明樣式類rela。首先設(shè)置位置屬性為relative，這使得元素可以改變位置；left、top屬性表示相對(duì)元素原來的位置（0，0），向左、向上偏移20px。如果兩者都取正值，表示向左、向下偏移；如果都取負(fù)值，表示向右、向上偏移。2絕對(duì)定位絕對(duì)定位是指當(dāng)元素的位置屬性position為absolute時(shí)，可以通過改變其left、top、right和bottom屬性來實(shí)現(xiàn)重新定位。絕對(duì)定位是相對(duì)具有非默認(rèn)位置的父元素進(jìn)行的定位。所謂非默認(rèn)位置，是指position的值不是默認(rèn)值（static）,可以是相對(duì)位置、絕對(duì)位置，或下面介紹的固定位置等。如果逐級(jí)向上所有的父元素都沒有設(shè)置位置屬性，絕對(duì)位置的元素將相對(duì)頁面左上角（body{left:0;top:0;}）進(jìn)行定位。特征：元素脫離了原來的位置，不再占用原來空間，其后續(xù)元素將占有其空出來的空間；可以通過改變定位屬性（left、top、right和bottom）來重新定位，新位置不影響其他元素的布局；如果同時(shí)改變left、right，或者top、bottom，那么元素的對(duì)應(yīng)的寬度或高度將自動(dòng)改變，這點(diǎn)與相對(duì)位置屬性不同；具有絕對(duì)位置的元素（塊元素或行內(nèi)元素），將具有行內(nèi)塊元素的特征，即寬度、高度默認(rèn)由子元素大小決定，也可以改變。演示與講解理解絕對(duì)位置的特性圖9.2（a）是一個(gè)具有相對(duì)位置屬性的父元素div（虛線區(qū)域），它包含三個(gè)寬度、高度均為40px的子元素div，且位置屬性取默認(rèn)值；如果改變DIV2的位置屬性為絕對(duì)位置，并使其left、top屬性分別為120px和0px，那么它將相對(duì)父元素原點(diǎn)（left:0；top:0）進(jìn)行重新定位，并且不再占用原來的空間，當(dāng)然它也不會(huì)占用頁面其他元素的空間，就像漂浮在頁面上，如圖9.2（b）所示。圖9.2（a）默認(rèn)位置圖9.2（b）絕對(duì)位置圖9.2（b）實(shí)現(xiàn)的代碼如下：<!DOCTYPEhtml><html><body><divclass="container"><div>DIV1</div><divclass="ab">DIV2</div><div>DIV3</div></div></body></html><style>*{box-sizing:border-box;}.container{width:100px;padding:10px;border:1pxdottedgray;/*為子元素定位作為參考元素*/position:relative;}.containerdiv{width:40px;height:40px;border:1pxdottedgray;}.ab{position:absolute;left:120px;top:0;}</style>代碼說明：行4~8：在div容器元素中包含3個(gè)div子元素。行12~14：為了便于觀察，使用所全局選擇器將所有的元素都設(shè)置為邊框盒子模型（border-box）,即寬度和高度包含邊框和內(nèi)邊距。行15~21：聲明父元素的樣式，使其在頁面中顯示出來；其中行20設(shè)置了父元素的位置屬性為相對(duì)位置，主要目的是使具有絕對(duì)位置屬性的子元素相對(duì)其左上角（0,0）為參考原點(diǎn)，進(jìn)行重新定位。行22~26：使用后代選擇器為所有div子元素聲明樣式，這里聲明了寬度、高度以及邊框，目的是讓讀者看清楚元素占用的空間。行27~30：為子元素DIV2聲明類樣式，位置為絕對(duì)位置。left:120px表示以具有相對(duì)位置的父元素的left為參考點(diǎn)，向左偏移120px；top:0表示離父元素頂部為0，即對(duì)齊父元素頂部，注意，由于父元素有邊框，DIV2與其頂部有1px的距離，非完全對(duì)齊。從圖9.2（b）可以看出，此時(shí)DIV2不再占用原來的空間，也不會(huì)影響其他元素（假如新位置有其他元素）的位置，就像浮動(dòng)在頁面，而后面的元素將填補(bǔ)其空出的空間。演示與講解購(gòu)物車信息提示欄實(shí)現(xiàn)。參考京東商城購(gòu)物車信息提示欄，我們結(jié)合前面介紹的樣式屬性，同時(shí)借助使用相對(duì)位置和絕對(duì)位置來模擬實(shí)現(xiàn)圖9.3（a）和圖9.3（b）所示的效果。圖9.3（a）購(gòu)物車圖9.3（b）鼠標(biāo)懸停時(shí)通常，頁面局部?jī)?nèi)容我們都放在一個(gè)容器（父元素）中，這樣我們?cè)O(shè)計(jì)好局部?jī)?nèi)容后，可以很方便的將其整體移植到其他容器中作為子元素使用。根據(jù)圖9.3（a）和圖9.3（b）的運(yùn)行效果，我們使用一個(gè)將整體容器來包含兩部分：正常顯示區(qū)域和鼠標(biāo)懸停時(shí)顯示的下拉區(qū)域，為此我們將其實(shí)現(xiàn)劃分為如圖9.4（a）和圖9.4（b）所示的結(jié)構(gòu)。正常顯示區(qū)域結(jié)構(gòu)如圖9.4（a）所示，其中cart-container為整體容器，cart為正常顯示區(qū)域。cart包含圖標(biāo)icon-block和鏈接a，兩者行內(nèi)水平、垂直居中對(duì)齊。而顯示購(gòu)物數(shù)字的num相對(duì)icon-block作為子元素使用絕對(duì)定位將在其位于右上角。圖9.4（a）顯示區(qū)域結(jié)構(gòu)示意圖圖9.4（b）下拉區(qū)域結(jié)構(gòu)示意圖下拉顯示區(qū)域結(jié)構(gòu)如圖9.4（b）所示，容器cart-info相對(duì)整體容器cart-container絕對(duì)定位，包含兩個(gè)水平和垂直對(duì)齊的行內(nèi)元素：img和文本。根據(jù)如上的結(jié)構(gòu)分析，我們可以得到如下的HTML內(nèi)容：<divclass="cart-container"><!--1.cart：行內(nèi)塊子元素--><divclass="cart"><!--圖標(biāo)和數(shù)字--><divclass="icon-block"><spanclass="num">10</span></div><ahref="#">我的購(gòu)物車</a></div><!--2.下拉信息--><divclass="cart-info"><imgsrc="./images/cart-empty.png"/>購(gòu)物車中還沒有商品，趕緊選購(gòu)吧！</div></div></body>以下是具體的樣式實(shí)現(xiàn)：（1）全局樣式和整體容器cart-container*{box-sizing:border-box;font-size:12px;}a{text-decoration:none;color:red}.cart-container{position:relative;width:160px;height:40px;border:1pxsolid#999;}代碼說明：行1：設(shè)置所有元素使用邊框盒子模型，便于計(jì)算；同時(shí)使用12px字體大小。行2：去掉鏈接所有的下劃線。行3~7：整體容器樣式，固定寬度和高度，加上邊框。其中行4是為將來顯示下拉區(qū)域作為定位參考。（2）顯示區(qū)域cartcart容器元素包含兩個(gè)子元素：具有圖片背景的icon-block塊元素和鏈接a，為使他們?cè)谌萜髦兴骄又?，將icon-block轉(zhuǎn)換為行內(nèi)塊元素，同時(shí)使cart容器高度和行高一致，這樣icon-block和鏈接a將實(shí)現(xiàn)水平并垂直居中；此外，數(shù)字num塊元素作為icon-block的子元素，使用絕對(duì)定位使用位于右上角。具體CSS樣式如下：.cart{height:38px;line-height:38px;color:red;}.icon-block{display:inline-block;width:20px;height:20px;margin:020px;vertical-align:middle;/*為數(shù)字子元素參考來定位*/position:relative;/*背景圖*/background-image:url('./images/cart.png');background-repeat:no-repeat;background-position:center;background-size:16px;}/*相對(duì)容器icon定位*/.icon-block>.num{position:absolute;/*右上角，偏移一半*/right:-8px;top:-8px;/*文本完全居中*/width:16px;height:16px;line-height:16px;text-align:center;/*圓形、顏色*/border-radius:50%;background-color:red;color:white;}代碼說明：行1~5：使容器元素cart得行內(nèi)元素垂直居中顯示。行6~20：將圖片背景的塊元素icon-block轉(zhuǎn)換為行內(nèi)塊元素，目的是與鏈接水平排列。其中行11使其與鏈接垂直居中對(duì)齊；由于包含子元素num，需要相對(duì)icon-block位于左上角，因此在行13設(shè)置了相對(duì)位置屬性；行15~18是讓購(gòu)物車圖片居中顯示在icon-block中間，且大小與其相同。行21~35：數(shù)字num相對(duì)icon-block右上角實(shí)現(xiàn)絕對(duì)定位。其中行24、25偏離右上角一定距離；行27~30，使數(shù)字在num中水平、垂直居中；行32使num成為一個(gè)圓。（3）下拉區(qū)域cart-info下拉區(qū)域相對(duì)整體容器cart-continer來定位，左邊對(duì)齊整體容器，并設(shè)置合適寬度和高度。/*相對(duì)cart-container定位，固定寬度*/.cart-info{position:absolute;left:-1px;width:300px;top:100%;height:80px;padding:10px;/*垂直居中，有10px上下間距*/line-height:60px;border:1pxsolid#999;display:none;}.cart-info>img{vertical-align:middle;}這里需要注意，下拉區(qū)域cart-info是整體容器cart-continer的子元素，cart-continer有1px邊框，為了使兩者得左邊框?qū)R，行38使cart-info向左偏離1px；同時(shí)由于cart-info有10px上下內(nèi)邊距，因此其可用空間高度為60px，為使用行內(nèi)元素垂直居中對(duì)齊，行高在這里應(yīng)該設(shè)置為可用空間的高度，因此行43應(yīng)該設(shè)置60px而不是80px；行45使下拉區(qū)域初始不顯示。（4）懸停效果當(dāng)鼠標(biāo)懸停在整體容器cart-container時(shí)，顯示購(gòu)物車信息區(qū)域cart-info，同時(shí)讓整體容器的下邊框消失，讓cart-info和cart-continer邊框線連貫起來。實(shí)現(xiàn)這種效果的基本思路是，使用偽類將一個(gè)絕對(duì)定位、與背景色相同的1px邊框的的div元素，插入到整體容器底部，遮擋其下邊框線。具體樣式如下：.cart-container:hover::after{content:"";display:block;box-sizing:border-box;position:absolute;z-index:1000;left:0;width:100%;bottom:-1px;border:1pxsolidwhite;}.cart-container:hover.cart-info{display:block;}代碼說明：行4：使用偽類添加的樣式，添加的元素默認(rèn)是內(nèi)容盒子（不受全局選擇器聲明影響），這里需要調(diào)整為邊框盒子，否則在當(dāng)邊框線為100%寬度時(shí)，左、右邊會(huì)多出1px空白點(diǎn)，使得邊框線在連接處斷開、不連貫，這點(diǎn)需要注意。行7、行8：邊框線在容器內(nèi)容的左邊開始，寬度100%，由于上面設(shè)置了邊框盒子，因此不會(huì)與其左右邊框相交。行9：底部與容器邊框底部重疊，從而遮掩下邊框線，當(dāng)邊框線是白色時(shí)，相當(dāng)擦除除了下邊框線。注意：如果沒有行4，那么after添加的元素是具有1px左、右邊框的，這會(huì)造成與父元素邊框線連接處交叉從而出現(xiàn)1px斷點(diǎn)。在此情況下，除了使用行4方法，也可以固定新元素的寬度值，其取值為：容器寬度-容器邊框線寬度-添加元素的左右2px，在這里行8的值是：width=160-2-2=156px；或者添加以下代碼：border-left:none;border-right:none;這樣，整體容器的下邊框?qū)⑼暾桓采w，從而使鼠標(biāo)懸停時(shí)，下拉區(qū)域元素與整體容器的邊框線在視覺上是完整連在一起的，即實(shí)現(xiàn)圖9.3（b）的效果。9.3固定定位類似絕對(duì)定位，不同的是固定定位（位置屬性取值為fixed）是相對(duì)瀏覽器窗口進(jìn)行定位，不會(huì)跟隨頁面滾動(dòng)而滾動(dòng)。固定位置的元素將浮動(dòng)在頁面之上，不占用頁面其他元素的布局空間。無論是塊元素，還是行內(nèi)元素都可以通過改變left、top、right、bottom來定位，結(jié)合width和height屬性來改變大小，默認(rèn)位置是瀏覽器視口的左上角，即left=0,top=0。當(dāng)設(shè)置left、right均為0時(shí)，寬度為瀏覽器窗口寬度的100%，并跟隨瀏覽器窗口大小而變化；當(dāng)top、right均為0時(shí)，高度為瀏覽器窗口的100%，并跟隨瀏覽器窗口大小而變化。演示與講解制作停靠在瀏覽器窗口底部的信息欄，如圖9.5所示。圖9.5固定在瀏覽器窗口底部的div具體實(shí)現(xiàn)代碼如下：<!DOCTYPEhtml><html><body><divclass="bottom">固定在瀏覽器底部的信息欄</div></body></html><style>.bottom{position:fixed;background-color:gray;left:0;right:0;bottom:0;height:40px;}</style>代碼說明：行10：設(shè)置位置屬性為固定位置，這樣你可以改變left、right、top、bottom和width、height屬性。行12和行13：使寬度占滿（拉伸）瀏覽器的寬度，即100%寬度。行14：離瀏覽器底部為0，即停靠在瀏覽器窗口底部。行14：設(shè)置元素具有一定的高度，如果不設(shè)置高度，那么高度由內(nèi)容決定。注意：如果在行10中使用絕對(duì)位置，那么當(dāng)頁面在高度方向滾動(dòng)時(shí)，元素也將出現(xiàn)滾動(dòng)，不會(huì)一直固定在瀏覽器底部。9.4z-index當(dāng)多個(gè)具有非默認(rèn)位置元素部分區(qū)域重疊時(shí)，后面的元素可能遮擋前面的元素，但可以使用z-index屬性使其在Z軸位置（面向用戶的位置）發(fā)生改變。z-index屬性是一個(gè)整數(shù)。默認(rèn)值為0，可以取負(fù)值，值越大，越靠前。演示與講解z-index屬性的使用下面是3張具有絕對(duì)定位的圖片，使他們部分重疊。默認(rèn)情況下，元素根據(jù)在文檔流的次序依次顯示，如圖9.6（a）所示；通過改變z-index屬性，在鼠標(biāo)懸停在某一張圖片時(shí)，使其置頂顯示，如圖9.6（b）所示。圖9.6（a）正常顯示圖9.6（b）鼠標(biāo)懸停具體實(shí)現(xiàn)如下：<!DOCTYPEhtml><html><body><divclass="imgimg1"></div><divclass="imgimg2"></div><divclass="imgimg3"></div></body></html><style>.img{position:absolute;width:200px;height:200px;background-repeat:no-repeat;background-size:100%100%;}.img:hover{z-index:100;}.img1{left:0;top:0;background-image:url('./images/1.jpg');}.img2{left:20px;top:20px;background-image:url('./images/2.jpg');}.img3{left:40px;top:40px;background-image:url('./images/3.jpg');}</style>代碼說明：行10~16：使目標(biāo)元素絕對(duì)定位，并設(shè)置寬度和高度，以及背景圖樣式。行17~19：鼠標(biāo)懸停在指定的元素上時(shí)使其位于最前面。通過改變z-index為任意大于0（默認(rèn)值）的整數(shù)即可。行20~34：通過改變left和top值，使絕對(duì)位置的元素位置錯(cuò)開，同時(shí)設(shè)置不同的背景圖。演示與講解：典型應(yīng)用：側(cè)邊欄導(dǎo)航。本例是固定位置、相對(duì)位置、絕對(duì)位置和z-index綜合應(yīng)用的例子。參考京東商城頁面中的側(cè)邊導(dǎo)航欄的實(shí)現(xiàn)，效果如圖9.7（a）和圖9.7（b）所示。圖9.7（a）正常顯示圖9.7（b）鼠標(biāo)懸?；緦?shí)現(xiàn)思路如下：使用固定定位，添加?？吭诖翱谟覀?cè)的容器元素div,高度為當(dāng)前窗口高度。添加包含三個(gè)列表項(xiàng)的無序列表作為子元素。列表項(xiàng)設(shè)置為相對(duì)位置，為文本鏈接做定位參考。每個(gè)列表項(xiàng)至少包含一個(gè)背景圖的鏈接，鏈接轉(zhuǎn)換為塊元素，填充滿li，即撐大li。根據(jù)需要再在列表項(xiàng)中添加絕對(duì)定位的文本鏈接，如圖9.7（b）中的“我的購(gòu)物車”。文本鏈接是相對(duì)列表項(xiàng)li絕對(duì)定位的子元素，初始顯示在最右側(cè)，這樣將被瀏覽器窗口遮擋，在鼠標(biāo)懸停在li時(shí)，使其再位于li的最右側(cè)，從而顯示文本鏈接。具體實(shí)現(xiàn)代碼如下：<!DOCTYPEhtml><html><body><divclass="side"><ulclass="nav"><li><ahref="#"class="bgcoupon"></a><ahref="#"class="tip">我的優(yōu)惠券</a></li><li><ahref="#"class="bgcart"></a><ahref="#"class="tip">我的購(gòu)物車</a></li><li><ahref="#"class="bgservice"></a></li></ul></div></body></html><style>*{box-sizing:border-box;}/*位于右側(cè)，高度100%*/.side{position:fixed;width:40px;right:0px;top:0;bottom:0;background-color:#eee;}ul.nav{list-style:none;padding:0;margin:100px0;}ul.nav>li{position:relative;width:40px;height:40px;}/*第1個(gè)鏈接大小*/ul.nav>li>a:nth-of-type(1){display:block;height:100%;}/*鏈接背景*/a.bg{/*設(shè)置合適大小，居中顯示*/background-repeat:no-repeat;background-size:20px20px;background-position:center;}/*鏈接背景圖*/a.coupon{background-image:url('images/優(yōu)惠券.png');}a.cart{background-image:url('images/購(gòu)物車.png');}a.service{background-image:url('images/客服.png');}/*鏈接提示文本*/.tip{position:absolute;z-index:-10;text-decoration:none;right:-140px;width:140px;top:0;height:40px;line-height:40px;padding-left:10px;background-color:yellowgreen;}ul.nav>li:hover.tip{right:0;}</style>代碼說明：考慮樣式可能的沖突和易于理解，本例在類名前面使用標(biāo)記限定，使用樣式應(yīng)用的含義更加明確。行25~32：側(cè)邊欄容器，位于窗口最右側(cè)，使top和bittom為0，那么高度將為窗口的100%。行33~37：清除無序列表ul默認(rèn)樣式，同時(shí)使其離容器頂部有100px距離。行38~42：設(shè)置列表項(xiàng)位置，為其子元素定位做參考，同時(shí)設(shè)置合適的寬度和高度。行44~47：將列表項(xiàng)第1個(gè)鏈接轉(zhuǎn)換塊元素，填充滿列表項(xiàng)空間，目的有一定寬度和高度，來設(shè)置背景圖。行49~54：每個(gè)鏈接背景圖的樣式，大小20*20px，在鏈接區(qū)域居中顯示。行56~58：分別設(shè)置每個(gè)鏈接的背景圖來源。行61~74：文本鏈接樣式設(shè)置，絕對(duì)定位，為不遮擋正常鏈接，使其位于所有鏈接的底部，行66用于使文本鏈接初始位于容器最右側(cè)，即被窗口遮擋，取值為-140px是依賴相對(duì)其寬度值來定。行69和行70是使文本垂直居中顯示。行75：鼠標(biāo)懸停時(shí)，使文本鏈接對(duì)齊容器右邊，這樣文本鏈接將全部顯示，在視覺上類似從右向左彈出。5粘性定位粘性定位是指當(dāng)元素的位置屬性position為sticky時(shí)，可以設(shè)置其定位屬性left、topright和bottom之一的值，使其在父元素滾動(dòng)到元素離其邊界值時(shí)，不再跟隨滾動(dòng)，從而出現(xiàn)懸浮的效果。特征：必須設(shè)置left、topright和bottom之一，父元素出現(xiàn)滾動(dòng)條。例如圖9.8中京東商城商品詳情頁面，在圖中虛線的塊，在滾動(dòng)瀏覽器窗口的滾動(dòng)條到瀏覽器窗口頂端時(shí)，不再滾動(dòng)，而是懸浮在窗口中。toptop粘性定位的塊圖9.8滾動(dòng)到瀏覽器窗口頂部懸浮的信息塊演示與講解粘性定位的使用我們模擬圖9.8實(shí)現(xiàn)粘性定位。為了使瀏覽器窗口滾動(dòng)條出現(xiàn)，我們?cè)谡承远ㄎ坏膲K元素的上面和下面各添加一個(gè)具有足夠高度的div，然后使具有粘性定位的塊元素在距離瀏覽器頂部100px時(shí)脫離原來的位置，浮動(dòng)在頁面上，效果如圖9.9所示。圖9.9粘性定位具體代碼如下：<!DOCTYPEhtml><html><body><divclass="top">模擬上不很多的內(nèi)容</div><divclass="sticky">粘性定位的塊元素</div><divclass="bottom">為出現(xiàn)滾動(dòng)條，模擬下部很多的內(nèi)容</div></body></html><style>.top,.bottom{height:600px;background-color:#ccc;}.sticky{position:sticky;top:100px;width:400px;height:40px;background-color:white;}</style>代碼說明：行11~14：使上下兩個(gè)div元素具有足夠高度，模擬頁面有足夠多的內(nèi)容，以便使瀏覽器窗口出現(xiàn)滾動(dòng)條。行16、17：設(shè)置元素具有粘性位置屬性，在跟隨頁面滾動(dòng)到距離瀏覽器窗口頂部100px的時(shí)候，停止跟隨滾動(dòng)，浮動(dòng)在頁面上方。行18~20：設(shè)置寬度、高度和背景屬性，以便觀察效果。通過這個(gè)例子，其實(shí)我們還可以知道，如果要使表格的某列凍結(jié)，只需將該列位置設(shè)置為sticky，然后設(shè)置left屬性即可。本章目標(biāo)：理解相對(duì)位置，重點(diǎn)理解其主要為子元素作為絕對(duì)定位的參考元素。掌握絕對(duì)位置和定位屬性的使用。掌握固定定位的應(yīng)用。了解粘性定位的屬性。目標(biāo)體現(xiàn)：能夠使用位置屬性和定位屬性完成下圖效果的設(shè)計(jì)。擬融入課程思政/勞動(dòng)教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：以華為5G核心技術(shù)為例，介紹本章內(nèi)容在本課程的核心地位及其重要性。教學(xué)后記：本章是CSS應(yīng)用的重點(diǎn)內(nèi)容，也是實(shí)用性和實(shí)踐性非常強(qiáng)的內(nèi)容，通過豐富的實(shí)際商務(wù)網(wǎng)站的實(shí)例來介紹，學(xué)生比較有興趣。說明：教案編寫應(yīng)以一次課（一般2學(xué)時(shí)）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W7第11次課：實(shí)驗(yàn)三位置屬性的使用第11次課項(xiàng)目名稱：位置屬性的使用教學(xué)目標(biāo)與要求：1.掌握相對(duì)位置和絕對(duì)位置的具體應(yīng)用。2.理解盒子模型。3.熟悉背景樣式的使用。教學(xué)條件：（教學(xué)場(chǎng)地、設(shè)施、設(shè)備、軟件等要求說明）：實(shí)驗(yàn)室：實(shí)驗(yàn)室；安裝VSCODE、火狐、chrome等瀏覽器軟件教學(xué)組織（分組輪換、講解與訓(xùn)練安排等）：獨(dú)立完成、教師指導(dǎo)，安全事項(xiàng)：勿擅自處理計(jì)算機(jī)及其相關(guān)設(shè)備的故障。有問題報(bào)告老師。教學(xué)重難點(diǎn)（關(guān)鍵技術(shù)）：重點(diǎn)：相對(duì)定位和絕對(duì)定位的使用；熟悉局部布局。難點(diǎn)：局部布局教學(xué)內(nèi)容及課堂設(shè)計(jì)(可續(xù)頁)：要求：按給出的素材，使用位置、定位屬性以及背景樣式實(shí)現(xiàn)如圖3.1所示的搜索欄效果，元素的具體尺寸自定義。可以參考下圖所示的結(jié)構(gòu)來實(shí)現(xiàn)。參考實(shí)現(xiàn)<html><body><divclass="container"><inputclass="txt"placeholder="請(qǐng)輸入查詢關(guān)鍵字"/><divclass="camera"></div><divclass="search"></div></div></body></html><style>*{box-sizing:border-box;}.container{width:400px;height:40px;border:2pxsolidred;padding-right:100px;/*為子元素定位做參考*/position:relative;}.txt{width:100%;height:100%;padding:010px;border:none;outline:none;}.camera{position:absolute;right:60px;top:0;width:40px;height:100%;cursor:pointer;/*背景圖*/background-image:url('./照相機(jī)(灰色).png');background-repeat:no-repeat;background-size:20px20px;background-position:center;}.camera:hover{background-image:url('./照相機(jī)(紅色).png');}.search{position:absolute;width:60px;height:100%;top:0;right:0;cursor:pointer;/*背景*/background-color:red;background-image:url('./搜索白色.png');background-repeat:no-repeat;background-size:20px20px;background-position:center;}</style>擬融入課程思政/勞動(dòng)教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：教學(xué)后記：本次實(shí)驗(yàn)對(duì)學(xué)生來說有一定的難度，來自實(shí)際網(wǎng)站設(shè)計(jì)需求，2課時(shí)部分學(xué)生難于完成，因此不要求當(dāng)堂交，可以在課后慢慢理解后完成。說明：教案編寫應(yīng)以一次課（一般2學(xué)時(shí)）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W8第12次課：頁面布局第次課12課題頁面布局教學(xué)目標(biāo)與要求：掌握行布局和列布局。授課類型(請(qǐng)打√)：理論課R討論課□實(shí)驗(yàn)課□習(xí)題課□上機(jī)□輔導(dǎo)□其他□教學(xué)重點(diǎn)：三列布局的各種解決方案。教學(xué)難點(diǎn)：熟悉浮動(dòng)的特性以及如何清除浮動(dòng)帶來的影響。教學(xué)方法和手段：教學(xué)方法：課堂講授、實(shí)例演示與實(shí)操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(jì)(可續(xù)頁)：教學(xué)內(nèi)容主要包括：1.行布局；2列布局1CSS+DIV頁面布局CSS+DIV布局是指將頁面分成不同的區(qū)域，每個(gè)區(qū)域使用div作為容器來承載內(nèi)容，結(jié)合CSS樣式將其定位在頁面任意位置。相對(duì)其他具有語義和默認(rèn)樣式的HTML塊元素，如P、H1~H6、UL、LI等，DIV無默認(rèn)的樣式屬性，更加適合作為容器元素使用。頁面布局方式在整體上可以分為行布局、列布局和混合布局，三者示意圖分別如圖10.1（a）、圖10.1（b）和圖10.1（c）所示。圖10.1（a）行布局圖10.1（b）列布局圖10.1（c）混合布局注意，無論那種布局方式，通常都會(huì)使用一個(gè)div作為根容器，包含頁面布局的所有內(nèi)容，該根容器寬度固定、高度自適應(yīng)，這樣方便控制整個(gè)頁面內(nèi)容在瀏覽器窗口的位置和統(tǒng)一樣式。（1）行布局使用div將頁面從上到下來分成多個(gè)的區(qū)域，每個(gè)區(qū)域占滿一行，固定高度或高度自適應(yīng)。這種方式是利用文檔標(biāo)準(zhǔn)流來實(shí)現(xiàn)的自然布局。演示與講解典型的三行布局。典型的三行布局包含三個(gè)順序排列的div，它們將作為整體位于根元素中，例如圖10.1（a）所示的效果。三行布局具體實(shí)現(xiàn)如下：<!DOCTYPEhtml><html><body><divid="container"><divid="header">header</div><divid="content">content</div><divid="footer">footer</div></div></body></html><style>#container{width:400px;margin:0auto;border:2pxdottedgray;}#header,#footer,#content{min-height:40px;border:1pxsolid#ccc;margin:4px;}</style>代碼說明：行4和行8：根容器，控制頁面內(nèi)容整體居中顯示。行5~7：將頁面內(nèi)容分為上、中、下三個(gè)區(qū)域。行12~15：根容器寬度設(shè)定為400px，即頁面內(nèi)容寬度；當(dāng)margin左右邊距為auto時(shí)，元素將在窗口水平居中顯示。行15為容器添加虛線邊框，用于觀察運(yùn)行效果。行17~21：根容器下的三個(gè)布局div顯示邊框和間距以及最小高度，用于觀察運(yùn)行效果，非必須。運(yùn)行效果如圖10.2所示。圖10.2行布局運(yùn)行效果（2）列布局列布局借助浮動(dòng)屬性float，使用塊元素將頁面分成不同的區(qū)域后從左到右邊水平排列。也可以使用display屬性將塊元素轉(zhuǎn)換為行內(nèi)塊元素來實(shí)現(xiàn)同樣效果。典型的列布局有左右兩列布局、左中右三列布局。由于列布局比較常見，我們以典型的三列布局為例，討論不同實(shí)現(xiàn)方式現(xiàn)及可能遇到的問題。注意：浮動(dòng)元素（塊元素、行內(nèi)元素）將具有行內(nèi)塊的特性，即其大小默認(rèn)自適應(yīng)子元素，寬度、高度可以調(diào)整，超過父容器寬度時(shí)將換行排列。（1）.三列全浮動(dòng)使用三個(gè)塊元素div將頁面空間在水平方向分成左、中、右三個(gè)區(qū)域，三個(gè)div均設(shè)置左浮動(dòng)。由于浮動(dòng)不再占據(jù)原來的空間，我們需要采取一定的措施來避免浮動(dòng)元素對(duì)后續(xù)元素布局的影響。演示與講解三列全浮動(dòng)布局。在一個(gè)根容器中包含三個(gè)浮動(dòng)的div，根容器寬度固定并在頁面居中顯示，高度由任意一個(gè)浮動(dòng)元素決定，這需要清除浮動(dòng)帶來的影響。同時(shí)，需要設(shè)置浮動(dòng)元素的寬度來占滿根容器。具體實(shí)現(xiàn)如下：<!DOCTYPEhtml><html><body><divclass="container"><divclass="left">left</div><divclass="center">center</div><divclass="right">right</div></div></body></html><style>*{box-sizing:border-box;}.container{width:400px;margin:0auto;border:2pxdottedgray;/*消除浮動(dòng)的影響*/overflow:hidden;}.left,.right,.center{float:left;width:20%;min-height:40px;border:1pxsolidblack;}.center{width:60%;height:60px;}</style>代碼說明：行4和行8：根容器，控制頁面內(nèi)容整體居中顯示。行13：使所有元素都使用邊框盒子模型，即元素的尺寸包含邊框和內(nèi)邊距，以便計(jì)算。行14~20：使根容器居中顯示，帶虛線邊框。其中行19是消除浮動(dòng)影響的關(guān)鍵，使得根容器成為獨(dú)立元素，且高度自適應(yīng)，即由任意子元素的高度最大者決定，這是一種最簡(jiǎn)單的方法。也可以在容器后面使用清除浮動(dòng)的偽類來實(shí)現(xiàn)，如：.container::after{content:'';display:block;clear:both;}如果根容器不能使overflow:hidden的方式，如二級(jí)下拉導(dǎo)航，那么使用偽類方式為最佳選擇。當(dāng)然，設(shè)置根容器的高度也可以消除浮動(dòng)的影響，但通常高度是無法確定的【局部布局常用】。此外，也可以將根容器轉(zhuǎn)換為行內(nèi)塊方式也可以實(shí)現(xiàn)，但可能需要手動(dòng)添加換行標(biāo)記才不會(huì)影響后續(xù)元素的布局。行21~26：三個(gè)div全部左浮動(dòng)，設(shè)置最小高度和邊框，以便觀察運(yùn)行效果。全部元素占容器寬度的20%。行27：修改中間div的寬度為60%，這樣，三個(gè)div按比例占滿根容器的寬度。這里設(shè)置高度的目的是為了觀察根容器高度是否由任意子元素最高者決定。運(yùn)行效果如圖10.3所示。圖10.3運(yùn)行效果（2）前面兩列左浮動(dòng)，最后一列不浮動(dòng)由于浮動(dòng)元素不在再占據(jù)原來空間，那么后續(xù)非浮動(dòng)元素將占據(jù)浮動(dòng)元素空出來的空間，文本也將出現(xiàn)環(huán)繞。我們需要消除浮動(dòng)的影響，使根容器和非浮動(dòng)容器都成為獨(dú)立的塊元素，即根容器高度由任意浮動(dòng)或非浮動(dòng)元素高度決定，非浮動(dòng)元素的文本不再環(huán)繞，也不再占據(jù)浮動(dòng)元素原來的空間。演示與講解最右側(cè)不浮動(dòng)的三列布局根容器使用overfloat:hidden來消除浮動(dòng)子元素的影響，固定寬度并居中，高度自適應(yīng)；不浮動(dòng)元素同樣使用overfloat屬性使之成為獨(dú)立元素，寬度自動(dòng)占據(jù)根容器剩下寬度空間。具體實(shí)現(xiàn)如下：<!DOCTYPEhtml><html><body><divclass="container"><divclass="left">left</div><divclass="center">center</div><divclass="right">right</div></div></body></html><style>*{box-sizing:border-box;}.container{width:400px;margin:0auto;border:2pxdottedgray;overflow:hidden;}.left,.center,.right{float:left;min-height:40px;border:1pxsolid#ccc;}.left{width:20%;}.center{width:60%;}.right{/*不浮動(dòng)，覆蓋上面的浮動(dòng)定義*/float:none;width:20%;overflow:hidden;}</style>代碼說明：行4和行8：根容器，控制頁面內(nèi)容整體居中顯示。行13：使所有元素都使用邊框盒子模型，即元素的尺寸包含邊框和內(nèi)邊距，以便計(jì)算。行18：使根容器成為獨(dú)立元素，不受浮動(dòng)子元素的影響，高度由任意子元素高度最高者決定。行20~24：初始設(shè)置三列均浮動(dòng)，由于最右側(cè)列布浮動(dòng)，因此在行29覆蓋浮動(dòng)樣式。行29：取消右側(cè)浮動(dòng)屬性，使之成為非浮動(dòng)元素。行31：使塊元素成為獨(dú)立元素，不再占據(jù)浮動(dòng)元素空出來的空間，因此文本也不再環(huán)繞。如果不使用overflow屬性，也可以設(shè)置margin-left屬性實(shí)現(xiàn)同樣效果。margin-left取值為：（400-2-2）*0.8=316.8px，這里400-2-2是根容器寬度減去左右邊框，得到容器可分配寬度，再減去左側(cè)兩個(gè)浮動(dòng)元素的寬度（20%+60%），因?yàn)檫@種方式需要計(jì)算，較為麻煩。運(yùn)行效果如圖10.4所示。圖10.4運(yùn)行效果（3）左右浮動(dòng)，中間不浮動(dòng)通常三列布局左右是固定寬度的，中間寬度自適應(yīng)，這種方式與上面稍有區(qū)別，我們需要先實(shí)現(xiàn)左右浮動(dòng)，再添加中間非浮動(dòng)元素，以占滿根容器空出來的空間，因?yàn)榉歉?dòng)元素的后續(xù)元素會(huì)在下一行排列。演示與講解左右浮動(dòng)、中間不浮動(dòng)的三列布局先確定左右元素的寬度，并分別左浮動(dòng)和有浮動(dòng)，再添加中間元素，該元素將占滿剩余的容器空間，最后使用overflow屬性將容器元素和中間元素成為獨(dú)立元素。具體實(shí)現(xiàn)如下：<!DOCTYPEhtml><html><body><divclass="container"><divclass="left">left</div><divclass="right">right</div><divclass="center">center</div></div></body></html><style>.container{width:400px;margin:0auto;border:2pxdottedgray;overflow:hidden;}.left,.right,.center{min-height:40px;border:1pxsolid#ccc;}.left{float:left;width:100px;}.right{float:right;width:100px;}.center{overflow:hidden;}</style>代碼說明：行7：中間的div在其他浮動(dòng)元素的最后，否則右浮動(dòng)元素將在其下一行顯示。行17：使根容器成為獨(dú)立元素，不受浮動(dòng)子元素的影響，高度由任意子元素高度最高者決定。行19~21：設(shè)置三列布局的初始樣式，主要是觀察運(yùn)行效果行23：左側(cè)div左浮動(dòng)。通常會(huì)固定左、右側(cè)寬度。行24：使右側(cè)div右浮動(dòng)。行25：使中間div成為獨(dú)立元素，不占用浮動(dòng)元素空出來的空間。運(yùn)行效果如圖10.5所示。圖10.5運(yùn)行效果（3）混合布局了解了行、列布局的實(shí)現(xiàn)，混合布局也就容易理解了。在行布局基礎(chǔ)上，其中間div通常是列布局的，因此我們將中間div作為列布局的父容器即可。演示與講解三行兩列布局同樣，我們將布局元素作為整體放在一個(gè)根容器中，并設(shè)置根容器適當(dāng)?shù)膶挾龋岉撁鎯?nèi)容作為整體在瀏覽器窗口中間顯示。中間兩列布局采用左浮動(dòng)，固定寬度；右邊不浮動(dòng)，自適應(yīng)寬度，最后消除浮動(dòng)影響。具體實(shí)現(xiàn)如下：<!DOCTYPEhtml><html><body><divclass="container"><divclass="header">header</div><divclass="content"><divclass="left"><p>content-left</p></div><divclass="right"><p>content-right</p><p>測(cè)試文本是否環(huán)繞</p></div></div><divclass="footer">footer</div></div></body></html><style>*{box-sizing:border-box;}.container{width:400px;border:2pxdottedgray;margin:0auto;padding:10px;}/*以下樣式用于測(cè)試目的*/.header,.footer,.content{min-height:40px;border:1pxsolid#ccc;margin:4px0;padding:4px;}.content{overflow:hidden;}/*列布局*/.left,.right{min-height:40px;/*以下目的用于測(cè)試*/border:1pxsolidwhite;background-color:#ccc;}.left{float:left;width:120px;}.right{overflow:hidden;}</style>代碼說明行4、行14：整體容器，目的使用頁面內(nèi)容在瀏覽器居中。行5、行6、行13：三組div，組成三行布局。其中行6~12為行布局中間部分，它作為兩列布局的父容器。行20~25：根容器樣式，固定寬度，目的位于頁面居中，其他樣式屬性時(shí)為了測(cè)試目的，如邊框和邊距。行27~32：為上、中、下行布局元素div設(shè)置樣式，也是為了測(cè)試目的。行33：作為兩列布局的容器，消除左浮動(dòng)影響，使之成為獨(dú)立的容器。行35~40：顯示左右布局的樣式，同樣是為了觀察運(yùn)行效果。行41：中間兩列布局中的使左側(cè)div左浮動(dòng)，設(shè)置合適寬度。行42：中間兩列布局中右側(cè)div，使之成為獨(dú)立元素，從而使得其寬度為容器剩余空間的寬度，文本也不再環(huán)繞。運(yùn)行效果如圖10.6所示。圖10.6運(yùn)行效果本章目標(biāo)：理解浮動(dòng)的作用和副作用，能夠使用浮動(dòng)實(shí)現(xiàn)水平導(dǎo)航菜單，以及實(shí)現(xiàn)列布局。掌握三種列布局的解決方案目標(biāo)體現(xiàn)：（1）使用浮動(dòng)、盒子模型等能設(shè)計(jì)水平導(dǎo)航菜單。（2）能使用浮動(dòng)及定位屬性實(shí)現(xiàn)下圖效果。擬融入課程思政/勞動(dòng)教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：無教學(xué)后記：本章內(nèi)容難度一般，學(xué)生基本可以接受。說明：教案編寫應(yīng)以一次課（一般2學(xué)時(shí)）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W9第13次課：實(shí)驗(yàn)四頁面布局第次課項(xiàng)目名稱：頁面布局教學(xué)目標(biāo)與要求：1.掌握使用浮動(dòng)進(jìn)行列布局2.相對(duì)位置和絕對(duì)位置的具體應(yīng)用。教學(xué)條件：（教學(xué)場(chǎng)地、設(shè)施、設(shè)備、軟件等要求說明）：實(shí)驗(yàn)室：實(shí)驗(yàn)室；安裝VSCODE、火狐、chrome等瀏覽器軟件教學(xué)組織（分組輪換、講解與訓(xùn)練安排等）：獨(dú)立完成、教師指導(dǎo)。安全事項(xiàng)：教學(xué)重難點(diǎn)（關(guān)鍵技術(shù)）：重點(diǎn)：CSS+DIV實(shí)現(xiàn)頁面布局；難點(diǎn)：列布局和絕對(duì)定位。教學(xué)內(nèi)容及課堂設(shè)計(jì)(可續(xù)頁)：要求：按給出的素材，使用浮動(dòng)、位置、定位屬性實(shí)現(xiàn)如圖4.1所示的布局效果，元素的具體尺寸自定義可以參考圖4.2所示的結(jié)構(gòu)來實(shí)現(xiàn)。參考實(shí)現(xiàn)：<body><h3>左右浮動(dòng)，中間不浮動(dòng)</h3><divclass="container"><divclass="left"><ahref="#"></a></div><divclass="right"><ahref="#"></a></div><divclass="middle"><!--上下布局--><divclass="top"><divclass="search-box"></div><divclass="cart-box"></div></div><divclass="keywords">一組關(guān)鍵字鏈接</div><divclass="bottom">底部一組鏈接</div></div></div></body><style>*{box-sizing:border-box;}.container{width:1200px;height:140px;border:1pxsolid#ccc;/*頁面居中*/margin:auto;}/*1.左邊*/.left,.right{float:left;width:220px;height:100%;/*border:2pxdottedred;*/}.left>a,.right>a{display:block;width:100%;height:100%;background-image:url('./images/jd-logo.jpg');background-repeat:no-repeat;background-size:100%;background-position:center;}/*2.右邊*/.right{float:right;}.right>a{background-image:url('./images/ad.avif');}/*3.中間*/.middle{height:100%;padding:10px10px0;overflow:hidden;position:relative;/*border:2pxdottedred;*/}/*上部*//*寬度：1200-220-220=760*/.top{padding:4px0;/*border:2pxdottedblack;*/overflow:hidden;}/*搜索框*/.top>.search-box{float:left;border:2pxsolidred;background-color:white;width:500px;height:40px;}/*右邊購(gòu)物車*/.top>.cart-box{float:right;width:140px;height:40px;border:1pxsolid#ccc;background-color:white;}.keywords{/*border:2pxdottedblack;*/padding:020px;}/*底部對(duì)齊的一組鏈接*/.bottom{position:absolute;left:0;right:0;bottom:0;height:40px;line-height:40px;padding:010px;background-color:#ccc;}</style>擬融入課程思政/勞動(dòng)教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：教學(xué)后記：本實(shí)驗(yàn)同樣來自實(shí)際網(wǎng)站中的需求，CSS的綜合應(yīng)用，有一定難度，需要指導(dǎo)完成。說明：教案編寫應(yīng)以一次課（一般2學(xué)時(shí)）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W9第14次課：彈性布局第次課14課題彈性布局教學(xué)目標(biāo)與要求：熟練使用彈性布局方式進(jìn)行頁面整體和局部布局。授課類型(請(qǐng)打√)：理論課R討論課□實(shí)驗(yàn)課□習(xí)題課□上機(jī)□輔導(dǎo)□其他□教學(xué)重點(diǎn)：掌握彈性容器的用法，理解容器和項(xiàng)的概念；理解主軸和交叉軸的概念掌握容器和項(xiàng)主要屬性教學(xué)難點(diǎn)：交叉軸的理解和應(yīng)用。教學(xué)方法和手段：教學(xué)方法：課堂講授、實(shí)例演示與實(shí)操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(jì)(可續(xù)頁)：教學(xué)內(nèi)容主要包括：1.容器和項(xiàng)的概念，主軸和交叉軸的概念；2.容器和項(xiàng)所有屬性和取值。1.概述彈性(Flex)布局：一種新的布局方式，也是當(dāng)前WEB主流的布局方式目的：取代浮動(dòng)布局，使頁面整體和局部布局更簡(jiǎn)單、靈活。幾個(gè)概念：（1）彈性容器：任何元素設(shè)置display:flex后，都可以成為一個(gè)彈性容器，簡(jiǎn)稱容器。（2）項(xiàng)：所有容器中的任意直接子元素（3）主軸：水平方向的橫軸，項(xiàng)從左到右排列；（4）交叉軸：垂直方向的縱軸注意：默認(rèn)情況下，所有容器中的項(xiàng)，都從左到右按行排列，類似浮動(dòng)元素，但沒有浮動(dòng)副作用。下圖對(duì)概念的理解2.容器屬性包括：1.flex-direction/2.flex-wrap/3.justify-content/4.align-content/5.align-items具體介紹：2.1flex-direction：項(xiàng)在容器排列方向?qū)傩匀≈敌Ч?！?qiáng)調(diào)掌握內(nèi)容：√從左到右排列flex-direction：row；/*默認(rèn)值*/項(xiàng)高度默認(rèn)100%√從上到下排列flex-direction：column；項(xiàng)寬度默認(rèn)100%2.2flex-wrap：項(xiàng)是否換行屬性取值及其效果；強(qiáng)調(diào)掌握內(nèi)容：√換行flex-warp：wrap;通常設(shè)置容器的寬度，容器高度默認(rèn)由項(xiàng)高度決定強(qiáng)調(diào)：以下說明和示例，假定flex-direction取值為默認(rèn)值(row)，即主軸為水平軸示例：一個(gè)彈性容器div，寬度400px，可折行，包含一組鏈接（padding:10px20px）目的：掌握彈性布局，以上屬性使用。強(qiáng)調(diào)：設(shè)置容器寬度，以顯示折行效果HTML:<divclass="container"><ahref="#"class="item">華為</a><ahref="#"class="item">中興</a><ahref="#"class="item">小米</a><ahref="#"class="item">聯(lián)想</a><ahref="#"class="item">諾基亞</a><ahref="#"class="item">蘋果</a><ahref="#"class="item">華碩</a></div>CSS:<style>.container{width:400px;border:10pxsolidred;/*作為彈性盒子*/display:flex;/*可折行顯示*/flex-wrap:wrap;}.item{padding:10px20px;border:1pxdotted#333;}</style>2.33.justify-content：項(xiàng)在主軸上的對(duì)齊方式，設(shè)置寬度取值：(1).flex-start：默認(rèn)值，項(xiàng)目依次對(duì)齊主軸起點(diǎn)，各項(xiàng)緊湊排列，即項(xiàng)之間間隔為0。（左對(duì)齊）(2).flex-end：項(xiàng)目對(duì)齊主軸終點(diǎn)，各項(xiàng)緊湊排列，即項(xiàng)之間間隔為0。（右對(duì)齊）(3).center：在主軸方向，項(xiàng)目居中對(duì)齊，項(xiàng)目之間間隔相等，兩端可能有多余空白。(4).space-around：項(xiàng)目?jī)啥嗽谥鬏S方向上兩端間隔相等，項(xiàng)目之間的間隔是兩端間隔之和。(5).space-between：項(xiàng)目在主軸方向上兩端對(duì)齊，兩端間隔為0，項(xiàng)目之間間隔相等。介紹取值的效果演示及講解:一個(gè)彈性容器div，寬度400px，可折行，包含一組鏈接（padding:10px20px）主軸對(duì)齊方式：（1）起點(diǎn)對(duì)齊（左對(duì)齊，默認(rèn)）；（2）終點(diǎn)對(duì)齊（右對(duì)齊）；（3）主軸居中對(duì)齊；（4）兩端對(duì)齊；（5）環(huán)繞對(duì)齊CSS:.container{width:400px;border:10pxsolidred;/*作為彈性盒子*/display:flex;/*可折行顯示*/flex-wrap:wrap;/*對(duì)齊方式，注意，必須寬度足夠*/justify-content:flex-start;justify-content:flex-end;justify-content:center;justify-content:space-between;justify-content:space-around;}2.4.align-content：項(xiàng)在交叉軸上的對(duì)齊方式需要設(shè)置高度，項(xiàng)必須可折行取值及其效果：演示及講解一個(gè)彈性容器div，寬度400px，可折行，包含一組鏈接（padding:10px20px）主軸對(duì)齊方式：（1）起點(diǎn)對(duì)齊（左對(duì)齊，默認(rèn)）；（2）終點(diǎn)對(duì)齊（右對(duì)齊）；（3）主軸居中對(duì)齊；（4）兩端對(duì)齊；（5）環(huán)繞對(duì)齊；CSS:.container{width:400px;border:10pxsolidred;/*作為彈性盒子*/display:flex;/*可折行顯示*/flex-wrap:wrap;/*設(shè)置高度*/height:100px;align-content:stretch;align-content:flex-start;align-content:flex-end;align-content:center;align-content:space-between;align-content:space-around；}2.5.align-items：項(xiàng)在交叉軸上的對(duì)齊方式需要設(shè)置高度，項(xiàng)不一定需要折行取值及效果：強(qiáng)調(diào)區(qū)別沒有環(huán)繞和兩端對(duì)齊；優(yōu)先級(jí)比align-content低，設(shè)置容器高度后，不折行也有效。其他與align-content一致。講解及演示頁面居中的塊登錄界面頁面居中實(shí)現(xiàn)實(shí)現(xiàn)<divclass="containerfixed"><divclass="item">這是塊元素在塊元素中居中的示例<br/>模擬居中的登錄窗體<p>彈性容器仍然可以使用位置和定位屬性</p></div></div><style>.container{border:10pxsolidred;/*彈性容器*/display:flex;justify-content:center;/*水平（主軸）居中*/align-items:center;/*垂直居中；如果使用align-content:cneter，那么需要使用flex-wrap:wrap*//*加上固定定位：100%窗口大小*/position:fixed;left:0;right:0;top:0;bottom:0;}/*項(xiàng)-登錄界面區(qū)域*/.item{width:400px;height:200px;border:10pxsolidblue;}</style>3.項(xiàng)目屬性包含:1.order/2.flex-grow/3.flex-shrink/4.align-self3.1.order：項(xiàng)在主軸的排列順序。整數(shù)值，值越小，越靠前。默認(rèn)為0，可取負(fù)值。演示及講解使用order屬性，使各項(xiàng)按照指定值從大到小排列。<divclass="container"><divclass="itemw1">中國(guó)????</div><divclass="itemw2">美國(guó)????</div><divclass="itemw3">英國(guó)????</div></div><style>.container{border:10pxsolidred;width:400px;display:flex;flex-direction:column;}.item{border:1pxsolid#ccc;height:40px;margin:10px;}.w1{width:300px;order:-300;}.w2{width:200px;order:-200;}.w3{width:100px;order:-100;}3.2.flex-grow：跟隨容器在主軸上的大小而放大的占比，默認(rèn)為0，不跟隨。演示及講解flex-grow應(yīng)用

<divclass="container">

<divclass="item">

<span>總訂單數(shù)</span>

<spanclass="red">↑54%</span>

</div>

<divclass="item">

<span>未處理</span>

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論