HTML5+CSS3網(wǎng)頁設計與制作課件：布局網(wǎng)頁

HTML5+CSS3網(wǎng)頁設計與制作布局網(wǎng)頁能夠表述盒模型的結構概念。能夠使用寬高屬性設置標簽大小，使用內外補白屬性設置標簽內外間距。能夠修改標簽的類型，使一種標簽能具有其他標簽的特性。能夠使用浮動和清除浮動屬性，正確控制標簽的排列方式，實現(xiàn)網(wǎng)頁的整體排版布局。能夠綜合運用以上內容完成D清單頁面布局。任務目標

布局網(wǎng)頁本次任務要求根據(jù)D清單網(wǎng)頁效果圖，在基礎上設置網(wǎng)頁每個模塊的寬高、間距，統(tǒng)一網(wǎng)頁的整體布局，并完善各標簽的排版布局。完成后效果圖如圖2-3所示。任務描述圖2-3完成后效果圖

布局網(wǎng)頁要完成D清單頁面每個模塊的寬高、間距設置，并統(tǒng)一網(wǎng)頁的整體布局，需要：學習寬高屬性設置方法，正確使用內外補白屬性設置標簽內外間距；學習浮動和清除浮動屬性的設置方法；分析D清單頁面中格式樣式，正確使用寬、高、邊界、補白設置格式。D清單部分格式樣式分析如圖2-3-1所示。任務分析圖2-3-1D清單部分格式樣式分析圖

布局網(wǎng)頁知識與技能準備網(wǎng)頁中任何元素都可以視為一個盒子，所有盒模型就是頁面元素的基本模型結構。它具有如下特性：每個盒子都有：內容、填充、邊框、邊界4個屬性。每個屬性都包括4個部分：上、右、下、左。屬性的4個部分可同時設置，也可分別設置。如果用一個簡單示意圖來描述盒子屬性與空間關系，則如圖2-3-2所示。1、盒模型結構圖2-3-2盒模型中各個屬性的空間位置關系知識與技能準備CSS盒子模型使用width（寬）和height（高）定義內容區(qū)域的大小。其中寬高屬性可使用px為單位設置固定長度，也可以使用％設置相對長度，％以當前標簽的父標簽為參考。寬高屬性也可以設置為auto（自動），相當于不設置寬高屬性。此時寬度將默認設置為允許的最大值，即等同于父標簽的寬度；高度則將隨標簽的內容自動擴展高度。當標簽設置了寬高后，標簽的大小就被固定了，如果標簽內容超過標簽的大小，那么超出的部分會溢出標簽。2、標簽的寬高屬性語法：width：寬度數(shù)值；height：高度數(shù)值；設置<div>的寬度為250px，高度為120px。課堂練習2-3-1為標簽設置寬高度參數(shù)HTML代碼：CSS代碼：1234567<div><p>明月幾時有？把酒問青天。</p><p>不知天上宮闕，今夕是何年。</p><p>我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。</p><p>起舞弄清影，何似在人間。</p></div>12345div{width:250px;height:120px;border:1pxsolidblack;/*設置邊框*/}顯示效果如下圖所示：圖2-3-3內容溢出標簽知識與技能準備如果希望標簽能保持一定的大小，又能靈活地適應內容或網(wǎng)頁的變化，可以使用以下幾個屬性：min-width：設置標簽寬度的最小值；max-width：設置標簽寬度的最大值；min-height：設置標簽高度的最小值；max-height：設置標簽高度的最大值?？蓪⒕毩?-3-1中的CSS代碼修改如下：顯示效果如下圖所示：2、標簽的寬高屬性12345div{

width:250px;min-height:120px;border:1pxsolidblack;/*設置邊框*/}圖2-3-4自動增加高度以適應內容為<div>標簽設置最小高度200px，寬度為瀏覽器窗口的60％，但要求該寬度隨著瀏覽器寬度變化時，寬度最小不能小于350px，最大不能超過600px。課堂練習2-3-2為標簽設置適應頁面變化的寬度CSS代碼：1234567div{min-height:200px;width:60%;min-width:350px;max-width:600px;border:1pxsolidblack;/*設置邊框*/}知識與技能準備補白是用來調整元素包含的內容與元素邊框的距離，由CSS的padding屬性負責定義。margin屬性用于設置頁面中元素和元素之間的距離，即定義元素周圍的空間范圍，是頁面排版中一個比較重要的概念。其中，auto表示根據(jù)內容自動調整，length表示由浮點數(shù)字和單位標識符組成的長度值或百分數(shù)，百分數(shù)是基于父對象的高度。對于內聯(lián)元素來說，左右外延邊距可以是負數(shù)值。3、標簽的外補白（外邊界）：margin語法：margin：auto|length；知識與技能準備margin屬性包含4個子屬性，分別用于控制元素四周的邊距，如表2-3-1所示。3、標簽的外補白（外邊界）：margin屬性說明margin-top設置元素上邊距margin-right設置元素右邊距margin-bottom設置元素下邊距margin-left設置元素左邊距表2-3-1margin屬性的子屬性知識與技能準備padding與margin屬性一樣，不僅快速簡寫，還可以利用padding-top、padding-right、padding-bottom和padding-left屬性來分別定義四邊的補白大小。與邊界不同，補白取值不可以為負。內外補白都是透明的，在測試時可以設置元素的背景色或邊框，會較直觀的觀察到內外補白的存在。4、標簽的內補白：paddingpadding-top：2px；/*定義元素上補白為2px*/padding-right：2em；/*定義元素右補白為字體的2倍*/Padding-bottom：2%；/*定義元素下補白為父元素寬度的2%*/padding-left：auto；/*定義元素左補白為自動*/padding：2px；/*定義元素四周補白為2px*/padding：2px4px；/*定義上下補白為2px，左右補白為4px*/padding：2px4px6px；/*定義上補白為2px，左右補白4px，下補白為6px*/padding：2px4px6px8px；/*定義上補白為2px，右補白為4px，下補白為6px，左補白為8px*/制作如圖2-3-5所示的樣式效果，固定<div>標簽內容的寬度，并在瀏覽器中居中放置，<div>標簽之間存在15px邊界，字體與邊框之間存在20px補白。課堂練習2-3-3設置標簽的內外邊距顯示效果如下圖所示：圖2-3-5設置標簽的內外邊距課堂練習2-3-3設置標簽的內外邊距HTML代碼：CSS代碼：123456789101112<section><divclass="d1"><p>明月幾時有？把酒問青天。</p><p>不知天上宮闕，今夕是何年。</p></div><divclass="d2"><p>明月幾時有？把酒問青天。</p><p>不知天上宮闕，今夕是何年。</p></div></section>1234567891011*{/*清除標簽默認樣式*/padding:0;margin:0}div{width:250px;border:1pxsolidblack;/*設置邊框*/margin:15pxauto;/*設置標簽水平居中*/padding:20px;}部分標簽自帶margin屬性，如p、h1~h6、body標簽等，在布局排版時需注意。知識與技能準備多個垂直排列的塊標簽的上下邊界會出現(xiàn)重疊或溢出的特殊情況，如練習2-3-3，我們?yōu)闃撕?lt;section>添加背景顏色background：darkgray，可看到實際效果如圖2-3-6所示：5、邊界的重疊和溢出圖2-3-6邊界的重疊和溢出效果知識與技能準備從圖2-3-6中可發(fā)現(xiàn)垂直方向上的邊界有這些特殊效果：（1）相互鄰接的上下邊界會相互重疊，如果上下邊界的數(shù)值不一樣，默認取最大值作為兩個標簽的邊距。（2）第一個標簽的上邊界和最后一個標簽的下邊界會溢出父標簽的范圍，溢出的邊界還是會占用網(wǎng)頁面積。為了解決上下邊界的溢出問題，可使用兩種方法來解決。（1）使用父標簽的填充代替邊界。（2）在開頭和結尾的位置分別添加一個高度為0px的塊標簽，使溢出無效。5、邊界的重疊和溢出HTML代碼修改如下：CSS代碼補充以下內容：1234567891011121314<section><pclass="null"> </p><divclass="d1"><p>明月幾時有？把酒問青天。</p><p>不知天上宮闕，今夕是何年。</p></div><divclass="d2"><p>明月幾時有？把酒問青天。</p><p>不知天上宮闕，今夕是何年。</p></div><pclass="null"> </p></section>1234.null{line-height:0;margin:0;}標簽<pclass=”null”>不能為空，否則無效。所以使用空格“ ；”作為內容，并設置行高為0，使標簽無高度，不影響頁面效果。知識與技能準備知識與技能準備最終顯示效果如下圖所示：5、邊界的重疊和溢出圖2-3-7溢出無效知識與技能準備在項目1中學習過塊元素、內聯(lián)元素等標簽類型，其中內聯(lián)元素標簽是無法設置寬高度的，這時可通過CSS的display屬性修改標簽的類型，將其修改為塊元素或內聯(lián)塊元素，使寬高可生效。其中none表示隱藏對象；block指定對象為塊元素；inline指定對象為內聯(lián)元素；inline-block指定對象為內聯(lián)塊元素；list-item指定對象為列表元素。除了以上標簽類型外，還有針對表格的table類型系列，最新的彈性盒子flex、inline-flex類型，請自行查閱資料學習。6、標簽的類型設置語法：display：none|block|inline|inline-block|list-item|…；使用<a>標簽制作如圖2-3-8所示的樣式效果，設置<a>標簽類型為塊元素，使其垂直排列，并設置固定的寬高為80px×30px（可添加背景、邊界、補白識別標簽的區(qū)域）。課堂練習2-3-4使用display屬性制作垂直排列的超鏈接列表顯示效果如下圖所示：圖2-3-8垂直排列的超鏈接列表HTML代碼：1234<ahref="#">首頁</a><ahref="#">企業(yè)福利</a><ahref="#">購物車</a><ahref="#">個人中心</a>CSS代碼：123456789a{display:block;/*設置為塊元素*/width:80px;line-height:30px;/*行高為30px*/background:gray;/*背景為灰色*/color:white;margin:5px;padding-left:10px;}知識與技能準備若要使多個標簽水平排列，且可控制寬高，使用塊元素和內聯(lián)元素都不能滿足，使用內聯(lián)塊元素（inline-block）也不能精確的設置，這時需要使用CSS的浮動屬性float。其中none表示元素不浮動；left表示元素向左浮動；right表示元素向右浮動。說明：設置了float屬性的標簽display屬性將會失去效果（除了display：none），將采用新的排版規(guī)則，標簽按設置的方向水平排列，標簽之間頂端對齊，寬高可設置。例如：為練習2-3-4的<a>標簽添加“float：left；”屬性，標簽將從垂直排列變?yōu)樗脚帕?。顯示效果如圖2-3-9所示：如果將標簽設置為“float：right；”標簽將從右向左依次排列，如圖2-3-10所示（注意標簽的排列順序）：7、使用float屬性設置標簽的水平排列語法：float：none|left|right；圖2-3-9水平排列的超鏈接列表圖2-3-10從向右向左排列的超鏈接列表課堂練習2-3-5使用float屬性進行網(wǎng)頁布局HTML代碼：CSS代碼：123456<divclass="main"><header>頭部</header><article>主欄</article><aside>側邊欄</aside><footer>底部</footer></div>123456789101112131415161718*{/*清除標簽默認樣式*/margin:0px;padding:0px;}.main{width:500px;margin:0auto;/*設置網(wǎng)頁居中對齊*/}header,aside,article,footer{background:gray;/*背景顏色*/border:1pxsolidblack/*邊框*/}aside{float:right;/*向右浮動*/width:30%;height:100px;}article{float:left;/*向左浮動*/width:60%;height:100px;}課堂練習2-3-5使用float屬性進行網(wǎng)頁布局顯示效果如下圖所示：圖2-3-11使用float屬性進行網(wǎng)頁布局知識與技能準備從圖2-3-11中可看出，設置了float的標簽并不占用網(wǎng)頁的面積，后面不設置float的標簽會與其重合，文字會以環(huán)繞方式排列。為了避免這種情況，可對緊接浮動標簽的后一個標簽設置浮動清除clear屬性，該屬性可讓浮動標簽恢復為占用網(wǎng)頁面積的狀態(tài)，可停止浮動標簽對后續(xù)的影響。none是默認值，允許兩邊都可以存在浮動元素，當前元素不會主動換行顯示；both表示清除左右兩邊浮動元素，不管哪邊存在浮動對象，則當前元素都會換行顯示；left表示清除左邊浮動元素，如果左邊存在浮動元素，則當前元素會換行顯示；right表示清除右邊的浮動元素，如果右邊存在浮動元素，則當前元素會換行顯示。8、使用clear屬性清除float屬性對后續(xù)標簽帶來的影響語法：clear：none|both|left|right；知識與技能準備一般情況，會在浮動標簽后，使用一個空的<div>標簽來實現(xiàn)浮動清除，該標簽在頁面中不可見。練習2-3-5中的HTML代碼修改如下：修改后顯示效果如下圖所示：8、使用clear屬性清除float屬性對后續(xù)標簽帶來的影響HTML代碼修改如下：CSS代碼補充以下內容：1234567<divclass="main"><header>頭部</header><article>主欄</article><aside>側邊欄</aside><divclass="clear"></div><footer>底部</footer></div>1.clear{clear:both}圖2-3-12清除float屬性對后續(xù)標簽帶來的影響任務實施1、在CSS的“通用樣式設定”部分，添加下面的內容：（1）清除所有標簽自帶的內外邊距值。（2）設置<article>標簽的補白。（3）設置段落的補白。（4）定義出“.clear”選擇符，用于清除浮動。（5）定義出“.center”選擇符，用于設置文本居中。123456*{padding:0;margin:0}article{padding:3rem30px3rem;}p{padding:0.625rem0;}.clear{clear:both;}.center{text-align:center;}任務實施2、設置<header>部分的樣式，添加填充產(chǎn)生間距，高度可不設置，高度將根據(jù)內容的高度自動適應，寬度將自動等同于瀏覽器寬度。將<header>內的logo“D清單”設置為左浮動，<nav>設置右浮動，但該部分暫時不設置，為了不影響頁面的排版，可設置為隱藏。另外，要在浮動的結尾添加清除浮動的標簽。HTML代碼：CSS代碼：123456789101112131415161718<!--網(wǎng)頁頭部--><header><ahref="#"class='logo'><imgsrc="img/logo.png"></a><nav><spanclass="icon_menu"></span><ul><li>首頁</li><li>功能介紹</li><li>下載應用</li><li>高級會員</li><li>幫助中心</li><li>聯(lián)系我們</li></ul></nav><divclass="clear"></div></header>123456789101112/*網(wǎng)頁頭部樣式設定*/header{padding:20px;}header.logo{ float:left; font-size:2.6rem;}headernav{ float:right; width:54px; margin:4px;display:none;/*暫時隱藏*/}任務實施顯示效果如下圖所示。圖2-3-13設置為左浮動效果任務實施3、設置“home”部分，為該模塊的<article>標簽添加“class=’homecenter’”附加文字居中效果。顯示效果如下圖所示：HTML代碼：CSS代碼：123456789<!--home模塊--><articleclass='homecenter'><h1>達成更多，用心生活。</h1><p>與全球千萬用戶一起，在D清單中記錄和規(guī)劃大小事務。<br>

用更少的時間達成目標，從冗雜的待辦事項中解脫出來。</p><ahref="#">100%免費-下載應用</a></article>1234/*home模塊樣式設定*/.homeh1{color:#1B75BC;}.homea{font-weight:600;}.homep{font-size:20px;}圖2-3-14home模塊設置效果任務實施4、后面的幾個模塊（about