HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第2版）課件 湯佳 單元6-8 頁面整體布局、Bootstrap5框架簡介、HTML5綜合案例

頁面整體布局單元6目錄02clearfix和clear的使用03常用經(jīng)典布局01960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用04常用彈性布局05表格基本知識06使用表格制作個人簡歷07使用表格制作QQ郵箱08使用基于lib-flexible庫的rem單位制作app6-1HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用任務(wù)6-1

960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用960網(wǎng)格系統(tǒng)是使用固定寬度960px置中對齊畫面的方式呈現(xiàn)在網(wǎng)頁上。去除左右兩邊各10px的空間，留下中間940px的區(qū)塊以20px作為間隔分欄。在空間設(shè)計上，可隨意合并多欄作為版面配置及網(wǎng)頁尺寸的設(shè)定，合并出來的欄寬也不會有畸零數(shù)，有利于CSS中DIV寬度的設(shè)定。960網(wǎng)格系統(tǒng)常用規(guī)格有兩種：一個是12欄式的，另一個是16欄式的。如果你的設(shè)計里面分3個區(qū)塊你就選擇12欄式的，那是因為12能被3整除；同理假如你的設(shè)計分四個區(qū)塊，你可以選12欄式或者16欄式，那時因為12和16都可以被4整除。任務(wù)6-1

960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用任務(wù)6-1

960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用〓

兩欄網(wǎng)頁任務(wù)6-1

960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用〓

不均分三欄任務(wù)6-1

960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用〓

均分三欄任務(wù)6-1

960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用〓

均分四欄6-2HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）clearfix和clear的使用任務(wù)6-2

clearfix和clear的使用1、clear:both在父層<div>內(nèi)，子層<div>結(jié)束處加入<div>，設(shè)置clear:both在左右兩側(cè)均不允許浮動元素。但是這么做會增加一個沒有意義的<div>。2、.clearfix:after.clearfix:after{/*在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容*/content:".";/*內(nèi)容為“.”就是一個英文的句號而已。也可以不寫*/display:block;/*加入的這個元素轉(zhuǎn)換為塊級元素*/clear:both;/*清除左右兩邊浮動*/visibility:hidden;/*設(shè)置為隱藏。它和display:none;是有區(qū)別的。仍然占據(jù)空間，只是看不到而已*/height:0;/*高度為0*/font-size:0;/*字體大小為0*/}任務(wù)6-2

clearfix和clear的使用1、clear:both表示“清除浮動”。both會在兩側(cè)清理浮動，并將其左邊和右側(cè)的浮動元素移除。簡單來說，就是誰設(shè)定了“clear:both”，哪個元素不能出現(xiàn)在左邊和右邊。按照定義，寫入了clear:both的元素不再允許周圍有浮動的元素產(chǎn)生，所以div.left對于div.right也就失去了浮動的效果，div.left對于div.right來說也就有了高度，div.right就會位于div.left的下面，div.right的位置也就撐起了父級元素的高度，解決了高度坍塌的問題。任務(wù)6-2

clearfix和clear的使用2、clearfix整段代碼就相當(dāng)于在浮動元素后面跟了個寬高為0的空<div>，然后設(shè)定它clear:both來達到清除浮動的效果。原理是經(jīng)過使用after偽對象，它將在應(yīng)用clearfix的元素結(jié)尾添加content中的內(nèi)容，也就是一個"."，并且把他設(shè)置為塊級元素（display="block"）；高度設(shè)置為0，clear="both"，然后將其內(nèi)容隱藏掉（visibility="hidden"），這樣就會撐開此塊級元素。之所以用它，是因為，你不必在HTML文件中寫入大量無意義的空標簽，又能清除浮動。任務(wù)6-2

clearfix和clear的使用6-3HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）常用經(jīng)典布局任務(wù)6-3

常用經(jīng)典布局任務(wù)6-3

常用經(jīng)典布局任務(wù)6-3

常用經(jīng)典布局任務(wù)6-3

常用經(jīng)典布局一、頁面結(jié)構(gòu)容器:container頁頭：header內(nèi)容：content/container頁面主體：main頁尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：leftrightcenter任務(wù)6-3

常用經(jīng)典布局〓Div+CSS命名規(guī)范二、導(dǎo)航導(dǎo)航：nav主導(dǎo)航：mainnav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar菜單：menu子菜單：submenu標題:title摘要:summary任務(wù)6-3

常用經(jīng)典布局〓Div+CSS命名規(guī)范三、功能標志：logo廣告：banner登陸：login登錄條：loginbar注冊：regsiter搜索：search功能區(qū)：shop標題：title加入：joinus狀態(tài)：status按鈕：btn滾動：scroll標簽頁：tab文章列表：list提示信息：msg當(dāng)前的:current小技巧：tips圖標:icon注釋：note指南：guild服務(wù)：service熱點：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyright6-4HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）常用彈性布局任務(wù)6-4

常用彈性布局〓百分比布局任務(wù)6-4

常用彈性布局〓

圣杯布局任務(wù)6-4

常用彈性布局〓

側(cè)邊固定寬度任務(wù)6-4

常用彈性布局彈性布局，即Flex布局，是CSS3中的一種新的布局模式，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局，當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時非常適用。目前，幾乎所有的瀏覽器都支持Flex布局。Flex語法如下：flex:flex-growflex-shrinkflex-basis|auto|initial|inherit;flex-grow：一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行擴展的量。flex-shrink：一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行收縮的量。flex-basis：項目的長度。1、百分比分別設(shè)置：flex:0050%;，flex:0033.3%;2、上下左右四塊都設(shè)置：flex:00100px;3、側(cè)邊欄設(shè)置：flex:0020%;內(nèi)容設(shè)置flex:1;頁腳設(shè)置flex:0010%;6-5HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）表格基本知識任務(wù)6-5

表格基本知識〓

表格的基本屬性及使用網(wǎng)頁中的表格使用<table>標簽表示，以<table>標記開始，以</table>標記結(jié)束。表格的基本構(gòu)成最少需要三個元素：<table>、<tr>、<td>，其他的一些作為可選輔助存在。<table> 表示表格<thead> 表示表頭<tbody> 表示表格主體<tfoot> 表示表腳<tr> 表示一行<th> 表示標題行單元格<td> 表示單元格<col> 表示一列<colgroup> 表示一組列<caption> 表示表格標題任務(wù)6-5

表格基本知識〓

表格的基本屬性及使用網(wǎng)頁中的表格使用<table>標簽表示，以<table>標記開始，以</table>標記結(jié)束。表格的基本構(gòu)成最少需要三個元素：<table>、<tr>、<td>，其他的一些作為可選輔助存在。<table>：表示表格

<tr>：表示一行<thead>：表示表頭

<th>：表示標題行單元格<tbody>：表示表格主體

<td>：表示單元格<tfoot>：表示表腳

<col>：表示一列<caption>：表示表格標題

<colgroup>：表示一組列任務(wù)6-5

表格基本知識〓

表格的基本操作<table>標簽常用屬性<td>表示表格中的單元格，包括如下屬性：1、colspan：規(guī)定單元格可橫跨的列數(shù)；2、rowspan：規(guī)定單元格可橫跨的行數(shù)；3、headers：規(guī)定與單元格相關(guān)的表頭，該屬性不會在普通瀏覽器中產(chǎn)生任何視覺變化，但可以被屏幕閱讀器使用。任務(wù)中所表示的列內(nèi)合并單元格、行內(nèi)合并單元格以及合并兩行兩列需要用到colspan和rowspan屬性。任務(wù)6-5

表格基本知識〓

表格的基本屬性及使用任務(wù)6-5

表格基本知識〓

制作細邊框表格1、cellspacing：單元格之間的距離。cellpadding：文字與單元格之間的距離。2、border-collapse屬性設(shè)置表格的邊框是否被合并為一個單一的邊框。separate默認值。邊框會被分開。不會忽略border-spacing和empty-cells屬性。collapse如果可能，邊框會合并為一個單一的邊框。會忽略border-spacing和empty-cells屬性。當(dāng)border-collapse設(shè)置為collapse時，表格自身的border與cellspacing屬性便沒有作用了。任務(wù)6-5表格基本知識〓

制作細邊框表格常用的制作細邊框表格方法有三種，分別是：1、背景設(shè)置式：通過將表格背景色設(shè)置為黑色，將單元格背景設(shè)置為白色，并且將單元格之間的距離cellspaceing設(shè)置為大于0的數(shù)，從而讓邊框顯示為黑色，cellspaceing值越大，表格框線越粗。2、邊框設(shè)置式：通過直接設(shè)置表格的邊框來實現(xiàn)細邊框表格，為了方便查看，通過不同顏色的線條來顯示邊框線，tableborder是表格外一圈邊框，tdborder是單元格邊框thborder是表頭邊框。即在設(shè)置邊框時如果表格外邊框只設(shè)置上、右邊框，單元格只設(shè)置下、左邊框，保證邊框不重復(fù)設(shè)置即可。3、層疊式：為表格<td>、<th>標簽設(shè)置了邊框線后，因內(nèi)邊框的線條重復(fù)設(shè)置，導(dǎo)致內(nèi)邊框線條較粗，影響美觀，所以在表格CSS樣式中需要設(shè)置border-collapse屬性。任務(wù)6-5表格基本知識〓

制作細邊框表格任務(wù)6-5

表格基本知識〓

表格寬高百分比設(shè)置一個<div>塊級元素沒有主動為其設(shè)置寬度和高度，瀏覽器會為其分配可使用的最大寬度(比如全屏寬度)，但是不負責(zé)分配高度，塊級元素的高度是由子元素堆砌撐起來的。那么，html和body標簽的高度也都是由子級元素堆砌撐起來的。瀏覽器默認寬度100%，高度為內(nèi)容的高度，如果沒有內(nèi)容則高度為0。如果表格高度100%和寬度100%生效，為瀏覽器設(shè)置html,body{width:100%;height:100%}任務(wù)6-5

表格基本知識〓

表格寬高百分比設(shè)置任務(wù)6-5

表格基本知識〓

表格寬度、列寬度和行高度的設(shè)置1、通過設(shè)置表格屬性align="center"。設(shè)置表格在網(wǎng)頁居中。2、表格寬度在CSS樣式中統(tǒng)一設(shè)置，本著“結(jié)構(gòu)、表現(xiàn)、行為分離”的原則，一般不直接在<table>屬性中設(shè)置。3、表格共有四列，在表格寬度設(shè)置好的情況下，一般不會四列都設(shè)置寬度，會留一列讓其“自由呼吸”。4、表格一般都不設(shè)置高度，高度根據(jù)內(nèi)容自由伸展。5、細邊框表格可使用任務(wù)5-3中的第三種方法進行設(shè)置，即使用：border-collapse:collapse;設(shè)置單元格內(nèi)容居中需要設(shè)置text-align:center;6、CSS3:nth-child(n)選擇器可匹配屬于其父元素的第n個子元素，不論元素的類型，其中n可以是數(shù)字、關(guān)鍵詞或公式。例如要求表中第一、二列的樣式相同就應(yīng)該使用：trtd:nth-child(1),trtd:nth-child(2){……}任務(wù)6-5

表格基本知識〓

表格寬度、列寬度和行高度的設(shè)置任務(wù)6-5

表格基本知識〓

表格隔行變色本任務(wù)我們使用了CSS3:nth-child()選擇器設(shè)置奇數(shù)行相同背景色和字體顏色，這個偽類選擇器的使用方法具體如下：:nth-child(an+b)匹配文檔樹中在其之前具有an+b-1個兄弟節(jié)點的元素，其中n為正值或零值。簡單點說就是，這個選擇器匹配那些在同系列兄弟節(jié)點中的位置與模式an+b匹配的元素。示例：1、0n+3或簡單的3匹配第三個元素。2、1n+0或簡單的n匹配每個元素。3、2n+0或簡單的2n匹配位置為2、4、6、8...的元素。你可以使用關(guān)鍵字even（偶數(shù)）來替換此表達式。4、2n+1匹配位置為1、3、5、7...的元素。你可以使用關(guān)鍵字odd（奇數(shù)）來替換此表達式。5、3n+4匹配位置為4、7、10、13...的元素。總之，a和b都必須為整數(shù)，并且元素的第一個子元素的下標為1。換言之就是，該偽類匹配所有下標在集合{an+b;n=0,1,2,...}中的子元素。任務(wù)6-5

表格基本知識〓

表格隔行變色任務(wù)6-5

表格基本知識〓

鼠標移上去表格行變色:hover選擇器在實現(xiàn)超鏈接任務(wù)時使用過，其實這個偽類選擇器是用于選擇鼠標指針浮動在上面的元素，可用于所有元素，其中超鏈接標簽<a>最多使用這個偽類選擇器。任務(wù)中就需要將這個偽類選擇器用于表格的行元素。即：tr:hover{……}任務(wù)6-5

表格基本知識〓

鼠標移上去表格行變色6-6HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）使用表格制作個人簡歷任務(wù)6-6

使用表格制作個人簡歷1、根據(jù)任務(wù)要求可知本任務(wù)的頁面文件的主體內(nèi)容就是一個表單<form>，在表單內(nèi)插入<h1>標記，用來做標題，寫清楚任務(wù)的主題：個人簡歷。結(jié)合效果圖設(shè)置body、字體、背景等樣式。2、<form>標簽內(nèi)插入13行6列的<table>標簽，可使用類選擇器設(shè)置表格的樣式，設(shè)置表格寬度為960px。依照效果圖設(shè)置表格的行和列，并可分別使用類選擇器設(shè)置表格的每一列以及不同單元格的樣式，注意文字居中效果。3、將表格設(shè)置為細邊框，同時設(shè)置單元格內(nèi)容與邊框之間的距離。4、結(jié)合表格的整體寬度適當(dāng)?shù)卦O(shè)置列的寬度，并按照要求合并單元格。例如<tdcolspan="2"rowspan="5"></td>為合并5行2列，合并完用來放置照片。5、注意個人簡歷中的標題單元格都是灰色背景，字體加粗的，需要進行單獨設(shè)置。至此，可以完成個人簡歷框架頁面效果，下面為進行內(nèi)容的填充。任務(wù)6-6

使用表格制作個人簡歷任務(wù)6-6

使用表格制作個人簡歷6、每個單元格內(nèi)填寫文字，文本框，單選框、復(fù)選框、下拉列表、圖片等不需要插入。7、自我評價的文字，放入段落<p>標記內(nèi)，設(shè)置字體時，先寫英文字體，再寫中文字體，會優(yōu)先匹配使用英文字體，但是在英文字體中找不到中文字符，這樣中文就會自動使用后寫的中文字體了。8、工作經(jīng)驗欄對應(yīng)的內(nèi)容是一個沒有邊框線的表格，表格3行3列，根據(jù)效果圖分析可設(shè)置其寬度為700px，第一列左對齊，第二列左對齊，第三列居中對齊。9、性別，插入單選按鈕組，注意name="sex"；政治面貌，插入單選按鈕組，注意name="organization"；熟練程度，插入單選按鈕組，注意name="degree"；計算機水平，插入單選按鈕組，注意name="level"；愛好特長，插入復(fù)選按鈕組，注意name="hobby"，checked="value"disabled="disabled"表示此項默認選中且不可編輯。name一致表示為同一組別。任務(wù)6-6

使用表格制作個人簡歷10、插入照片，設(shè)置<td>的樣式align="center"valign="middle"，使得照片上下居中，左右居中。11、民族對應(yīng)的內(nèi)容采用<select>制作下拉列表，<option>為菜單項，<optionvalue="1"selected>漢</option>代表默認值是"漢"。12、設(shè)置我的主頁，使用超鏈接，顯示在新頁面中，即target="_blank"。13、設(shè)置手機輸入11個字符，maxlength="11"，表示文本框最多輸入11位。14、采用<ol>有序列表，制作獎懲情況，采用<ul>無序列表，制作個人簡歷，其中個人簡歷的單元格<td>設(shè)置上下居中valign=“middle”。無論是有序列表還是無序列表，每個列項內(nèi)容都是使用<li>...</li>標記的。任務(wù)6-6

使用表格制作個人簡歷6-7HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）使用表格制作QQ郵箱任務(wù)6-7

使用表格制作QQ郵箱〓

框架制作1、插入兩行兩列的表格，設(shè)置屬性border="0"cellspacing="0"cellpadding="0"，合并第一行單元格。2、新建類.table-out修飾表格width:100%height:100%，此時高度不起作用。3、樣式表設(shè)置html，body樣式margin:0，padding:0，width:100%，height:100%，為了讓表格撐滿整個瀏覽器。4、新建類.row-one，修飾表格第一行，根據(jù)上面背景圖片的高度，設(shè)置height:67px（根據(jù)top_bg.jpg的高度來設(shè)置）。5、新建類.col-one，修飾表格第一列，根據(jù)左面菜單圖片的寬度，設(shè)置width:188px（根據(jù)left-1.png的寬度來設(shè)置，left-1.png、left-2.png、left-3.png寬度一致）。左面菜單可以自行采用ps工具進行裁切。任務(wù)6-7

使用表格制作QQ郵箱〓

框架制作任務(wù)6-7

使用表格制作QQ郵箱〓

上部、左部內(nèi)容填充6、在table.table-out表格第一行內(nèi)插入一行三列表格，表格border="0"cellspacing="0"cellpadding="0"。第一列和第三列需要設(shè)置寬度，第二列不需要設(shè)置。第一列和第三列都把圖像設(shè)置為背景。7、新建類.table-top：height:67pxwidth:100%修飾上面一行三列的表格。8、新建類.logo，根據(jù)logo圖片的大小，設(shè)置width:201px（根據(jù)logo.png的寬度來設(shè)置），高度不需要設(shè)置，因為表格已經(jīng)具有高度67px，設(shè)置背景為logo.png背景不重復(fù)background-repeat:norepeat；新建類.topbg：width:463px（根據(jù)top_bg.jpg的寬度來設(shè)置）高度也不需要設(shè)置，設(shè)置背景為topbg.jpg，背景不重復(fù)background-repeat：norepeat。.logo、.topbg分別修飾table.table-top的第一列和第三列。9、在table.table-out表格第二行第一列下插入三行一列表格，表格border="0"cellspacing="0"cellpadding="0"。第一行和第三行需要設(shè)置高度，第二行不需要設(shè)置。10、新建類.table-left修飾左面的三行一列的表格，width:188pxheight:100%，用來放左面的導(dǎo)航。11、新建類.row-1：height:120px（根據(jù)left-1.png的高度來設(shè)置）背景設(shè)置成left-1.png；新建類.row-2高度不要設(shè)置，背景設(shè)置成left-2.png；新建類.row-3：height:12px（根據(jù)left-3.png的高度來設(shè)置）背景設(shè)置成left-3.png。.row-1、.row-2、.row-3分別修飾table.table-left的第一行、第二行和第三行。任務(wù)6-7

使用表格制作QQ郵箱〓

上部、左部內(nèi)容填充任務(wù)6-7

使用表格制作QQ郵箱〓

右部內(nèi)容填充12、設(shè)置表格第二行第二列對齊方式為垂直頂端對齊并插入兩行一列表格，表格border="0"cellspacing="0"cellpadding="0"。13、新建類.table-right：width:100%height:100%，用來修飾右面插入的兩行一列的表格。14、新建類.row-4，height:6px（根據(jù)right-1.png、right-2.png的高度來設(shè)置），背景設(shè)置為right-2.png，用來修飾右面表格的第一行。15、在右面表格第一行插入right-1.png，制作圓角。16、在右面表格第二行，插入<iframe>標簽，新建類.frame：width:100%height:100%，用來修飾<iframe>標簽。設(shè)置用來放置郵箱內(nèi)容，郵箱內(nèi)容在另一個網(wǎng)頁單獨制作。任務(wù)6-7

使用表格制作QQ郵箱〓

右部內(nèi)容填充6-8HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）使用基于lib-flexible庫的rem單位制作app任務(wù)6-8

使用基于lib-flexible庫的rem單位制作app任務(wù)6-8

使用基于lib-flexible庫的rem單位制作apprem基本知識：1、rem是CSS3新增的一個相對單位（rootem，根em）。使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前所有的瀏覽器（ie8及以下版本除外）都支持rem。2、rem的計算方法：需轉(zhuǎn)換的px值/自適應(yīng)對象寬度px值*10。3、通常在寫移動端頁面的時候，我們都會設(shè)置viewport，保證頁面縮放沒有問題，最常見的viewport的meta標簽如下：<metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>4、文本字號不建議使用rem。任務(wù)6-8

使用基于lib-flexible庫的rem單位制作app制作步驟：1、制作頭部和banner制作我們搭建各頁面相同的框架部分，包含頂部菜單欄、搜索框、banner以及底部工具欄。采用position:fixed;屬性固定頂部和底部菜單。2、底部導(dǎo)航制作我們采用<UL>制作底部菜單欄，每個菜單的寬度為2.5rem。3、主頁面菜單制作主頁菜單和底部導(dǎo)航的制作方法類似，寬度根據(jù)實際需求來計算，窗口的寬度為10rem。4、index.html、author.html、book.html、logon.html的制作可以參考之前所學(xué)知識。任務(wù)6-8

使用基于lib-flexible庫的rem單位制作app頁面整體布局單元6Bootstrap5框架簡介單元7目錄02制作柵格化布局頁面03制作響應(yīng)式導(dǎo)航欄01Bootstrap5基礎(chǔ)知識04制作響應(yīng)式輪播圖05制作響應(yīng)式文字和圖片06制作完整的響應(yīng)式網(wǎng)站7-1HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）Bootstrap5基礎(chǔ)知識任務(wù)7-1Bootstrap5基礎(chǔ)知識什么是響應(yīng)式網(wǎng)站？響應(yīng)式網(wǎng)站是一種網(wǎng)頁布局能夠兼容多個終端的網(wǎng)站，無論用戶使用筆記本、平板還是移動終端，頁面都能夠自動切換分辨率以適應(yīng)不同設(shè)備。換句話說，頁面應(yīng)該有能力去自動響應(yīng)用戶的設(shè)備環(huán)境，具體效果如圖所示。任務(wù)7-1Bootstrap5基礎(chǔ)知識<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">這段代碼的幾個參數(shù)解釋：width=device-width：寬度等于當(dāng)前設(shè)備的寬度。height=device-height：高度等于當(dāng)前設(shè)備的高度。initial-scale：初始的縮放比例（默認設(shè)置為1.0）。minimum-scale：允許用戶縮放到的最小比例（默認設(shè)置為1.0）。maximum-scale：允許用戶縮放到的最大比例（默認設(shè)置為1.0）。user-scalable：用戶是否可以手動縮放（默認設(shè)置為no，因為我們不希望用戶放大縮小頁面）。任務(wù)7-1Bootstrap5基礎(chǔ)知識遠程調(diào)用Bootstrap5框架<linkhref="/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>7-2HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）制作柵格化布局頁面任務(wù)7-2制作柵格化布局頁面〓

寬度≥1400px顯示1行12列任務(wù)7-2制作柵格化布局頁面〓

寬度≥1200px且<1400px顯示2行6列任務(wù)7-2制作柵格化布局頁面〓

寬度≥992px且<1200px顯示3行4列任務(wù)7-2制作柵格化布局頁面〓

寬度≥768px且<992px顯示4行3列任務(wù)7-2制作柵格化布局頁面〓

寬度≥576px且<768px顯示2行6列任務(wù)7-2制作柵格化布局頁面〓

寬度<576px顯示12行1列任務(wù)7-2制作柵格化布局頁面設(shè)備項目超小設(shè)備<576px平板≥576px桌面顯示器≥768px大桌面顯示器≥992px特大桌面顯示器≥1200px超大桌面顯示器≥1400px容器最大寬度None(auto)540px720px960px1140px1320px類前綴.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-列數(shù)量和12間隙寬度1.5rem（一個列的每邊分別.75rem）可嵌套Yes列排序Yes任務(wù)7-1Bootstrap5基礎(chǔ)知識1、.container類，如果視口寬度<576px，容器的實際寬度將為100%。如果視口寬度≥576px但<768px，則為540px；如果視口寬度≥768px但<992px，則為720px；如果視口寬度≥992px但<1200px，則為960px；如果視口寬度≥1200px但<1400px，則為1140px；如果視口寬度≥1400px，則為1320px。2、.container-fluid類，創(chuàng)建一個寬度為100%的容器。無論設(shè)備或屏幕尺寸如何，流體容器的寬度將始終為100%，網(wǎng)頁兩側(cè)沒有留白。3、.row元素向左和向右擴展15px。.container有個15px的padding，而我們設(shè)定的每個.col也都有15px的padding，如果兩者直接配合，那么就會產(chǎn)生30px的間距，導(dǎo)致內(nèi)容和瀏覽器邊框的距離較大，所以用.row將所有的col包裹，.row會有一個-15px的margin，可以抵消掉一個.container或.col產(chǎn)生的15px的padding值。7-3HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）制作響應(yīng)式導(dǎo)航欄任務(wù)7-3制作響應(yīng)式導(dǎo)航欄〓PC端樣式任務(wù)7-3制作響應(yīng)式導(dǎo)航欄〓

移動端樣式任務(wù)7-3制作響應(yīng)式導(dǎo)航欄1、使用<nav>標簽采用.navbar類創(chuàng)建標準導(dǎo)航欄，再使用響應(yīng)式折疊類.navbar-expand-xxl|xl|lg|md|sm在特大、超大、大、中型設(shè)備或小屏幕上實現(xiàn)垂直堆疊導(dǎo)航欄。2、使用<button>標簽設(shè)置class="navbar-toggler"、data-bs-toggle="collapse"和data-bs-target="#thetarget"實現(xiàn)折疊按鈕。然后將導(dǎo)航欄內(nèi)容（鏈接等）包裹在class="collapsenavbar-collapse"的<div>元素中，后跟與按鈕的data-bs-target匹配的ID："thetarget"。3、如需在導(dǎo)航欄中添加鏈接，則使用class="navbar-nav"的<ul>元素（或<div>）。然后添加帶有.nav-item類的<li>元素，后跟帶有.nav-link類的<a>元素。將.active類添加到<a>元素可突出顯示當(dāng)前鏈接，或添加.disabled類來指示鏈接不可點擊。4、.navbar-brand類用于突出顯示頁面的品牌/標志/項目名稱：<aclass="navbar-brand"href="#">Logo</a>5、導(dǎo)航欄可以固定在頁面的頂部或底部，固定導(dǎo)航欄會在獨立于頁面滾動的固定位置（頂部或底部）保持可見。.fixed-top類使導(dǎo)航欄固定在頁面的頂部，.fixed-bottom類把導(dǎo)航欄停留在頁面底部。7-4HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）制作響應(yīng)式輪播圖任務(wù)7-4制作響應(yīng)式輪播圖〓PC端樣式任務(wù)7-4制作響應(yīng)式輪播圖〓

移動端樣式任務(wù)7-4制作響應(yīng)式輪播圖1、.carousel：創(chuàng)建一個輪播。2、.carousel-indicators：為輪播添加一個指示符，就是輪播圖底下的一個個小點，輪播的過程可以顯示目前是第幾張圖。3、.carousel-inner：存放圖片的標簽，按鈕不在里面。4、.carousel-item：指定每個圖片的內(nèi)容。5、.carousel-control-prev：添加左側(cè)的按鈕，點擊會返回上一張。6、.carousel-control-next：添加右側(cè)按鈕，點擊會切換到下一張。7、.carousel-control-prev-icon與.carousel-control-prev一起使用，設(shè)置左側(cè)的按鈕。8、.carousel-control-next-icon與.carousel-control-next一起使用，設(shè)置右側(cè)的按鈕。9、.slide：切換圖片的過渡和動畫效果，如果你不需要這樣的效果，可以刪除這個類。7-5HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）制作響應(yīng)式文字和圖片任務(wù)7-5制作響應(yīng)式文字和圖片任務(wù)7-5制作響應(yīng)式文字和圖片1、.rounded：為圖像添加圓角。2、.rounded-circle：將圖像塑造為圓形。3、.img-thumbnail：將圖像塑造為縮略圖（帶邊框）。4、.float-start：將圖像向左浮動，.float-end：將圖像向右浮動。5、.mx-auto(margin:auto)和.d-block(display:block)：使圖像居中。6、.img-fluid：為圖像應(yīng)用max-width:100%和height:auto，圖像將很好地縮放到父元素內(nèi)。7-6HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）制作完整的響應(yīng)式網(wǎng)站任務(wù)7-6制作完整的響應(yīng)式網(wǎng)站任務(wù)7-6制作完整的響應(yīng)式網(wǎng)站任務(wù)7-6制作完整的響應(yīng)式網(wǎng)站常用類含義.float-start{float:left!important}左浮動.float-end{float:right!important}右浮動.mx-auto{margin-right:auto!important; margin-left:auto!important}左右居中.d-flex{display:flex!important}彈性布局.d-none{display:none!important}隱藏元素并脫離文檔，不占實際空間.d-block{display:block!important}轉(zhuǎn)換為塊狀元素任務(wù)7-6制作完整的響應(yīng)式網(wǎng)站常用類含義.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}置頂.fixed-bottom{position:fixed; right:0;bottom:0;left:0;z-index:1030}置底.visible{visibility:visible!important}元素正常顯示.invisible{visibility:hidden!important}隱藏元素.overflow-hidden{overflow:hidden!important}元素溢出隱藏.overflow-visible{overflow:visible!important}內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外.overflow-scroll{overflow:scroll!important}如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容任務(wù)7-6制作完整的響應(yīng)式網(wǎng)站〓

常用背景色類常用類含義1.bg-primary2.bg-secondary3.bg-success4.bg-danger5.bg-warning6.bg-info7.bg-light8.bg-dark9.bg-body10.bg-white11.bg-transparent1.藍色背景2.深灰色背景3.綠色背景4.紅色背景5.黃色背景6.淺藍色背景7.淺灰色背景8.黑色背景9.白色背景10.白色背景11.透明背景任務(wù)7-6制作完整的響應(yīng)式網(wǎng)站〓

常用文字顏色類常用類含義1.text-muted2.text-primary3.text-success4.text-info5.text-warning6.text-danger7.text-secondary8.text-dark9.text-body10.text-light11.text-white1.淺灰色文本2.藍色文本3.綠色文本4.淺藍色文本5.黃色文本6.紅色文本7.灰色文本8.深灰色文本9.黑色文本10.淺灰色文本11.白色文本Bootstrap5框架簡介單元7HTML5綜合案例單元8目錄01靜態(tài)網(wǎng)頁開發(fā)的基本流程02期末大作業(yè)8-1HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第二版）靜態(tài)網(wǎng)頁開發(fā)的基本流程靜態(tài)網(wǎng)頁開發(fā)的基本流程和軟件開發(fā)的流程基本一致，包括對網(wǎng)站先進行需求分析、概要設(shè)計、詳細設(shè)計、代碼編寫、項目測試、網(wǎng)站交付、網(wǎng)站運維等一系列操作以滿足客戶的需求并且解決客戶的問題，如果有更高需求，還需要對網(wǎng)站進行二次開發(fā)、升級處理、運營推廣等操作。1、需求分析相關(guān)系統(tǒng)分析員向用戶初步了解需求，然后用相關(guān)的工具軟件列出要開發(fā)網(wǎng)站的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關(guān)的界面時，在這一步里面可以初步定義好少量的界面。系統(tǒng)分析員深入了解和分析需求，根據(jù)自己的經(jīng)驗和需求用WORD或相關(guān)的工具再做出一份文檔系統(tǒng)的功能需求文檔。這次的文檔會清楚列出網(wǎng)站大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關(guān)的界面和功能。任務(wù)8-1

靜態(tài)網(wǎng)頁開發(fā)的基本流程

2、概要設(shè)計概要設(shè)計需要對網(wǎng)站的整體設(shè)計進行考慮，根據(jù)需求分析確定網(wǎng)站由哪些頁面組成、每個頁面的網(wǎng)站風(fēng)格、頁面結(jié)構(gòu)、模塊劃分、數(shù)據(jù)結(jié)構(gòu)設(shè)計和出錯處理設(shè)計等，為網(wǎng)站的詳細設(shè)計提供基礎(chǔ)。3、詳細設(shè)計在概要設(shè)計的基礎(chǔ)上，開發(fā)者需要進行網(wǎng)站的詳細設(shè)計。在詳細設(shè)計中，根據(jù)用戶提供的素材確定網(wǎng)站展示的內(nèi)容、大小、位置、顏色、展示形式等，以便開發(fā)人員進行編碼和測試。應(yīng)當(dāng)保證網(wǎng)站的需求完全分配給整個網(wǎng)站。詳細設(shè)計應(yīng)當(dāng)足夠詳細，能夠根據(jù)詳細設(shè)計報告進行編碼。4、代碼編寫在代碼編寫階段，不同技術(shù)人員會根據(jù)《網(wǎng)站系統(tǒng)詳細設(shè)計報告》，根據(jù)自己的職責(zé)安排進行代碼編寫，分別實現(xiàn)軟件在功能、性能、接口、界面等方面的要求，這過程需要項目經(jīng)理、UI設(shè)計師、安卓開發(fā)工程師/蘋果開發(fā)工程師、測試工程師等人員共同配合完成，在開發(fā)過程中需要項目經(jīng)理統(tǒng)籌全局，保持和客戶的緊密溝通，對于開發(fā)出現(xiàn)的問題采取相應(yīng)措施進行解決。任務(wù)8-1

靜態(tài)網(wǎng)頁開發(fā)的基本流程

5、項目測試測試人員根據(jù)業(yè)務(wù)邏輯，盡可能全方位地測試項目，找出網(wǎng)站的缺陷，并且提交測試報告，研發(fā)人員根據(jù)報告對項目bug進行修復(fù)。測試過程需要反復(fù)多次進行，盡量多的找出網(wǎng)站的問題所在。6、網(wǎng)站交付在網(wǎng)站測試證明達到用戶要求后，網(wǎng)站開發(fā)者應(yīng)向用戶提交開發(fā)的