HTML5+CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目5 網(wǎng)頁版塊布局

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

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

能夠清除浮動影響

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

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

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

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

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

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

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

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

main）、頁面底部（footer）等部分組成。

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