《HTML5+CSS3Web前端開發項目化教程》

項目5網頁版塊布局任務5.3制作“公益行動”二級頁面03目錄Contents任務5.2制作“低碳環保網”輪播圖02任務5.1制作“低碳環保網”綠水青山模塊01教學目標理解浮動特性掌握清除浮動影響的方法掌握元素的四種定位模式熟悉常見的網頁布局及命名規范1.知識目標能夠對塊元素進行橫排

能夠清除浮動影響

能夠為元素設置常見的定位模式

能夠制作各種banner輪播圖2.技能目標?倡導文明出行、孝敬長輩

培養自主學習和獨立解決問題的能力

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

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

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

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

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

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

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