《HTML5+CSS3Web前端開(kāi)發(fā)項(xiàng)目化教程》

項(xiàng)目5網(wǎng)頁(yè)版塊布局任務(wù)5.3制作“公益行動(dòng)”二級(jí)頁(yè)面03目錄Contents任務(wù)5.2制作“低碳環(huán)保網(wǎng)”輪播圖02任務(wù)5.1制作“低碳環(huán)保網(wǎng)”綠水青山模塊01教學(xué)目標(biāo)理解浮動(dòng)特性掌握清除浮動(dòng)影響的方法掌握元素的四種定位模式熟悉常見(jiàn)的網(wǎng)頁(yè)布局及命名規(guī)范1.知識(shí)目標(biāo)能夠?qū)K元素進(jìn)行橫排

能夠清除浮動(dòng)影響

能夠?yàn)樵卦O(shè)置常見(jiàn)的定位模式

能夠制作各種banner輪播圖2.技能目標(biāo)?倡導(dǎo)文明出行、孝敬長(zhǎng)輩

培養(yǎng)自主學(xué)習(xí)和獨(dú)立解決問(wèn)題的能力

強(qiáng)調(diào)界面美觀(guān)，提升審美意識(shí)3.素養(yǎng)目標(biāo)1任務(wù)5.1制作“低碳環(huán)保網(wǎng)”綠水青山模塊效果展示知識(shí)儲(chǔ)備清除浮動(dòng)影響2overflow屬性3float屬性1目錄ContentsFontAwesome圖標(biāo)4知識(shí)儲(chǔ)備1.float屬性在標(biāo)準(zhǔn)文檔流中，標(biāo)簽元素的默認(rèn)排列方式為：塊元素上下垂直排列，行內(nèi)元素左右并行排列。知識(shí)儲(chǔ)備1.float屬性通過(guò)元素的浮動(dòng)（float）屬性可以進(jìn)行多樣化的布局，將各部分模塊有序排列，整個(gè)網(wǎng)頁(yè)的排版也變得豐富、美觀(guān)。知識(shí)儲(chǔ)備1.float屬性基本語(yǔ)法格式選擇器{float:屬性值;}屬性值描述left元素向左浮動(dòng)right元素向右浮動(dòng)none元素不浮動(dòng)（默認(rèn)值）使用浮動(dòng)（float）屬性可以讓某個(gè)元素脫離標(biāo)準(zhǔn)流向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)元素的邊框?yàn)橹?。知識(shí)儲(chǔ)備1.float屬性（1）浮動(dòng)的盒子會(huì)具有行內(nèi)塊元素特性，其默認(rèn)寬度為容納內(nèi)容的最小寬度，可以設(shè)置寬度、高度屬性。（2）浮動(dòng)的盒子已經(jīng)脫離標(biāo)準(zhǔn)流，不再保留原來(lái)的位置，它原來(lái)的位置由后面的標(biāo)準(zhǔn)流內(nèi)容填補(bǔ)。代碼#box1{float:left;}第一種情況：box1左浮動(dòng)浮動(dòng)特性知識(shí)儲(chǔ)備1.float屬性第二種情況：將box2設(shè)置為向左浮動(dòng)，box1、box3不浮動(dòng)。浮動(dòng)特性設(shè)置了浮動(dòng)的塊元素對(duì)前面不浮動(dòng)的元素不會(huì)產(chǎn)生影響，對(duì)后面不浮動(dòng)的元素會(huì)產(chǎn)生影響。思政點(diǎn)：文明禮貌是社會(huì)的基石，我們每個(gè)人都應(yīng)該從自身做起，以身作則，倡導(dǎo)文明禮貌的行為。代碼#box2{float:left;}知識(shí)儲(chǔ)備1.float屬性第三種情況：將box1、box2都設(shè)置為向左浮動(dòng)，box3不浮動(dòng)。浮動(dòng)特性如果多個(gè)盒子都設(shè)置了浮動(dòng)，則它們會(huì)在一行內(nèi)顯示、頂端對(duì)齊排列，并且中間沒(méi)有縫隙，緊挨在一起。代碼#box1,#box2{float:left;}知識(shí)儲(chǔ)備1.float屬性第四種情況：將box1、box2、box3都設(shè)置為向左浮動(dòng)。浮動(dòng)特性（1）盒子內(nèi)的子元素全部浮動(dòng)之后，父元素的高度會(huì)受到影響，即高度會(huì)塌陷。（2）一般情況下，若要對(duì)若干個(gè)塊元素通過(guò)設(shè)置浮動(dòng)屬性使其同行顯示，必須對(duì)所有的塊都設(shè)置浮動(dòng)。代碼#box1,#box2,#box3{float:left;}知識(shí)儲(chǔ)備1.float屬性第五種情況：將box1、box2、box3都設(shè)置為向左浮動(dòng)，并設(shè)置寬度。浮動(dòng)特性若包含的容器太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其他浮動(dòng)元素向下移動(dòng)（掉下來(lái)），直到有足夠的空間。代碼#box1,#box2,#box3{float:left;width:200px;}知識(shí)儲(chǔ)備1.float屬性第六種情況：給box1單獨(dú)設(shè)置高度。浮動(dòng)特性如果浮動(dòng)元素的高度不同，那當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素“卡住”。代碼#box1,#box2,#box3{float:left;width:200px;}#box1{height:150px;}知識(shí)儲(chǔ)備1.float屬性浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)文檔流(脫標(biāo))；浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性；多個(gè)元素都設(shè)置了浮動(dòng)，他們會(huì)在一行內(nèi)顯示并且元素頂部對(duì)齊；若父元素容器太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其他浮動(dòng)元素向下移動(dòng)（掉下來(lái)）。浮動(dòng)特性知識(shí)儲(chǔ)備1.float屬性浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)文檔流(脫標(biāo))浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制（?。┮苿?dòng)到指定位置（動(dòng)），浮動(dòng)元素不再保留原來(lái)的位置，會(huì)對(duì)后面不浮動(dòng)的元素產(chǎn)生影響。浮動(dòng)特性知識(shí)儲(chǔ)備1.float屬性2.浮動(dòng)的元素會(huì)具有行內(nèi)塊元素特性任何元素都可以浮動(dòng)，不管原先是什么類(lèi)型的元素，添加浮動(dòng)之后具有行內(nèi)塊元素相似的特性。box1、box2兩個(gè)塊元素，默認(rèn)和父元素一樣寬。box1浮動(dòng)，未設(shè)置寬度，寬度由其內(nèi)容決定。span為行內(nèi)元素，添加浮動(dòng)后具有行內(nèi)塊元素特性，寬度起作用。浮動(dòng)特性知識(shí)儲(chǔ)備1.float屬性浮動(dòng)的元素是互相貼靠在一起的（不會(huì)有縫隙）若父元素容器太窄，無(wú)法容納多個(gè)浮動(dòng)元素，多出的元素會(huì)另起一行，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素“卡住”。3.

多個(gè)浮動(dòng)的元素會(huì)一行內(nèi)顯示并且頂部對(duì)齊box1高度最大，box3被“卡住”父元素寬度不夠，box3另起一行浮動(dòng)的元素互相貼在一起浮動(dòng)特性知識(shí)儲(chǔ)備1.float屬性圖像浮動(dòng)后，其后相鄰文本元素只會(huì)環(huán)繞盒子排列，并不會(huì)到盒子的下方和上方。img{

float:left;}imgp圖文混排浮動(dòng)應(yīng)用知識(shí)儲(chǔ)備1.float屬性中國(guó)新聞網(wǎng)：/photo/圖文卡片橫排黨史學(xué)習(xí)教育網(wǎng)：/浮動(dòng)應(yīng)用知識(shí)儲(chǔ)備1.float屬性一行內(nèi)兩列顯示浮動(dòng)應(yīng)用知識(shí)儲(chǔ)備1.float屬性浮動(dòng)布局需要細(xì)心調(diào)整。我們無(wú)論從事什么勞動(dòng)，只要具有“擇一事終一生”的執(zhí)著專(zhuān)注、“干一行鉆一行”的精益求精、以勤學(xué)長(zhǎng)知識(shí)、以苦練精技術(shù)、以創(chuàng)新求突破，就能在平凡崗位上干出不平凡的業(yè)績(jī)。思政點(diǎn)知識(shí)儲(chǔ)備2.清除浮動(dòng)影響left、right兩塊浮動(dòng)后，bottom被“卡住”box、box2、box3全部浮動(dòng)，父元素高度塌陷元素浮動(dòng)之后會(huì)對(duì)其他元素產(chǎn)生影響，有兩種情況，一種是浮動(dòng)元素對(duì)后面不浮動(dòng)的元素產(chǎn)生影響，另外一種就是子元素全部浮動(dòng)對(duì)父元素產(chǎn)生影響，即父元素高度會(huì)塌陷。浮動(dòng)會(huì)產(chǎn)生排版錯(cuò)亂問(wèn)題，這時(shí)候就要清除浮動(dòng)影響。知識(shí)儲(chǔ)備2.清除浮動(dòng)影響怎么清除浮動(dòng)影響？?jī)煞N情況：兄弟元素受到影響，在受影響的塊里添加clear父元素受到影響：解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0（高度塌陷）

的問(wèn)題。知識(shí)儲(chǔ)備2.清除浮動(dòng)影響運(yùn)用clear屬性清除浮動(dòng)基本語(yǔ)法格式選擇器{clear:屬性值;}屬性值描述left不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）right不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）both同時(shí)清除左右兩側(cè)浮動(dòng)的影響常用屬性值1.清除浮動(dòng)的元素對(duì)后面不浮動(dòng)的元素所產(chǎn)生的影響。運(yùn)用clear屬性能清除元素浮動(dòng)后對(duì)其后兄弟元素浮動(dòng)的影響。使用方法：在受影響的元素里加clear。知識(shí)儲(chǔ)備2.清除浮動(dòng)影響例如：2.清除子元素全部浮動(dòng)對(duì)父元素的影響盒子內(nèi)的子元素全部浮動(dòng)之后，父元素的高度會(huì)受到影響，即高度會(huì)塌陷。知識(shí)儲(chǔ)備2.清除浮動(dòng)影響01020304設(shè)置父元素的高度優(yōu)點(diǎn)：簡(jiǎn)單缺點(diǎn)：要給出精確的高度，只適合高度固定的布局，高度不固定（瀑布流）不適合。父元素添加overflow：hidden屬性?xún)?yōu)點(diǎn)：代碼簡(jiǎn)潔缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。使用空標(biāo)記清除浮動(dòng)在浮動(dòng)元素之后添加空標(biāo)簽，并對(duì)該標(biāo)簽應(yīng)用“clear:both”樣式。優(yōu)點(diǎn)：通俗易懂，書(shū)寫(xiě)方便；缺點(diǎn)：添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差。父元素添加偽類(lèi)after優(yōu)點(diǎn)：符合閉合浮動(dòng)思想結(jié)構(gòu)語(yǔ)義化正確，推薦缺點(diǎn)：由于IE6-7不支持:after解決父元素高度塌陷的方法知識(shí)儲(chǔ)備3.overflow屬性overflow屬性的常用值有四個(gè)，具體如下表所示。屬性值描述visible內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外（默認(rèn)值）hidden溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見(jiàn)的auto在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容scroll溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條overflow屬性可以解決溢出問(wèn)題，其基本語(yǔ)法格式如下：overflow屬性選擇器{overflow:屬性值;}FontAwesome是一套絕佳的圖標(biāo)字體庫(kù)和CSS框架，它是可縮放的矢量圖標(biāo)，用戶(hù)可以可以對(duì)圖標(biāo)的特性進(jìn)行更改，比如大小、顏色、陰影等并且可以組合不同的圖標(biāo)創(chuàng)造自己喜歡的圖標(biāo)。FontAwesome的產(chǎn)生，為網(wǎng)頁(yè)設(shè)計(jì)和Web前端開(kāi)發(fā)人員帶來(lái)極大的方便。網(wǎng)址：/使用方法網(wǎng)絡(luò)教程：/article/948f5924ff894cd80ef5f943.html4.FontAwesome圖標(biāo)知識(shí)儲(chǔ)備（2）下載好安裝包后，解壓縮，找到CSS文件夾里面的font-awesome.css或者font-awesome.min.css（表示壓縮過(guò)的）復(fù)制到自己項(xiàng)目里面的CSS文件夾中，并把安裝包文件夾中的fonts文件夾整個(gè)文件夾復(fù)制到自己項(xiàng)目中。

（1）下載：/4.FontAwesome圖標(biāo)知識(shí)儲(chǔ)備（3）打開(kāi)HTML頁(yè)面，在head頭部中引入font-awesome.css或者font-awesome.min.css。<linkrel="stylesheet"href="css/font-awesome.min.css">如果沒(méi)有下載安裝包的，可以引入在線(xiàn)css。比如：<linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css">4.FontAwesome圖標(biāo)知識(shí)儲(chǔ)備（4）使用圖標(biāo)點(diǎn)擊官網(wǎng)圖標(biāo)庫(kù)，會(huì)看到很多圖標(biāo)，選擇一個(gè)你喜歡的圖標(biāo)，點(diǎn)擊開(kāi)，出現(xiàn)該圖標(biāo)的代碼，把該段代碼復(fù)制，粘貼到你的頁(yè)面中。4.FontAwesome圖標(biāo)知識(shí)儲(chǔ)備總結(jié)浮動(dòng)屬性；float:left;浮動(dòng)特性（重點(diǎn)）；脫標(biāo)；浮動(dòng)元素行內(nèi)塊元素特性；多個(gè)浮動(dòng)的元素會(huì)進(jìn)行橫排、頂端對(duì)齊、沒(méi)有間隙，如果一行排不下，會(huì)另起一行。浮動(dòng)應(yīng)用（難點(diǎn)）圖文混排塊元素橫排浮動(dòng)元素浮動(dòng)對(duì)后面元素產(chǎn)生影響，在受影響的元素里添加clear；子元素全部浮動(dòng)使父元素高度塌陷；給父元素設(shè)置高度;給父元素添加overflow:hidden;使用空標(biāo)記清除浮動(dòng);父元素添加偽類(lèi)after。清除浮動(dòng)影響總結(jié)任務(wù)分析根據(jù)浮動(dòng)特性：——如果多個(gè)盒子都設(shè)置了浮動(dòng)，則它們會(huì)在一行內(nèi)顯示、頂端對(duì)齊排列，并且中間沒(méi)有縫隙，緊挨在一起。若父元素容器太窄，無(wú)法容納水平排列的浮動(dòng)元素，那么其他浮動(dòng)元素向下移動(dòng)（掉下來(lái)），直到有足夠的空間。如果浮動(dòng)元素的高度不同，那當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素“卡住”。可以對(duì)<a>設(shè)置float:left;<a>會(huì)頂端對(duì)齊，由于寬度不夠，第5個(gè)<a>會(huì)掉下來(lái)重新在一行排列，但是第1個(gè)<a>高度比較高，第5個(gè)<a>會(huì)被卡住，在第1個(gè)<a>之后排列。如何讓<a>在一行內(nèi)顯示并且頂端對(duì)齊？圖標(biāo)<h1>div.photodiv#photoa>img任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)5.2制作“低碳環(huán)保網(wǎng)”輪播圖效果展示輪播圖就是通過(guò)一定的時(shí)間間隔和動(dòng)畫(huà)特效，讓多張圖片或視頻在同一個(gè)位置上輪流播放的一種顯示形式。知識(shí)儲(chǔ)備邊偏移2z-index屬性3定位模式1目錄Contents知識(shí)儲(chǔ)備1.定位模式那實(shí)現(xiàn)網(wǎng)頁(yè)中元素的位置的精確控制使用什么方法呢？定位/知識(shí)儲(chǔ)備1.定位模式值描述static靜態(tài)定位（默認(rèn)定位方式）fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位relative相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位absolute絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位在CSS中，position屬性用于設(shè)置元素的定位模式。語(yǔ)法格式選擇器{position:屬性值；}知識(shí)儲(chǔ)備1.定位模式靜態(tài)定位是元素的默認(rèn)定位方式，就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。注意：靜態(tài)定位不能使用邊偏移控制元素位置。1.靜態(tài)定位(static）知識(shí)儲(chǔ)備1.定位模式定位前定位后1.設(shè)置背景顏色距離左邊150px距離上邊100pxposition:relative;left:150px;top:100px;在文檔流中的位置仍然保留著相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位。2.相對(duì)定位（relative）知識(shí)儲(chǔ)備1.定位模式定位前定位后距離左邊150px距離頂部100px在文檔流中的位置不保留position:absolute;left:150px;top:100px;絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒(méi)有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。3.絕對(duì)定位(absolute）知識(shí)儲(chǔ)備1.定位模式/固定定位是以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。4.固定定位（fixed）知識(shí)儲(chǔ)備1.定位模式固定定位是相對(duì)于瀏覽器窗口作為參照物來(lái)進(jìn)行定位。絕對(duì)定位父元素沒(méi)有定位的時(shí)候也是相對(duì)于瀏覽器窗口進(jìn)行定位，兩種的區(qū)別在哪里呢？區(qū)別就在于是否隨瀏覽器窗口滾動(dòng)而滾動(dòng)。固定定位不隨瀏覽器窗口滾動(dòng)而滾動(dòng)，始終定位于頁(yè)面中的某個(gè)位置，經(jīng)常用來(lái)制作浮動(dòng)廣告、回到頂部等。知識(shí)儲(chǔ)備2.邊偏移邊偏移屬性描述top頂端偏移量，定義元素相對(duì)于其父元素上邊線(xiàn)的距離bottom底部偏移量，定義元素相對(duì)于其父元素下邊線(xiàn)的距離left左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線(xiàn)的距離Right右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線(xiàn)的距離邊偏移來(lái)精確定義定位元素的位置，屬性有top、bottom、left或right，其取值為不同單位的數(shù)值或百分比。知識(shí)儲(chǔ)備3.z-index屬性當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊定位導(dǎo)致重疊z-index可以調(diào)整重疊定位元素的堆疊順序，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)值是0。解決重疊問(wèn)題總結(jié)所以在一個(gè)固定區(qū)域內(nèi)部有元素需要定位，特別是子元素位于父元素的上浮一層，我們一般讓父元素使用相對(duì)定位，子元素使用絕對(duì)定位，即“子絕父相”?？偨Y(jié)定位模式（重點(diǎn)）：static、fixed、relative、absolute；邊偏移：left、right、top、bottom；z-index屬性：整數(shù)，值越大越在上方。知識(shí)應(yīng)用輪播圖：就是通過(guò)一定的時(shí)間間隔和動(dòng)畫(huà)特效，讓多張圖片或視頻在同一個(gè)位置上輪流播放的一種顯示形式。在很多網(wǎng)站或是應(yīng)用程序中，我們都能夠看到輪播的身影，例如各種廣告、產(chǎn)品宣傳、新聞資訊等。知識(shí)應(yīng)用知識(shí)應(yīng)用/中國(guó)新聞網(wǎng)知識(shí)應(yīng)用馬蜂窩旅游網(wǎng)/知識(shí)應(yīng)用知識(shí)應(yīng)用知識(shí)應(yīng)用/拓展應(yīng)用/任務(wù)分析可以用定位，那用什么定位模式呢？如果讓子元素位于父元素的某一個(gè)位置，即子元素相對(duì)于父元素進(jìn)行定位，那就可以給子元素p、左右箭頭采用絕對(duì)定位，父元素swiper采用相對(duì)定位。輪播圖就是通過(guò)一定的時(shí)間間隔和動(dòng)畫(huà)特效，讓多張圖片或視頻在同一個(gè)位置上輪流播放的一種顯示形式。怎樣讓文字p位于該模塊的底部，圖像的上方，又怎樣讓左右箭頭分別位于左右兩側(cè)？div.swiper<img>a.preva.next<p>任務(wù)實(shí)施任務(wù)實(shí)施3任務(wù)5.3制作“公益行動(dòng)”二級(jí)頁(yè)面效果展示知識(shí)儲(chǔ)備網(wǎng)頁(yè)布局的本質(zhì)就是用CSS來(lái)擺放盒子。一個(gè)模塊是一個(gè)盒子，是一個(gè)局部，把這些盒子擺在一起就是一個(gè)整體。網(wǎng)頁(yè)就是由一個(gè)個(gè)小盒子通過(guò)排列組合形成的。為了約束浮動(dòng)元素位置，網(wǎng)頁(yè)布局一般采取的策略是先用標(biāo)準(zhǔn)流的父元素排列上下位置，之后內(nèi)部子元素采取浮動(dòng)屬性排列左右位置，這也是網(wǎng)頁(yè)布局的一個(gè)準(zhǔn)則。網(wǎng)頁(yè)布局知識(shí)儲(chǔ)備1.常見(jiàn)網(wǎng)頁(yè)布局最簡(jiǎn)單的頁(yè)面布局主要由頭部（header）、焦點(diǎn)圖（banner）、主要內(nèi)容

main）、頁(yè)面底部（footer）等部分組成。

兩列布局組合布局單列布局知識(shí)儲(chǔ)備（1）避免使用中文字符命名。例如：id="導(dǎo)航欄"。（2）不能以數(shù)字開(kāi)頭命名。例如：id="1nav"。（3）不能占用關(guān)鍵字。例如：id="h3"。（4）用最少的字母達(dá)到最容易理解的意義。命名原則2.網(wǎng)頁(yè)模塊命名規(guī)范知識(shí)儲(chǔ)備2.網(wǎng)頁(yè)模塊命名規(guī)范駝峰式命名除了第一個(gè)單詞外，其余單詞的首字母都要大寫(xiě)。例如：partOne。帕斯卡命名每一個(gè)單詞之間用“_”連接。例如：con