網(wǎng)

頁

布

局項(xiàng)

目

七網(wǎng)頁設(shè)計(jì)與制作案例教程網(wǎng)頁設(shè)計(jì)

網(wǎng)頁中的每個(gè)元素都可以看作是一個(gè)矩形的盒子，通過設(shè)置盒子的邊距與浮動(dòng)等屬性，可以構(gòu)建不同的網(wǎng)頁布局。所謂布局，就是設(shè)置網(wǎng)頁中各模塊及模塊中各元素的位置，它是網(wǎng)頁制作的基礎(chǔ)。

本項(xiàng)目將介紹使用CSS3構(gòu)建網(wǎng)頁布局的方法，以及使網(wǎng)頁適配移動(dòng)端的方法。項(xiàng)目導(dǎo)讀知識(shí)目標(biāo)1.熟悉盒子模型的基礎(chǔ)知識(shí)。2.熟悉網(wǎng)頁布局的基礎(chǔ)知識(shí)。能力目標(biāo)思政目標(biāo)1.能夠使用DreamweaverCC對(duì)網(wǎng)頁進(jìn)行基礎(chǔ)布局。2.能夠使用DreamweaverCC為網(wǎng)頁構(gòu)建響應(yīng)式布局。1.學(xué)習(xí)網(wǎng)頁布局，提升網(wǎng)頁設(shè)計(jì)與制作的能力。2.了解開源精神，懂得互利共贏。3.熟悉視口與媒體查詢的基礎(chǔ)知識(shí)。01任務(wù)一網(wǎng)頁布局基礎(chǔ)任務(wù)描述

網(wǎng)頁布局是網(wǎng)頁設(shè)計(jì)制作必不可少的一部分，盒子模型和元素浮動(dòng)與定位是構(gòu)建網(wǎng)頁布局的基礎(chǔ)。本任務(wù)首先介紹盒子模型及其相關(guān)屬性,介紹元素浮動(dòng)與定位的相關(guān)內(nèi)容，通過布局“傳承經(jīng)典網(wǎng)”主頁加深理解。一、盒子模型的基本結(jié)構(gòu)

HTML文檔中的大部分元素（特別是塊級(jí)元素）都可以看作是一個(gè)盒子，網(wǎng)頁元素的定位就是這些大大小小的盒子在頁面中的定位。一個(gè)標(biāo)準(zhǔn)的W3C盒子模型有4個(gè)組成部分，分別為內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）與外邊距（margin），盒子模型的基本結(jié)構(gòu)如圖所示。盒子模型的基本結(jié)構(gòu)

以生活中的盒子為例，內(nèi)容是盒子中放置的物品，內(nèi)邊距是防止物品磕碰所填充的泡沫、氣泡膜等輔料，邊框是盒子本身，外邊距是盒子與盒子之間的空隙。例：在瀏覽器中查看盒子模型

使用火狐瀏覽器打開本書配套素材“項(xiàng)目七”→“ex1.html”文件，按“F12”鍵，進(jìn)入開發(fā)者模式，在“查看器”窗格中選擇頁面中的元素代碼，即可在下方“布局”窗格的“盒模型”區(qū)域看到該元素的盒子模型，如圖所示。內(nèi)容范圍標(biāo)準(zhǔn)線在瀏覽器中查看盒子模型二、盒子模型的屬性

盒子模型的屬性包括盒子模型的邊框、背景、邊距、溢出處理等。其中，邊框與背景屬性的設(shè)置方法前面項(xiàng)目已經(jīng)介紹過，下面介紹邊距與溢出處理屬性。1盒子模型的邊距

在CSS3中，使用padding與margin屬性設(shè)置盒子模型的內(nèi)外邊距。使用DreamweaverCC進(jìn)行設(shè)置時(shí)，在“CSS設(shè)計(jì)器”面板“屬性”窗格中單擊“布局”按鈕，即可在下方看到這兩個(gè)屬性，如圖所示。

這兩個(gè)屬性的設(shè)置方法基本相同，屬性值為數(shù)值與單位（常用單位為像素）。單擊“設(shè)置速記”區(qū)域，在編輯框中可以輸入1～4個(gè)值，它們的具體含義如下（以外邊距為例）。（1）1個(gè)值：統(tǒng)一設(shè)置上下左右4個(gè)方向的外邊距。（2）2個(gè)值：第一個(gè)值設(shè)置上外邊距和下外邊距，第二個(gè)值設(shè)置左外邊距和右外邊距。（3）3個(gè)值：第一個(gè)值設(shè)置上外邊距，第二個(gè)值設(shè)置左外邊距和右外邊距，第三個(gè)值設(shè)置下外邊距。（4）4個(gè)值：按照上、右、下、左的順序設(shè)置這4個(gè)方向的外邊距。如果想單獨(dú)設(shè)置某條邊的值，可直接在下方矩形設(shè)置區(qū)域的對(duì)應(yīng)邊上輸入。

此外還需要注意，margin屬性值可以為負(fù)數(shù)，使對(duì)象呈現(xiàn)出層疊效果，而padding屬性值不可為負(fù)數(shù)。2

溢出處理

當(dāng)塊級(jí)元素中的內(nèi)容超出了盒子模型的邊框范圍，瀏覽器會(huì)默認(rèn)將這些內(nèi)容顯示在邊框外側(cè)，此時(shí)可以使用overflow屬性對(duì)這些溢出內(nèi)容進(jìn)行處理。使用DreamweaverCC進(jìn)行設(shè)置時(shí)，在“CSS設(shè)計(jì)器”面板“屬性”窗格中單擊“布局”按鈕，可在下方看到它的子屬性overflow-x與overflow-y，如圖所示。設(shè)置overflow屬性這兩個(gè)子屬性分別用于設(shè)置水平方向與豎直方向的溢出處理方式。它們的屬性值說明如下。（1）visible。默認(rèn)值，不隱藏內(nèi)容也不增加滾動(dòng)條。（2）hidden。隱藏溢出部分。（3）scroll。增加滾動(dòng)條。（4）auto。在內(nèi)容溢出時(shí)增加滾動(dòng)條。三、元素的浮動(dòng)與定位

網(wǎng)頁中的元素默認(rèn)按照從左到右、從上到下的標(biāo)準(zhǔn)文檔流順序排列，若想要調(diào)整元素的位置，就需要用到元素的浮動(dòng)和定位屬性。01

浮動(dòng)屬性

設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的排列順序，移動(dòng)到父元素中的指定位置。在CSS3中，使用float屬性設(shè)置元素浮動(dòng)。該屬性可在“CSS設(shè)計(jì)器”面板“屬性”窗格中的“布局”設(shè)置區(qū)進(jìn)行設(shè)置，如圖所示。設(shè)置float屬性

浮動(dòng)屬性常用于構(gòu)建頁面布局，設(shè)置了浮動(dòng)屬性的元素在頁面中的效果如圖所示。標(biāo)準(zhǔn)文檔流，塊級(jí)元素從上到下排列脫離標(biāo)準(zhǔn)文檔流，塊級(jí)元素依次向左浮動(dòng)脫離標(biāo)準(zhǔn)文檔流，塊級(jí)元素依次向右浮動(dòng)單擊按鈕

屬性值可設(shè)置為left，表示元素向左浮動(dòng)；單擊按鈕屬性值可設(shè)置為right，表示元素向右浮動(dòng)；單擊按

鈕屬性值可設(shè)置為none，表示元素不浮動(dòng)，同時(shí)也是該屬性的默認(rèn)值。02

清除浮動(dòng)

設(shè)置了浮動(dòng)屬性的元素在脫離標(biāo)準(zhǔn)文檔流后，會(huì)影響到附近的兄弟元素。如果不想使某元素因受到浮動(dòng)兄弟元素的影響而改變位置，可以設(shè)置clear屬性清除該元素前浮動(dòng)元素帶來的影響。該屬性可在“CSS設(shè)計(jì)器”面板“屬性”窗格中的“布局”設(shè)置區(qū)進(jìn)行設(shè)置，如圖所示。

單擊按鈕屬性值可設(shè)置為left，表示清除元素前左浮動(dòng)元素的影響；單擊按鈕屬性值可設(shè)置為right，表示清除元素前右浮動(dòng)元素的影響；單擊按鈕屬性值可設(shè)置為both，表示清除元素前所有浮動(dòng)元素的影響，無論它是左浮動(dòng)還是右浮動(dòng)；單擊按鈕屬性值可設(shè)置為none，表示受到元素前浮動(dòng)元素的影響，同時(shí)也是該屬性的默認(rèn)值。

清除浮動(dòng)屬性可用于圖文混排。清除浮動(dòng)后的元素在頁面中的效果如圖所示。

設(shè)置clear屬性左浮動(dòng)塊級(jí)元素普通塊級(jí)元素受到元素前左浮動(dòng)元素的影響清除元素前左浮動(dòng)元素的影響清除浮動(dòng)的頁面效果

浮動(dòng)元素不僅會(huì)對(duì)周圍的兄弟元素造成影響，有時(shí)也會(huì)對(duì)父元素造成影響，如圖所示。頁面中父元素的高度未能根據(jù)浮動(dòng)圖像元素自動(dòng)擴(kuò)展，父元素的邊框沒有正確顯示，這種情況稱為高度塌陷。

高度塌陷的主要原因是父元素?zé)o法識(shí)別浮動(dòng)子元素的寬度與高度，但是父元素能夠識(shí)別浮動(dòng)子元素的兄弟元素，也就是說，如果浮動(dòng)子元素之后有非浮動(dòng)子元素，那么父元素能夠識(shí)別受到影響后的非浮動(dòng)子元素的位置。由此得知，可以通過在父元素末尾添加一個(gè)設(shè)置了clear屬性的非浮動(dòng)子元素來解決高度塌陷問題。最簡(jiǎn)單的方法是在父元素末尾添加一個(gè)空的<div>標(biāo)簽，設(shè)置其clear屬性值為both。

未設(shè)置父元素的寬度與高度，浮動(dòng)子元素顯示在父元素外未設(shè)置父元素寬度與高度的頁面效果

此外，還有以下兩種方法可以解決高度塌陷問題。（1）使用after偽對(duì)象。在CSS3中，除了偽類選擇器，還有偽對(duì)象選擇器“::before”與“::after”，它們的作用是在匹配元素內(nèi)的最前面或最后面添加內(nèi)容。例如，以下代碼表示在div元素末尾添加“這是div元素”文本。其中，content屬性用于設(shè)置添加的內(nèi)容。與添加空的<div>標(biāo)簽類似，可以使用“::after”選擇器在父元素末尾添加空白內(nèi)容，并為其設(shè)置相關(guān)屬性解決高度塌陷問題，具體代碼如下：父元素::after{content:"";display:block;clear:both;height:0;}div::after{content:"這是div元素";}（2）使用overflow屬性。為父元素設(shè)置“overflow:hidden;”樣式，除了能夠進(jìn)行溢出處理，也能夠使父元素自動(dòng)適應(yīng)浮動(dòng)子元素。03

定位屬性

使用浮動(dòng)屬性能夠?qū)崿F(xiàn)一定的布局效果，但不能對(duì)元素的位置進(jìn)行精確控制。在CSS3中，可以通過定位屬性對(duì)元素進(jìn)行精確定位。（1）定位模式。在CSS3中，使用position屬性設(shè)置元素的定位模式。該屬性可在“CSS設(shè)計(jì)器”面板“屬性”窗格中的“布局”設(shè)置區(qū)進(jìn)行設(shè)置，如圖所示。單擊position屬性右側(cè)的下拉列表，在展開的列表中選擇對(duì)應(yīng)的選項(xiàng)即可，列表中各屬性值的說明如下。①static。默認(rèn)值，靜態(tài)定位模式，它表示元素按照標(biāo)準(zhǔn)文檔流的位置顯示。②relative。相對(duì)定位模式，它表示將以元素在標(biāo)準(zhǔn)文檔流中的原位置為基準(zhǔn)對(duì)元素進(jìn)行定位。③absolute。絕對(duì)定位模式，它表示以上一個(gè)已定位父元素的位置為基準(zhǔn)對(duì)元素進(jìn)行定位。④fixed。固定定位模式，它表示以瀏覽器窗口的位置為基準(zhǔn)對(duì)元素進(jìn)行定位。設(shè)置定位屬性（2）偏移量。定位模式可以設(shè)置元素以哪種方式定位，進(jìn)一步確定元素的位置還需要設(shè)置偏移量屬性，即position屬性下方矩形設(shè)置區(qū)域的四個(gè)子屬性，它們的說明如下。它們的屬性值為數(shù)值與單位，也可以是百分比。04

相對(duì)定位

定位模式為相對(duì)定位的元素將以其在標(biāo)準(zhǔn)文檔流中的原位置為基準(zhǔn)，根據(jù)所設(shè)置的偏移量向?qū)?yīng)方向移動(dòng)一定距離，并且保留它在標(biāo)準(zhǔn)文檔流中的位置。在設(shè)置偏移量時(shí)，上下或左右方向都只需設(shè)置一個(gè)屬性值。例如，設(shè)置某元素相對(duì)定位模式下的左側(cè)偏移量為10px，則其右側(cè)偏移量自動(dòng)變?yōu)?10px。

使用相對(duì)定位可以設(shè)置一些局部的特殊布局。設(shè)置了相對(duì)定位的元素在頁面中的效果如圖所示。①top。頂部偏移量，設(shè)置元素與參照元素上邊線的距離。②right。右側(cè)偏移量，設(shè)置元素與參照元素右邊線的距離。③bottom。底部偏移量，設(shè)置元素與參照元素下邊線的距離。④left。左側(cè)偏移量，設(shè)置元素與參照元素左邊線的距離。以元素在原文檔流中的位置為基準(zhǔn)進(jìn)行定位，并保留其原位置相對(duì)定位的頁面效果05

絕對(duì)定位

定位模式為絕對(duì)定位的元素將以最近的已定位（相對(duì)、絕對(duì)或固定定位）父元素的位置為基準(zhǔn)，根據(jù)所設(shè)置的偏移量向?qū)?yīng)方向移動(dòng)一定距離。如果所有父元素都未定位，則以瀏覽器窗口為基準(zhǔn)。

絕對(duì)定位與相對(duì)定位不同，元素偏移后，網(wǎng)頁中將不會(huì)保留其在標(biāo)準(zhǔn)文檔流中的位置。設(shè)置了絕對(duì)定位的元素在頁面中的效果如圖所示。06

固定定位

固定定位是絕對(duì)定位的特殊情況，即全部以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。為元素設(shè)置固定定位后，該元素脫離標(biāo)準(zhǔn)文檔流，始終顯示在瀏覽器窗口的固定位置，不隨瀏覽器窗口大小變化或滾動(dòng)條移動(dòng)而改變。

固定定位常用于制作“返回頂部”按鈕等固定在頁面中的元素。設(shè)置了固定定位的元素在頁面中的效果如圖所示。元素位置相對(duì)于瀏覽器窗口固定以父元素為基準(zhǔn)的絕對(duì)定位以瀏覽器窗口為基準(zhǔn)的絕對(duì)定位絕對(duì)定位的頁面效果固定定位的頁面效果07

層疊等級(jí)屬性

對(duì)元素進(jìn)行定位時(shí)，可能會(huì)出現(xiàn)元素重疊的狀況。默認(rèn)情況下，標(biāo)準(zhǔn)文檔流中越靠后的元素顯示在越靠上的層級(jí)。在CSS3中，可以使用z-index屬性設(shè)置元素的層疊等級(jí)，調(diào)整定位元素的顯示層級(jí)。該屬性可在“CSS設(shè)計(jì)器”面板“屬性”窗格中的“布局”設(shè)置區(qū)進(jìn)行設(shè)置，如圖所示。

屬性值可以為負(fù)數(shù)、正數(shù)和0。默認(rèn)值為0，屬性值越大，定位元素將顯示在越靠上的層級(jí)（屬性值相同則以標(biāo)準(zhǔn)文檔流為基準(zhǔn)，越靠后的元素顯示在越靠上的層級(jí)）。

層疊等級(jí)可以用來調(diào)整頁面中各元素的遮擋關(guān)系，頁面效果如圖所示。設(shè)置元素的層疊等級(jí)未設(shè)置層疊等級(jí)重新設(shè)置層疊等級(jí)設(shè)置元素層疊等級(jí)的頁面效果掃描二維碼觀看詳細(xì)步驟視頻任務(wù)實(shí)施——布局“傳承經(jīng)典網(wǎng)”主頁本任務(wù)將通過布局“傳承經(jīng)典網(wǎng)”主頁來練習(xí)簡(jiǎn)單的頁面布局，頁面效果如圖所示。“傳承經(jīng)典網(wǎng)”主頁布局后的頁面效果02任務(wù)二經(jīng)典網(wǎng)頁布局任務(wù)描述

在實(shí)際網(wǎng)頁制作中，不僅可以構(gòu)建雙列布局，還可以構(gòu)建三列布局、多列布局等。本任務(wù)首先介紹使用CSS3實(shí)現(xiàn)常見布局形式的方法，通過構(gòu)建“愛看視頻網(wǎng)”主頁的布局加深理解。一、單列與雙列布局

小型企業(yè)宣傳網(wǎng)站一般使用簡(jiǎn)單的單列布局，構(gòu)建這種布局形式只需按照標(biāo)準(zhǔn)文檔流的順序添加容器標(biāo)簽即可，必要時(shí)可將個(gè)別容器標(biāo)簽左右外邊距屬性值設(shè)置為auto，使其居中顯示。

雙列布局一般是指帶有左側(cè)或右側(cè)側(cè)邊欄的布局形式。構(gòu)建這種布局形式可以通過設(shè)置浮動(dòng)屬性，使主體部分與側(cè)邊欄一個(gè)向左浮動(dòng)一個(gè)向右浮動(dòng)來實(shí)現(xiàn)。此外，也可以通過設(shè)置定位屬性實(shí)現(xiàn)。例：使用定位屬性構(gòu)建雙列布局，頁面效果如圖所示。使用定位屬性構(gòu)建雙列布局

在DreamweaverCC中打開本書配套素材“項(xiàng)目七”→“ex9.html”網(wǎng)頁文檔，按“F12”鍵進(jìn)行預(yù)覽，此時(shí)頁面效果如圖所示。步驟1布局前的頁面效果

在<style>標(biāo)簽中繼續(xù)設(shè)置樣式。對(duì)main{…}選擇器繼續(xù)設(shè)置，單擊“屬性”窗格“布局”設(shè)置區(qū)中position屬性右側(cè)的下拉列表，在展開的列表中選擇“relative”選項(xiàng)，將主體區(qū)域的定位模式設(shè)置為相對(duì)定位。步驟2

對(duì)aside{…}選擇器繼續(xù)設(shè)置，單擊“屬性”窗格“布局”設(shè)置區(qū)中position屬性右側(cè)的下拉列表，在展開的列表中選擇“absolute”選項(xiàng)，單擊下方矩形設(shè)置區(qū)域的上邊，在文本框中輸入“0px”，再單擊矩形設(shè)置區(qū)域的左邊，在文本框中輸入“0px”，設(shè)置定位模式為絕對(duì)定位，頂部、左側(cè)偏移量均為0像素，如圖所示。步驟3

設(shè)置側(cè)邊欄的樣式

對(duì)div{…}選擇器繼續(xù)設(shè)置，設(shè)置定位模式為絕對(duì)定位，頂部、右側(cè)偏移量均為0像素。步驟4二、三列布局

三列布局是指同時(shí)有兩列側(cè)邊欄的布局形式。要使用定位屬性實(shí)現(xiàn)三列布局，可在例7-2的基礎(chǔ)上分別設(shè)置左、中、右3個(gè)模塊絕對(duì)定位的左側(cè)（或右側(cè)）偏移量為0%、15%和85%（以兩側(cè)側(cè)邊欄寬度各占父元素的15%為例）。

使用浮動(dòng)屬性實(shí)現(xiàn)三列布局時(shí)，可直接設(shè)置各模塊一同向左或向右浮動(dòng)。但使用這種方法構(gòu)建的布局不夠穩(wěn)定，在實(shí)際應(yīng)用中，可通過設(shè)置外邊距屬性或?qū)蓚€(gè)側(cè)邊欄模塊分別向左和向右浮動(dòng)來固定側(cè)邊欄的位置。

例：使用浮動(dòng)屬性構(gòu)建較為穩(wěn)定的三列布局,頁面效果如圖所示。使用浮動(dòng)屬性構(gòu)建三列布局

在DreamweaverCC中打開本書配套素材“項(xiàng)目七”→“ex10.html”網(wǎng)頁文檔，按“F12”鍵進(jìn)行預(yù)覽，此時(shí)頁面效果如圖所示。步驟1

布局前的頁面效果

在div{…}選擇器中設(shè)置頂部、底部外邊距為0像素，左側(cè)、右側(cè)外邊距為200像素；在.left{…}選擇器中設(shè)置元素向左浮動(dòng)；在.right{…}選擇器中設(shè)置元素向右浮動(dòng)。步驟2掃描二維碼觀看詳細(xì)步驟視頻任務(wù)實(shí)施——布局“愛看視頻網(wǎng)”主頁本任務(wù)將通過布局“愛看視頻網(wǎng)”主頁，練習(xí)對(duì)頁面進(jìn)行簡(jiǎn)單布局的操作，具體頁面效果如圖所示?！皭劭匆曨l網(wǎng)”主頁布局后的頁面效果03任務(wù)三響應(yīng)式布局任務(wù)描述

隨著智能手機(jī)的普及，移動(dòng)互聯(lián)網(wǎng)的發(fā)展，使用移動(dòng)端訪問互聯(lián)網(wǎng)服務(wù)的人數(shù)已遠(yuǎn)超使用PC端的人數(shù)，所以在制作網(wǎng)頁時(shí)不可避免地要考慮移動(dòng)端的適配情況，這時(shí)就需要制作響應(yīng)式布局。

本任務(wù)首先介紹視口、媒體查詢等基礎(chǔ)知識(shí)，通過為“愛看視頻網(wǎng)”主頁構(gòu)建響應(yīng)式布局加深理解。

PC端，視口是指瀏覽器的可視區(qū)域，視口寬度與瀏覽器窗口寬度一致。在CSS標(biāo)準(zhǔn)文檔中，視口也稱為初始包含塊，它的寬度是所有CSS百分比寬度推算的根源，也為網(wǎng)頁布局限制了最大寬度。

移動(dòng)端瀏覽器窗口的寬度受到設(shè)備屏幕的影響，一般為300px左右，而大多數(shù)PC端網(wǎng)頁的寬度都在800px以上，如果仍然以瀏覽器窗口寬度作為視口寬度，移動(dòng)端將無法正常顯示頁面內(nèi)容。

一、視口

為使移動(dòng)端視口與瀏覽器窗口不再關(guān)聯(lián)，網(wǎng)頁制作引入了布局視口（layoutviewport）、視覺視口（visualviewport）與理想視口（idealviewport）的概念，下面先分別介紹它們的概念，介紹設(shè)置布局視口的方法。1．布局視口

在早期PC端與移動(dòng)端網(wǎng)頁共用一套代碼時(shí)，為了能夠在移動(dòng)端正常瀏覽PC端網(wǎng)頁，移動(dòng)設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個(gè)虛擬的布局視口，IOS和Android基本都將這個(gè)視口的寬度設(shè)置為980像素。這樣PC端的網(wǎng)頁基本都能在移動(dòng)端上呈現(xiàn)，只是元素看上去小很多，可以手動(dòng)縮放網(wǎng)頁查看局部效果（本節(jié)中各示意圖皆以北京2022年冬奧會(huì)和冬殘奧會(huì)組織委員會(huì)網(wǎng)站主頁為例），如圖所示。布局視口使用默認(rèn)布局視口的移動(dòng)端頁面效果2．視覺視口

視覺視口是用戶在屏幕上所能看到的網(wǎng)頁區(qū)域，當(dāng)用戶放大網(wǎng)頁時(shí)，屏幕上能看到的網(wǎng)頁區(qū)域變小，也就相當(dāng)于視覺視口變小。同理，當(dāng)用戶縮小網(wǎng)頁時(shí)，屏幕上能看到的網(wǎng)頁區(qū)域變大，也就相當(dāng)于視覺視口變大。

3．理想視口

當(dāng)布局視口的寬度等于移動(dòng)設(shè)備的屏幕寬度時(shí)，稱其為理想視口。在理想視口下，用戶不用縮放就能看到網(wǎng)頁的最佳顯示效果，如圖所示。設(shè)置理想視口設(shè)置理想視口后，網(wǎng)頁響應(yīng)式應(yīng)用適配移動(dòng)端的樣式代碼，得到更合適的頁面效果。

設(shè)置理想視口后的移動(dòng)端頁面效果4．設(shè)置布局視口

在網(wǎng)頁文檔的頭部標(biāo)簽中添加<meta>標(biāo)簽，可以重新設(shè)置移動(dòng)端的布局視口。使用DreamweaverCC可以直接添加該標(biāo)簽，將鼠標(biāo)指針置于<head>標(biāo)簽中，在“插入”面板中單擊“META”按鈕，打開“META”對(duì)話框；在“屬性”下拉列表中選擇“名稱”選項(xiàng)，在“值”文本框中輸入內(nèi)容“viewport”，在“內(nèi)容”文本框中輸入“width=device-width,initial-scale-1.0”；單擊“確定”按鈕，如圖所示。添加<meta>標(biāo)簽后，文檔窗口自動(dòng)生成該標(biāo)簽的代碼，如圖所示?！癕ETA”對(duì)話框<meta>標(biāo)簽的代碼

其中，name屬性在“值”文本框中設(shè)置，其值viewport表示該標(biāo)簽用于設(shè)置布局視口；content屬性在“內(nèi)容”文本框中設(shè)置，用于設(shè)置布局視口的相關(guān)屬性，常用的屬性及說明如下。（1）width用于設(shè)置布局視口的寬度，屬性值device-width表示布局視口寬度等于當(dāng)前移動(dòng)端屏幕寬度。（2）user-scalable用于設(shè)置頁面能否手動(dòng)縮放，屬性值yes是默認(rèn)值，表示可以縮放；no表示不可縮放。（3）initial-scale用于設(shè)置屏幕寬度與視口寬度之間的縮放比例，屬性值通常設(shè)置為1，表示原大小。（4）viewport-fit用于適配iPhoneX及其他型號(hào)的劉海屏iPhone手機(jī)（IOS系統(tǒng)），屬性值cover表示將頁面內(nèi)容填充至頂部。

媒體查詢可以根據(jù)設(shè)備的特性，如屏幕寬度、高度、方向（橫屏或豎屏）等，為不同的媒體類型或設(shè)備設(shè)置不同的樣式，從而實(shí)現(xiàn)響應(yīng)式布局。

使用DreamweaverCC可以直接在樣式表中定義媒體查詢，打開“CSS設(shè)計(jì)器”面板，單擊“媒體查詢”名稱前的加號(hào)按鈕，打開“定義媒體查詢”對(duì)話框；單擊“條件”設(shè)置區(qū)中左側(cè)的下拉列表，選擇“max-width”選項(xiàng)，并在其后出現(xiàn)的文本框中輸入數(shù)值“768”，在單位下拉列表中選擇“px”選項(xiàng)；接著“代碼”區(qū)域中顯示媒體查詢的代碼；單擊“確定”按鈕，如圖所示。二、媒體查詢“定義媒體查詢”對(duì)話框

其中，“條件”設(shè)置區(qū)中左側(cè)的下拉列表中常用的選項(xiàng)有max-width，表示顯示區(qū)域（如瀏覽器窗口）最大寬度；min-width表示顯示區(qū)域（如瀏覽器窗口）的最小寬度。如果想要查詢多個(gè)條件，可以單擊右側(cè)的加號(hào)按鈕添加第二條查詢條件。

在CSS3中，@media用于定義媒體查詢；（max-width:768px）用于指定媒體特性；@media（max-width:768px）{…}用于設(shè)置設(shè)備顯示區(qū)域?qū)挾刃∮诘扔?68像素時(shí)的樣式。定義媒體查詢后，在“@媒體”窗格中選擇對(duì)應(yīng)的媒體特性，并在其中設(shè)置CSS樣式，即可使頁面在滿足該媒體特性的設(shè)備上響應(yīng)式地應(yīng)用這些樣式。例：使用媒體查詢?yōu)椤罢{(diào)查問卷”頁面構(gòu)建響應(yīng)式布局，頁面效果如圖所示。

在DreamweaverCC中打開本書配套素材“項(xiàng)目七”→“ex11.html”網(wǎng)頁文檔，按“F12”鍵進(jìn)行預(yù)覽，此時(shí)頁面效果如圖1所示。步驟1

查看頁面移動(dòng)端顯示效果的方法為，在瀏覽器中按“F12”鍵，打開開發(fā)者工具窗格，單擊窗格左上角的移動(dòng)端顯示按鈕，進(jìn)入移動(dòng)端顯示狀態(tài)，在頁面顯示區(qū)的上方單擊最左側(cè)的下拉列表，可以選擇移動(dòng)端的尺寸，一般選擇“iPhoneX”選項(xiàng)，如圖2所示。圖1構(gòu)建響應(yīng)式布局前的頁面效果圖2查看頁面的移動(dòng)端顯示效果

設(shè)置布局視口。將鼠標(biāo)指針置于<head>標(biāo)簽中，打開“插入”面板，單擊“META”按鈕，打開“META”對(duì)話框；然后在“屬性”下拉列表中選擇“名稱”選項(xiàng)，在“值”文本框中輸入內(nèi)容“viewport”，在“內(nèi)容”文本框中輸入“width=device-width,initial-scale-1.0”；單擊“確定”按鈕。步驟2步驟3

定義媒體查詢。打開“CSS設(shè)計(jì)器”面板，在“源”窗格選擇“<style>”選項(xiàng)，單擊“@媒體”窗格左側(cè)的加號(hào)按鈕，打開“定義媒體查詢”對(duì)話框；在“條件”設(shè)置區(qū)中左側(cè)的下拉列表中選擇“max-width”選項(xiàng)，在其右側(cè)的文本框中輸入“375”，在單位下拉列表中選擇“px”選項(xiàng)；單擊“確定”按鈕，如圖所示。

在“@媒體”窗格中選擇媒體特性“(max-width:375px)”，在下方添加選擇器并設(shè)置屬性。添加body選擇器，設(shè)置頁面的寬度為“98%”，外邊距為“01%”，內(nèi)邊距為“0”；添加form.suv選擇器，設(shè)置表單的寬度為“98%”；添加input[type="radio"]+label,input[type="checkbox"]+label選擇器，設(shè)置單選鈕與復(fù)選框的提示信息的寬度為“80%”，顯示方式為“block”，如圖所示。步驟4設(shè)置部分樣式