HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 袁曉建 模塊5-11 產(chǎn)品中心頁面設(shè)計(jì)-網(wǎng)頁交互功能設(shè)計(jì)

模塊5“產(chǎn)品中心頁面設(shè)計(jì)”根據(jù)功能或內(nèi)容的不同，可將網(wǎng)頁劃分為不同的區(qū)域模塊，如導(dǎo)航模塊、廣告欄模塊等。這些承載了不同內(nèi)容的模塊被稱為盒模型。盒模型本質(zhì)上是一個(gè)盒子，所有HTML頁面中的元素都可以被看作盒子。理解盒模型的基本原理，是我們使用CSS實(shí)現(xiàn)準(zhǔn)確布局、處理元素排列的關(guān)鍵。本模塊將通過盒模型及浮動設(shè)置，完成“產(chǎn)品中心”頁面的布局與樣式設(shè)計(jì)。“產(chǎn)品中心”頁面的布局與樣式設(shè)計(jì)任務(wù)11.1盒模型所謂盒模型，就是把HTML頁面中的元素看作一個(gè)方形的盒子，它包括邊框、內(nèi)邊距、外邊距和內(nèi)容區(qū)域等。為了更形象地認(rèn)識盒模型，我們以月餅禮盒為例，如圖5-1所示。圖5-1盒模型示意圖1.1.1寬高屬性width屬性用于設(shè)置元素的寬度，height屬性用于設(shè)置元素的高度。width屬性的取值如下表所示。height屬性的取值與width屬性相似，此處不再贅述。值描述auto瀏覽器將會為指定的元素計(jì)算并選擇一個(gè)寬度length使用px、cm等單位定義寬度%基于父元素寬度的百分比寬度inherit從父元素繼承width屬性的值1.1.2邊框?qū)傩?．邊框?qū)傩裕?）border-width。該屬性用于設(shè)置盒模型的邊框?qū)挾?，且只有?dāng)邊框樣式（border-style）不為none時(shí)才起作用。其屬性值可以是具體的單位（如px、em等）或關(guān)鍵字（如thin、medium、thick）。1.1.2邊框?qū)傩裕?）border-style。該屬性用于設(shè)置元素所有邊框的樣式，其取值如下表所示。值表現(xiàn)描述none

和hidden樣式類似，不顯示邊框。none樣式的優(yōu)先級最低，意味著如果存在其他重疊邊框，則會顯示其他重疊邊框hidden

和none樣式類似，不顯示邊框。hidden樣式的優(yōu)先級最高，意味著如果存在其他重疊邊框，則不會顯示邊框dotted

顯示為一系列圓點(diǎn)。圓點(diǎn)半徑是border-width屬性值的一半dashed

顯示為一系列方形虛線solid

顯示為一條實(shí)線double

顯示為一條雙實(shí)線，寬度是border-width屬性值groove

顯示為有雕刻效果的邊框，樣式與ridge樣式相反ridge

顯示為有浮雕效果的邊框，樣式與groove樣式相反inset

顯示為有陷入效果的邊框，樣式與outset樣式相反。當(dāng)它指定border-collapse為collapsed的單元格時(shí)，會顯示為groove樣式outset

顯示為有突出效果的邊框，樣式與inset樣式相反。當(dāng)它指定border-collapse為collapsed的單元格時(shí)，會顯示為ridge樣式如果需要單獨(dú)設(shè)置其中的某一條邊框，則可以使用top、left、right、bottom關(guān)鍵字。例如：border-right-style:2pxsolidblue;1.1.2邊框?qū)傩裕?）border-color。該屬性用于設(shè)定元素邊框的顏色。border-color屬性的取值可以是預(yù)定義的顏色英文單詞（如blue、red等），也可以是十六進(jìn)制形式的顏色值（如#ff0000）或rgb代碼顏色值（如rgb(255,0,0)紅色）。（4）border。該屬性可用于在一個(gè)聲明中設(shè)置一個(gè)或多個(gè)以下屬性的值：border-width、border-style、border-color。如果需要單獨(dú)設(shè)置其中的某一條邊框，則可以使用border-top|right|bottom|left屬性。1.1.3邊距屬性（1）padding。該屬性用于控制所有元素四條邊的內(nèi)邊距（內(nèi)填充）區(qū)域。月餅禮盒的邊框和內(nèi)容區(qū)域之間的邊距稱為padding。padding屬性值不能為負(fù)值，圖5-1中的內(nèi)邊距就是padding。padding屬性的取值如下表所示。值描述auto瀏覽器自動計(jì)算內(nèi)邊距長度值以具體單位計(jì)算的內(nèi)邊距，如px、cm等。默認(rèn)值是0px百分比基于父元素的寬度的百分比的內(nèi)邊距inherit繼承父元素內(nèi)邊距使用方法如下：/*所有內(nèi)邊距為10px*/padding:10px;/*上下內(nèi)邊距5%|左右內(nèi)邊距10%*/padding:5%10%;/*上內(nèi)邊距1px|左右內(nèi)邊距2px|下內(nèi)邊距3px*/padding:1px2px3px;/*上內(nèi)邊距1px|右內(nèi)邊距2px|下內(nèi)邊距3px|左內(nèi)邊距4px*/padding:1px2px3px4px;1.1.3邊距屬性（2）margin。該屬性用于設(shè)置所有外邊距。圖5-1中兩個(gè)月餅禮盒之間的外邊距稱為margin。該屬性常用于拉開盒模型之間的距離，其屬性值與用法和padding屬性的相似。但是margin屬性有一些特殊的取值和使用方法，大家需要注意。①margin屬性值可以為負(fù)值，當(dāng)margin屬性值為負(fù)值時(shí)，將會“拉近”兩個(gè)盒模型之間的距離。例如：此時(shí)，類名為“box2”的容器將重疊于“box1”容器之上，效果如圖所示。<style>

.box1,

.box2{

width:200px;

height:200px;

border:2pxsolidblack;

float:left;

}

.box2{

margin-left:-30px;

margin-top:30px;

}</style><divclass="box1"></div><divclass="box2"></div>1.1.3邊距屬性②margin:auto。當(dāng)marign-left屬性值和margin-right屬性值為auto時(shí)，表示子元素占據(jù)父元素所有可分配空間；當(dāng)margin-top屬性值和margin-bottom屬性值為auto時(shí)，相當(dāng)于margin-top屬性值和margin-bottom屬性值為0px。所以，我們通常使用margin:auto來控制子元素在父元素中水平居中對齊。需要注意的是，margin:auto僅針對塊級元素有效。例如：.parent{

width:200px;

height:200px;

border:2pxsolidblack;}.box{

width:50px;

height:50px;

background:gray;

margin-left:auto;

margin-right:auto;

margin-top:auto;

margin-bottom:auto}

<divclass="parent">

<divclass="box"></div>

</div>1.1.4盒模型的計(jì)算（1）box-sizing。box-sizing屬性定義了應(yīng)該如何計(jì)算一個(gè)元素的總寬度和總高度。在CSS盒模型的默認(rèn)定義中，對一個(gè)元素設(shè)置的寬度與高度只會被應(yīng)用到這個(gè)元素的內(nèi)容區(qū)域中。如果這個(gè)元素有任何邊框或內(nèi)邊距，則將其繪制到屏幕上時(shí)，盒子寬度和高度會加上設(shè)置的邊框?qū)挾扰c內(nèi)邊距。這意味著當(dāng)調(diào)整一個(gè)元素的寬度和高度時(shí)，需要時(shí)刻注意這個(gè)元素的邊框?qū)挾群蛢?nèi)邊距，而這對布局是十分不便的。1.1.4盒模型的計(jì)算值描述content-box默認(rèn)值。如果設(shè)置一個(gè)元素的寬度為100px，那么這個(gè)元素的內(nèi)容區(qū)域的寬度為100px，并且任何邊框?qū)挾群蛢?nèi)邊距都會被增加到最后繪制出來的元素的寬度中border-box為元素設(shè)置的寬度和高度包括邊框和內(nèi)邊距，即為元素指定的任何內(nèi)邊距和邊框?qū)挾榷紝⒃谝言O(shè)置的寬度和高度內(nèi)進(jìn)行繪制。將已設(shè)置的寬度和高度分別減去邊框?qū)挾群蛢?nèi)邊距才能得到內(nèi)容的寬度和高度<style>div{width:200px;height:200px;background:pink;padding:10px;margin:10px;border:2pxdashedsalmon;}</style><div>盒模型計(jì)算</div>1.1.4盒模型的計(jì)算（2）display。display屬性用于定義建立布局時(shí)元素生成的顯示框類型。我們可以通過display屬性修改元素的類型或者將元素進(jìn)行顯示和隱藏。該屬性的取值如下表所示。值描述none此元素不會被顯示block此元素將顯示為塊級元素，元素將獨(dú)占一行inline此元素將顯示為行內(nèi)元素，元素將共處一行inline-block此元素將顯示為行內(nèi)塊元素，元素將共處一行1.1.4盒模型的計(jì)算①塊級元素具有如下特點(diǎn)。塊級元素具有寬高屬性。塊級元素將會獨(dú)占一行。在HTML文件中，絕大部分元素屬于塊級元素，如div、p、ul、ol、li、dl、dt、dd、form、table、address、article等。即使不對這些元素進(jìn)行聲明，它們也默認(rèn)帶有display:block屬性。1.1.4盒模型的計(jì)算②行內(nèi)元素具有如下特點(diǎn)。行內(nèi)元素只能容納文本或其他行內(nèi)元素，其寬度和高度由行內(nèi)元素中的內(nèi)容決定，無法設(shè)置width屬性值和height屬性值。多個(gè)行內(nèi)元素能夠共處一行。行內(nèi)元素的上下外邊距（margin-top和margin-bttom）無效。常見的行內(nèi)元素有a、b、em、i、label、span、::before偽元素和::after偽元素等。即使不對這些元素進(jìn)行聲明，它們也默認(rèn)帶有display:inline屬性。1.1.4盒模型的計(jì)算③行內(nèi)塊級元素具有如下特點(diǎn)。行內(nèi)塊級元素具有寬高屬性。行內(nèi)塊級元素能夠共處一行。常見的行內(nèi)塊級元素有input、button、img、audio、video、canvas等。即使不對這些元素進(jìn)行聲明，它們也默認(rèn)帶有display:inline-block屬性。1.2.1正常流1.正常流在使用浮動之前，需要先對正常流（NormalFlow）有所了解。正常流是指在不對頁面進(jìn)行任何布局控制時(shí)，瀏覽器默認(rèn)的布局方式。脫離正常流（也稱脫離文檔流）,就是將元素從正常流布局中抽走,讓其他盒子在布局定位時(shí),將脫離正常流的元素視為不存在而進(jìn)行布局定位。脫離正常流后的元素不再占據(jù)文檔空間，可以進(jìn)行更為自由的布局。浮動、定位等方法都能夠使元素脫離正常流。1.2.2float2．float（1）float屬性的基礎(chǔ)使用。float屬性用于指定一個(gè)元素沿其父容器的左側(cè)或右側(cè)放置，允許文本和行內(nèi)元素環(huán)繞它。該元素會從網(wǎng)頁的正常流（文檔流）中被移出，浮于正常流上方。float屬性的取值如下表所示。值描述left元素向左浮動right元素向右浮動none默認(rèn)值。元素不浮動inherit從父元素繼承float屬性的值1.2.2float當(dāng)對一個(gè)元素設(shè)置浮動之后，該元素會從正常流中被移出，然后向左或者向右平移，直到遇到另外一個(gè)浮動的元素<style>ul{list-style:none;

/*去除列表默認(rèn)樣式*/}li{width:100px;height:40px;background:orange;color:white;float:left;

/*li元素左浮動*/text-align:center;

/*文本水平居中*/line-height:40px;

/*文本豎直居中*/}li:hover{background:cornflowerblue;

/*鼠標(biāo)指針懸停呈現(xiàn)深藍(lán)色*/}</style><ul><li>網(wǎng)站首頁</li><li>關(guān)于我們</li><li>聯(lián)系我們</li></ul>在左邊代碼中，我們對li元素設(shè)置了左浮動，所以li元素會依次排列在上一個(gè)浮動的li元素后面。使用float屬性的這個(gè)特點(diǎn)，用戶能夠設(shè)計(jì)導(dǎo)航欄、廣告欄等多列布局的網(wǎng)頁模塊。1.2.2float（2）高度塌陷。當(dāng)對元素設(shè)置了浮動而未對父元素設(shè)置高度時(shí)，就會造成父元素高度塌陷。例如：<style>.box{width:100px;height:auto;padding:20px;background:skyblue;}.inner{width:100px;height:100px;background:pink;}</style><divclass="box"><divclass="inner"></div></div>1.2.2float雖然并未對外層容器（父容器）設(shè)置高度，但其高度可由子容器支撐。在子容器樣式上添加float屬性。.inner{

float:left;}因?yàn)樽尤萜鞲樱撾x了正常流，不再占用正常流空間，所以無法支撐父容器的高度，父容器高度塌陷為0。浮動造成的父容器高度塌陷會引起許多問題，如父容器背景無法正常顯示，邊框無法隨內(nèi)容被撐開等。如何避免這一現(xiàn)象的發(fā)生呢？在此就需要學(xué)習(xí)一下清除浮動的方法。1.2.2float2．float（1）float屬性的基礎(chǔ)使用。float屬性用于指定一個(gè)元素沿其父容器的左側(cè)或右側(cè)放置，允許文本和行內(nèi)元素環(huán)繞它。該元素會從網(wǎng)頁的正常流（文檔流）中被移出，浮于正常流上方。float屬性的取值如下表所示。值描述left元素向左浮動right元素向右浮動none默認(rèn)值。元素不浮動inherit從父元素繼承float屬性的值1.2.2float（3）清除浮動。為什么要清除浮動呢？從之前的案例中，我們發(fā)現(xiàn)浮動雖然為布局提供了極大的便利，但也造成了圖5-8所示的高度塌陷問題。所以在遇到以上情況時(shí)，我們需要使用如下方法清除浮動。大家可以把清除浮動理解為將元素從浮動圖層拉回到正常文檔流所在的圖層中，這樣浮動元素原來的文檔流空間也將恢復(fù)，自然就不會發(fā)生遮擋和高度塌陷問題了。在清除浮動時(shí)，我們通常使用偽元素清除法，即使用::after偽元素添加空標(biāo)簽，并為該標(biāo)簽設(shè)置clear:both樣式。例如：<style>

.box{

width:200px;

padding:20px;

background:pink;

}

.inner{

width:200px;

height:200px;

background:skyblue;

float:left;

}

.clearFix::after{

content:"";

/*注意使用偽元素之時(shí)，content屬性不可省略*/

display:block;

/*將偽元素設(shè)置為塊級元素*/

clear:both;

}</style><divclass="boxclearFix">

<divclass="inner"></div></div>1.2.2float當(dāng)對一個(gè)元素設(shè)置浮動之后，該元素會從正常流中被移出，然后向左或者向右平移，直到遇到另外一個(gè)浮動的元素我們通過偽元素在盒模型底部生成了一個(gè)::after空標(biāo)簽，通過display:block將該標(biāo)簽設(shè)置為塊級元素，并使用clear:both清除浮動。該方法符合閉合浮動思想，且結(jié)構(gòu)語義正確，是在實(shí)際開發(fā)中推薦使用的一種方法。1.3盒模型的背景屬性在默認(rèn)情況下，盒模型的背景是透明的，我們可以通過背景屬性設(shè)置盒模型的背景顏色和背景圖像。1.3.1background-color該屬性用于設(shè)置元素的背景顏色，其值為顏色值或關(guān)鍵字。例如：/*

設(shè)置背景顏色為紅色

*/background-color:red;1.3.2background-image及background-repeat該屬性用于為一個(gè)元素設(shè)置一個(gè)或多個(gè)背景圖像，在默認(rèn)情況下，當(dāng)容器尺寸大于背景圖像尺寸時(shí)，背景圖像會自動向水平和豎直兩個(gè)方向平鋪，填滿整個(gè)容器?？梢酝ㄟ^background-repeat屬性來控制背景圖像的平鋪方式值描述repeat默認(rèn)值。沿著水平和豎直兩個(gè)方向平鋪no-repeat不平鋪，圖像位于元素左上角，僅顯示一次repeat-x僅沿水平方向平鋪repeat-y僅沿豎直方向平鋪1.3.2background-image及background-repeat在一些情況下，background-repeat屬性可以幫助我們壓縮網(wǎng)頁體積。例如，我們可以設(shè)計(jì)一張背景圖像<style>.box{width:700px;height:400px;background-image:url(pic.png);background-repeat:repeat;}</style><divclass="box"></div>1.3.2background-image及background-repeat通過background-repeat屬性，我們僅用一張小圖像即可完成整個(gè)容器或整個(gè)網(wǎng)頁的背景設(shè)計(jì)，極大地壓縮了網(wǎng)頁體積。需要注意的是，background-image屬性的優(yōu)先級要高于background-color屬性，如果同時(shí)設(shè)置了background-image屬性和background-color屬性，將優(yōu)先顯示背景圖像。1.3.3background-position該屬性用于設(shè)置背景圖像的起始位置background-position:top10pxright10px;也可以省略其中某個(gè)偏移量值background-position:topright40px;1.3.3background-positionbackground-position屬性常用于精靈圖的定位。什么是精靈圖呢？精靈圖的實(shí)質(zhì)就是利用背景圖像和背景圖像的位置，顯示同一張圖片上不同位置的圖片，如左圖所示。為什么要使用精靈圖呢？因?yàn)槊繌垐D片的顯示是先由瀏覽器發(fā)送請求，然后由服務(wù)器接收請求，返回請求內(nèi)容。如果一個(gè)頁面有多張小圖片，則每張圖片都需要經(jīng)歷一次這樣的過程。毋庸置疑，這樣肯定會因?yàn)檎埱髷?shù)量的增加而造成整個(gè)頁面的加載速度降低。所以，精靈圖應(yīng)運(yùn)而生，它通過圖片整合技術(shù)，將大量圖片整合到一張圖片中，從而減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度。精靈圖多用于小尺寸圖片的整合，不適合用于大尺寸圖片的整合。1.3.3background-position<style>.icon-android{width:44px;

/*圖標(biāo)寬度為44px*/height:44px;

/*圖標(biāo)高度為44px*/background-image:url(sprite.png);

/*設(shè)置背景圖像*/background-repeat:no-repeat;

/*背景圖像不重復(fù)*/background-position:0px-96px;

/*調(diào)整精靈圖的y軸位置，顯示灰色安卓圖標(biāo)*/}

.icon-android:hover{background-position:-120px-96px;

/*調(diào)整精靈圖的x軸和y軸位置，顯示綠色安卓圖標(biāo)*/}</style><divclass="icon-android"></div>“產(chǎn)品中心”頁面的布局與樣式設(shè)計(jì)任務(wù)1任務(wù)效果本任務(wù)將綜合盒模型及盒模型樣式的相關(guān)知識進(jìn)行“產(chǎn)品中心”頁面的布局與樣式設(shè)計(jì)，頁面效果如圖所示?！爱a(chǎn)品中心”頁面的布局與樣式設(shè)計(jì)任務(wù)1步驟1：新建文件在html文件夾中新建product.html文件，并修改其標(biāo)題為“產(chǎn)品中心”，用于設(shè)計(jì)“產(chǎn)品中心”頁面。步驟2：進(jìn)行瀏覽器默認(rèn)樣式重置在css文件夾中新建reset.css文件，主要用于重置CSS默認(rèn)樣式。由于不同瀏覽器的內(nèi)核區(qū)別，CSS樣式重置就是讓各個(gè)瀏覽器的CSS默認(rèn)樣式有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。在reset.css文件中輸入如下代碼，進(jìn)行瀏覽器默認(rèn)樣式重置。*{

margin:0;/*設(shè)置頁面元素的外邊距為0*/padding:0;/*設(shè)置頁面元素的內(nèi)邊距為0*/box-sizing:border-box;/*設(shè)置頁面的盒模型計(jì)算模式*/}

body{color:#333;/*設(shè)置網(wǎng)頁字體顏色*/font-family:'Microsoftyahei','宋體',Arial;/*設(shè)置網(wǎng)頁字體*/line-height:1.5;/*設(shè)置文本行高*/}a{

/*設(shè)置超鏈接標(biāo)簽的默認(rèn)字體顏色和下畫線*/color:#333;text-decoration:none;}.fx::after{

/*使用偽元素清除浮動*/content:"";display:block;clear:both;}ul,ol{

/*清除無序列表和有序列表的默認(rèn)樣式*/list-style:none;}步驟3：新建product.css文件在css文件夾中新建product.css文件，用于“產(chǎn)品中心”頁面的樣式設(shè)計(jì)，并在product.html文件中引入reset.css文件和product.css文件。<linkrel="stylesheet"type="text/css"href="../css/reset.css"><linkrel="stylesheet"type="text/css"href="../css/product.css">步驟4：在img中放置圖片在img文件夾中放置本任務(wù)設(shè)計(jì)所需圖片，圖片文件結(jié)構(gòu)如圖。步驟5：設(shè)計(jì)廣告欄模塊設(shè)計(jì)“產(chǎn)品中心”頁面的廣告欄模塊，在product.html文件中新建類名為“banner”的div容器，并引入廣告欄圖片。代碼如下。<divclass="banner"><imgsrc="../img/product_center.png"></div>步驟6：設(shè)圖片寬度為100%在product.css文件中設(shè)置廣告欄模塊中的圖片寬度為100%。.bannerimg{

width:100%;}步驟7：布局好各個(gè)模塊新建類名為“container”的主體容器，并設(shè)置其寬度為1000px，在網(wǎng)頁中水平居中對齊。之后根據(jù)圖5-19對容器進(jìn)行模塊劃分，并在product.html文件中布局好各個(gè)模塊。<divclass="container">

<!--主體容器--><divclass="top_bar"></div><!--頂欄--><divclass="contentfx">

<!--內(nèi)容區(qū)域--><divclass="slide_bar"></div><!--側(cè)欄--><divclass="product_item_group"></div><!--產(chǎn)品欄--><divclass="product_list"></div><!--產(chǎn)品列表--></div></div>步驟8：對container進(jìn)行樣式設(shè)置對類名為“container”的主體容器進(jìn)行樣式設(shè)置。.container{

/*主容器寬度設(shè)置*/

width:1000px;

/*主容器字體顏色設(shè)置*/

color:#333;

/*主容器居中對齊設(shè)置*/

margin:auto;}步驟9：對模塊進(jìn)行布局設(shè)計(jì)完成整體框架布局之后，我們需要針對頁面中的各個(gè)模塊進(jìn)行布局設(shè)計(jì)。頂欄的模塊劃分可參考下圖，在product.html文件中輸入如下代碼，進(jìn)行各個(gè)模塊的布局。<divclass="top_bar">

<!--頂欄標(biāo)題-->

<divclass="title">

<h3>產(chǎn)品中心</h3>

</div>

<!--聯(lián)系方式模塊-->

<!--因?yàn)閮?nèi)部"colum"子容器左浮動，所以需要在父容器中添加fx公共樣式，用于清除浮動-->

<divclass="contactfx">

<!--左浮動的產(chǎn)品熱線欄模塊-->

<divclass="column">

<divclass="contact_icontel"></div>

<h6>產(chǎn)品熱線</h6>

<p>400-888-8888</p>

</div>

<!--左浮動的QQ號碼欄模塊-->

<divclass="column">

<divclass="contact_iconqq"></div>

<h6>QQ號碼</h6>

<p>200300400</p>

</div>

<!--左浮動的產(chǎn)品郵箱欄模塊-->

<divclass="column">

<divclass="contact_iconemail"></div>

<h6>產(chǎn)品郵箱</h6>

<p>JUJU@</p>

</div>

</div></div>步驟10：設(shè)置title容器樣式在product.css文件中設(shè)置類名為“title”的容器樣式，用于頂欄的標(biāo)題設(shè)計(jì).title{

height:60px;

border-bottom:1pxsolid#ddd;

/*設(shè)置底邊框?qū)挾葹?px實(shí)線灰色*/

margin-bottom:30px;

/*底部外邊距30px*/}.titleh3{

color:#444866;

height:60px;

line-height:60px;

/*當(dāng)height值=line-height值時(shí)，單行文本豎直居中對齊*/

padding-left:10px;

/*容器的左側(cè)內(nèi)邊距為10px*/}步驟11：設(shè)置contact聯(lián)系欄容器樣式在product.css文件中設(shè)置類名為“title”的容器樣式，用于頂欄的標(biāo)題設(shè)計(jì).contact{

margin-bottom:30px;

/*聯(lián)系欄底部外邊距為30px*/}.contact.column{

width:300px;

height:130px;

cursor:pointer;

/*鼠標(biāo)指針移入聯(lián)系欄子容器時(shí)顯示為手形*/

border-radius:4px;

/*聯(lián)系欄子容器圓角寬度為4px*/

background:#f2f2f2;

float:left;

/*聯(lián)系欄子容器左浮動*/

margin-right:40px;

/*聯(lián)系欄子容器右側(cè)外邊距為40px*/

padding:20px0;

/*聯(lián)系欄子容器上下內(nèi)邊距為20px，左右內(nèi)邊距為0*/}.contact.column:last-child{

margin-right:0;

/*聯(lián)系欄最后一個(gè)子容器的右側(cè)外邊距為0，防止子容器總寬度超出父容器*/}.contacth6{

font-weight:normal;

/*設(shè)置聯(lián)系欄子容器中的h6元素為非粗體*/

margin:8px0;}.contactp{

font-size:14px;}.contactp,.contacth6{

text-align:center;

/*設(shè)置聯(lián)系欄子容器中的p元素和h6元素字體居中*/

color:#444866;}.contact.column:hover{

background:#38b774;

/*當(dāng)鼠標(biāo)指針移入容器時(shí)，背景為淡綠色*/}.contact.column:hoverp,.contact.column:hoverh6{

color:white;

/*當(dāng)鼠標(biāo)指針移入容器時(shí)，容器內(nèi)的p元素和h6元素字體為白色*/}步驟12：background-position屬性進(jìn)行精靈圖定位在product.css文件中設(shè)置類名為“title”的容器樣式，用于頂欄的標(biāo)題設(shè)計(jì).contact_icon{

width:40px;

/*設(shè)置聯(lián)系欄子容器圖標(biāo)寬度為40px*/

height:40px;

/*設(shè)置聯(lián)系欄子容器圖標(biāo)高度為40px*/

background:url(../img/icon.png)no-repeat;

/*設(shè)置聯(lián)系欄子容器圖標(biāo)背景，且不重復(fù)*/

margin:auto;

/*設(shè)置聯(lián)系欄子容器圖標(biāo)水平居中對齊*/}.tel{

background-position:0-684px;

/*設(shè)置聯(lián)系欄子容器圖標(biāo)的精靈圖定位*/}.qq{

background-position:0-753px;}.email{

background-position:0-826px;}.contact.column:hover.tel{

background-position:-44px-684px;

/*設(shè)置鼠標(biāo)指針移入聯(lián)系欄子容器圖標(biāo)時(shí)的精靈圖定位*/}.contact.column:hover.qq{

background-position:-44px-753px;}.contact.column:hover.email{

background-position:-44px-826px;}步驟13：編輯product.html內(nèi)容區(qū)域可被劃分為3個(gè)模塊，我們先對左邊側(cè)邊欄導(dǎo)航模塊（見圖5-19）進(jìn)行設(shè)計(jì)。在product.html文件中輸入如下代碼：<divclass="slide_bar">

<ul>

<li>

<ahref="#">

<iclass="dev_iconapple"></i>

<span>Iphone</span>

</a>

</li>

<li>

<ahref="#">

<iclass="dev_iconandroid"></i>

<span>Android</span>

</a>

</li>

<li>

<ahref="#">

<iclass="dev_iconwindows"></i>

<span>Windows</span>

</a>

</li>

</ul></div>步驟14：product.css樣式設(shè)置在product.css文件中對側(cè)邊欄進(jìn)行樣式設(shè)置。.slide_bar{

width:200px;

float:left;

/*設(shè)置側(cè)邊欄左浮動*/}.slide_barli{

height:80px;

/*設(shè)置側(cè)邊欄導(dǎo)航按鈕寬度*/

line-height:80px;

/*設(shè)置側(cè)邊欄導(dǎo)航按鈕高度*/

border-bottom:1pxsolid#ddd;

/*設(shè)置側(cè)邊欄導(dǎo)航按鈕底邊樣式*/

padding-left:15px;}.slide_barli:hover{

background:#38b774;

/*設(shè)置鼠標(biāo)指針移入側(cè)邊欄導(dǎo)航按鈕時(shí)背景為淡綠色*/}.slide_barli:hoverspan{

color:white;

/*設(shè)置鼠標(biāo)指針移入側(cè)邊欄導(dǎo)航按鈕時(shí)文字為白色*/}步驟15：設(shè)置側(cè)邊欄和導(dǎo)航按鈕在product.css文件中對側(cè)邊欄進(jìn)行樣式設(shè)置。.dev_icon{

width:36px;

/*設(shè)置側(cè)邊欄導(dǎo)航圖標(biāo)寬度*/

height:36px;

/*設(shè)置側(cè)邊欄導(dǎo)航圖標(biāo)高度*/

background:url(../img/icon.png)no-repeat;

/*設(shè)置側(cè)邊欄導(dǎo)航圖標(biāo)的精靈圖背景*/

display:inline-block;

vertical-align:middle;}.apple{

background-position:00;

/*設(shè)置側(cè)邊欄導(dǎo)航圖標(biāo)的精靈圖定位*/}.android{

background-position:0-100px;}.windows{

background-position:0-400px;}.slide_barli:hover.apple{

background-position:-245px0;

/*設(shè)置鼠標(biāo)指針移入側(cè)邊欄導(dǎo)航按鈕圖標(biāo)時(shí)的精靈圖定位*/}.slide_barli:hover.android{

background-position:-245px-100px;}.slide_barli:hover.windows{

background-position:-245px-400px;}步驟16：中間部分進(jìn)行布局設(shè)計(jì)在product.html文件中輸入如下代碼：<divclass="product_item_group">

<divclass="product_item"></div>

<!--產(chǎn)品項(xiàng)-->

<divclass="product_item"></div>

<!--產(chǎn)品項(xiàng)-->

<divclass="product_item"></div>

<!--產(chǎn)品項(xiàng)-->

<divclass="product_item"></div>

<!--產(chǎn)品項(xiàng)-->

<divclass="product_item"></div>

<!--產(chǎn)品項(xiàng)-->

<divclass="product_item"></div>

<!--產(chǎn)品項(xiàng)--></div>步驟17：設(shè)置對應(yīng)樣式設(shè)置每個(gè)產(chǎn)品項(xiàng)的大小、圓角、邊框等屬性，并將其設(shè)置為左浮動，在product.css文件中設(shè)置對應(yīng)樣式。.product_item{

width:215px;

height:192px;

border-radius:4px;

border:1pxsolid#ddd;

float:left;

margin-bottom:20px;

padding:10px;

font-size:14px;}步驟18：設(shè)置對應(yīng)樣式通過結(jié)構(gòu)選擇器設(shè)置第偶數(shù)個(gè)產(chǎn)品項(xiàng)容器距離左側(cè)的外邊距為20px，得到如下圖所示的效果。.product_item_group.product_item:nth-child(2n){

margin-left:20px;}步驟19：產(chǎn)品布局產(chǎn)品項(xiàng)容器的布局可分為“標(biāo)題”“產(chǎn)品項(xiàng)圖片”“產(chǎn)品下載選項(xiàng)”模塊，如下圖所示。<divclass="product_item">

<p>實(shí)訓(xùn)云平臺<span>Trainingcloud></span></p><!--標(biāo)題欄-->

<imgsrc="../img/product01.jpg"><!--圖片欄-->

<divclass="download">

<!--安卓下載選項(xiàng)-->

<divclass="download_item">

<ahref="#">

<divclass="download_iconandroid_icon"></div><span>安卓下載</span>

</a>

</div>

<!--蘋果下載選項(xiàng)-->

<divclass="download_item">

<ahref="#">

<divclass="download_icon"></div><span>蘋果下載</span>

</a>

</div>

</div></div>步驟20：設(shè)置產(chǎn)品項(xiàng)目等設(shè)置產(chǎn)品項(xiàng)標(biāo)題、產(chǎn)品項(xiàng)圖片和產(chǎn)品下載選項(xiàng)的樣式。.product_itemp{

/*產(chǎn)品項(xiàng)標(biāo)題樣式*/

text-align:center;

margin-bottom:8px;}.product_itempspan{

/*產(chǎn)品項(xiàng)英文小標(biāo)題樣式*/

color:#38b774;

font-size:12px;}.product_itemimg{

/*產(chǎn)品項(xiàng)圖片樣式*/

width:100%;

border-radius:4px;}.download{

/*產(chǎn)品下載選項(xiàng)列表樣式*/

font-size:12px;

margin-top:8px;}.download_item{

/*產(chǎn)品下載選項(xiàng)樣式*/

float:left;

width:50%;

text-align:center;}.download.download_item:nth-child(1){

/*產(chǎn)品下載選項(xiàng)分割線*/

border-right:1pxsolid#ddd;}步驟21：設(shè)置產(chǎn)品下載選項(xiàng)的圖標(biāo)樣式使用精靈圖設(shè)置產(chǎn)品下載選項(xiàng)的圖標(biāo)樣式。至此，完成了內(nèi)容區(qū)域中間部分的布局。.download_icon{

width:18px;

height:18px;

background:url(../img/icon.png)no-repeat;

margin-right:2px;

background-size:139px450px;

display:inline-block;

vertical-align:bottom;}.android_icon{

background-position:0-48px;}步驟22：對內(nèi)容進(jìn)行布局可以對內(nèi)容區(qū)域右側(cè)的列表模塊部分采用無序列表結(jié)構(gòu)進(jìn)行布局。<divclass="product_list">

<ul>

<li></li>

<!--產(chǎn)品新聞列表-->

<li></li>

<!--產(chǎn)品新聞列表-->

<li></li>

<!--產(chǎn)品新聞列表-->

<li></li>

<!--產(chǎn)品新聞列表-->

<li></li>

<!--產(chǎn)品新聞列表-->

<li></li>

<!--產(chǎn)品新聞列表-->

<li></li>

<!--產(chǎn)品新聞列表-->

</ul></div>步驟23：設(shè)置產(chǎn)品新聞列表的樣式在product.css文件中設(shè)置產(chǎn)品新聞列表的樣式，并添加鼠標(biāo)指針懸停時(shí)的偽類效果。.product_listulli{

padding:6px;

height:88px;

border-bottom:1pxsolid#ddd;

font-size:12px;

line-height:16px;

overflow:hidden;}.product_listulli:hover{

background:#dcdcdc;}步驟24：為產(chǎn)品新聞列表設(shè)置布局標(biāo)簽及樣式在product.css文件中設(shè)置產(chǎn)品新聞列表的樣式，并添加鼠標(biāo)指針懸停時(shí)的偽類效果。<li>

<ahref="#">

<imgsrc="../img/p1.jpg">

<span>云實(shí)訓(xùn)平臺新功能發(fā)布</span>

</a></li><li>

<ahref="#">

<imgsrc="../img/p2.jpg">

<span>AI智能助手3.0全面推出</span>

</a></li>

步驟25：產(chǎn)品新聞圖片及文字樣式產(chǎn)品新聞圖片及文字樣式如下。至此，我們就完成了“產(chǎn)品中心”頁面的布局與樣式設(shè)計(jì)。/*因?yàn)?lt;img>標(biāo)簽為行內(nèi)塊級元素，<span>標(biāo)簽也被轉(zhuǎn)換為行內(nèi)塊級元素，所以不需要設(shè)置float屬性。*/.product_listulliimg{

vertical-align:top;

width:115px;

height:77px;

padding-right:8px;}.product_listullispan{

display:inline-block;

width:145px;}“產(chǎn)品中心”頁面的布局與樣式設(shè)計(jì)任務(wù)1單選題（1）W3C標(biāo)準(zhǔn)的盒子（默認(rèn)盒子）模型的寬度和高度指的是（）。A．盒子內(nèi)容區(qū)域的寬度和高度B．內(nèi)容區(qū)域的寬度和高度加上內(nèi)邊距C．內(nèi)容區(qū)域的寬度和高度加上內(nèi)邊距和邊框?qū)挾菵．內(nèi)容區(qū)域的寬度和高度加上內(nèi)邊距、邊框?qū)挾?、外邊距單選題（2）一個(gè)精靈圖包含多個(gè)小圖標(biāo)，將精靈圖設(shè)置成背景圖像后，使用CSS屬性中的（）屬性控制要顯示的圖標(biāo)。A．background-position B．background-sizeC．background-repeat D．background-clip單選題（3）CSS定義：#total{width:400px；border:1pxblacksolid；}#d1,#d2,#d3{width:100px;height:100px;margin:10px;background:red；}#d1,#d2,#d3{float:left；}d1,d2,d3都是total的子元素并且按順序排列，下列說法中正確的是（）。A．total盒子的高度是2px B．total盒子的高度是122pxC．total盒子的高度是232px D．total盒子的高度不可知多選題（1）下列對盒模型的描述中不正確的是（）。A．一個(gè)盒子由外邊距、邊框?qū)挾?、?nèi)邊距和內(nèi)容區(qū)域4個(gè)部分組成B．盒子的填充、邊框?qū)挾?、邊距的定義都可以按上、下、右、左4個(gè)方向進(jìn)行C．在默認(rèn)情況下，CSS定義盒子的寬度和高度時(shí)，實(shí)際上定義的是內(nèi)容區(qū)域的寬度和高度D．在默認(rèn)情況下，盒子的寬度是內(nèi)容區(qū)域的寬度加上左右內(nèi)邊距、左右邊域和左右外邊距多選題（2）border-box（IE標(biāo)準(zhǔn)）盒子的width和height包含的要素有（）A．padding B．marginC．border D．盒子內(nèi)容區(qū)域的寬度和高度多選題（3）對浮動的理解正確的是（）。A．浮動后的元素脫離了正常流B．浮動后的元素可能會遮擋未浮動的元素C．浮動后的元素可能會導(dǎo)致其父元素的高度為0D．可以使用浮動技術(shù)準(zhǔn)確定位元素位置判斷題（1）控制盒子尺寸是W3C標(biāo)準(zhǔn)還是IE標(biāo)準(zhǔn)的CSS屬性是box-sizing。 （）（2）及時(shí)清除浮動可以避免浮動元素的父元素發(fā)生高度塌陷問題。 （）（3）使用精靈圖可以減輕網(wǎng)絡(luò)請求負(fù)擔(dān)。 （）模塊6企業(yè)官網(wǎng)首頁設(shè)計(jì)HTML5中推出了很多語義化標(biāo)簽，所謂語義化，就是標(biāo)簽?zāi)軌虮磉_(dá)出展示的內(nèi)容。語義化標(biāo)簽有更加豐富的含義，方便開發(fā)與維護(hù)，也方便搜索引擎識別頁面結(jié)構(gòu)，有利于SEO。本模塊將利用HTML5新增的語義化標(biāo)簽，將頁面劃分為不同的區(qū)域模塊，如頭部模塊、內(nèi)容模塊、底部模塊等，同時(shí)利用CSS3新增的漸變、陰影等屬性設(shè)置豐富的展示效果，完成企業(yè)官網(wǎng)首頁的結(jié)構(gòu)搭建，以及導(dǎo)航欄和底部欄的設(shè)計(jì)。

企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建任務(wù)11.1<header>標(biāo)簽<header>標(biāo)簽用于定義一個(gè)頁面或者一個(gè)區(qū)域的頭部。它可以包含一些標(biāo)題標(biāo)簽及其他標(biāo)簽，如網(wǎng)頁標(biāo)題、搜索框等。例如，一個(gè)典型的<header>標(biāo)簽區(qū)域如下圖所示。1.2<main>標(biāo)簽<main>標(biāo)簽用于規(guī)定文檔的主體內(nèi)容。<main>標(biāo)簽中的內(nèi)容對于文檔來說應(yīng)當(dāng)是唯一的，不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容。在一個(gè)文檔中，不能出現(xiàn)一個(gè)以上的<main>標(biāo)簽。<main>標(biāo)簽不能是<article>、<aside>、<footer>、<header>、<nav>標(biāo)簽的后代。1.2<main>標(biāo)簽<style>header.header{background:url(header_bg.jpg)no-repeat;background-size:cover;height:120px;min-width:120px;border:1pxsolid#efefef;padding-left:10px;}header.header>h1{font-weight:bold;color:yellow}</style>

<headerclass="header"><h1>犬科哺乳動物</h1></header><main><p>

洋蔥和大蔥含有二硫化物，對人無害，卻會造成狗的紅細(xì)胞氧化，可能引發(fā)溶血性貧血和血尿。即使將其加熱，也不能破壞其中的有害物質(zhì)，所以不要給狗喂加了洋蔥和大蔥的食物。</p></main>1.3<footer>標(biāo)簽<footer>標(biāo)簽用于定義文檔或節(jié)的頁腳。<footer>標(biāo)簽應(yīng)當(dāng)含有其包含元素的信息，如文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等。用戶可以在一個(gè)文檔中使用多個(gè)<footer>標(biāo)簽。1.3<footer>標(biāo)簽<style>

body{margin:0;}

header,footer{

background-color:#45a1ff;

color:#fff;

height:60px;

position:fixed;

width:100%;

text-align:center;

line-height:60px;

font-size:24px;

}

main{

line-height:2;

padding-top:60px;

}

header{top:0;}

footer{bottom:0;}

</style>

<header>前端學(xué)習(xí)建議</header>

<main>

<ol>

<li>快速掌握HTML、CSS基礎(chǔ)知識</li>

<li>做大量的靜態(tài)頁面</li>

<li>深入學(xué)習(xí)JavaScript</li>

</ol>

</main>

<footer>?2022Tom</footer>1.4<address>標(biāo)簽<address>標(biāo)簽主要用于提供聯(lián)系信息，<address>標(biāo)簽通常連同其他信息被包含在<footer>標(biāo)簽中。1.4<address>標(biāo)簽<style>

body{margin:0;}

footer{

background:#2e2e2e;

width:100%;

height:50px;

position:fixed;

bottom:0;

}

a{color:white;text-decoration:none;font-size:14px;}

a:hover{color:yellow;}

address{

float:right;

margin-right:10%;

}

a[href^="mailto"]::before{content:""}

a[href^="tel"]::before{content:""}

</style>

<footer>

<address>

<ahref="mailto:jim@">jim@</a><br>

<ahref="tel:>(311)555-2368</a>

</address>

</footer>1.5<section>標(biāo)簽<section>標(biāo)簽用于定義文檔中的節(jié)、區(qū)段，比如章節(jié)、頁眉、頁腳或文檔中的其他部分，一般而言會包含一個(gè)標(biāo)題。<h1>挑選水果</h1><section><h2>介紹</h2><p>本文檔主要介紹如何挑選優(yōu)質(zhì)的水果</p></section><section><h2>挑選標(biāo)準(zhǔn)</h2><p>挑選水果時(shí)，有許多不同的標(biāo)準(zhǔn)需要考慮，例如大小、顏色、硬度、甜味、酸度……</p></section>1.6<article>標(biāo)簽<article>標(biāo)簽用于定義文檔內(nèi)的獨(dú)立文章或內(nèi)容，可以是一個(gè)論壇帖子，可以是一篇新聞報(bào)道，也可以是一條用戶評論。只要是一篇獨(dú)立的文檔內(nèi)容，都可以使用該標(biāo)簽。<article>標(biāo)簽也可以嵌套使用。1.6<article>標(biāo)簽<style>

.forecast{

margin:0;

padding:10px;

background-color:#eee;

}

.forecast>h1,

.day-forecast{

margin:15px;

padding:10px;

font-size:18px;

}

.day-forecast{

background:right/containcontent-boxborder-boxno-repeaturl('rain.png')white;

}

.day-forecast>h2,

.day-forecast>p{

margin:10px;

font-size:14px;

}</style><articleclass="forecast">

<h1>天氣預(yù)報(bào)</h1>

<articleclass="day-forecast">

<h2>5月1日</h2>

<p>天氣：雨</p>

</article>

<articleclass="day-forecast">

<h2>5月2日</h2>

<p>天氣：雨</p>

</article>

<articleclass="day-forecast">

<h2>5月3日</h2>

<p>天氣：雨</p>

</article></article>1.6<article>標(biāo)簽<style>

.noteheader{

border-bottom:2pxsolid#efefef;

}

.notesection{

border:

1pxsolid#efefef;

margin:10px0;

padding:10px;

background:#eee;

}

.notefooter{

text-align:right;

font-style:oblique;

}</style><articleclass="note">

<header>

<h2>阿林的HTML學(xué)習(xí)筆記</h2>

</header>

<section>

<p>超文本標(biāo)記語言（HyperTextMarkupLanguage，HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計(jì)網(wǎng)頁、網(wǎng)頁應(yīng)用程序及移動應(yīng)用程序的用戶界面。</p>

</section>

<footer>

<p>

記錄于

<time>2022-5-1</time>

</p>

</footer></article><article>標(biāo)簽中也可以使用<header>、<footer>、<section>等標(biāo)簽，將一篇獨(dú)立的文檔內(nèi)容分成若干塊。1.7<nav>標(biāo)簽<style>

body{

margin:0;

}

header{

height:100px;

background:#eee;

color:white;

margin-bottom:20px;

}

nav{

line-height:100px;

padding-left:10px;

}

a{

text-decoration:none;

margin-right:15px;

color:#333;

}

a:hover{

color:tomato;

}</style><header>

<nav>

<ahref="#">首頁</a>

<ahref="#">散文</a>

<ahref="#">生活</a>

<ahref="#">留言板</a>

<ahref="#">關(guān)于</a>

</nav></header><nav>標(biāo)簽用于定義頁面上的導(dǎo)航鏈接部分，比如頂部導(dǎo)航、底部導(dǎo)航、側(cè)邊導(dǎo)航等。

<style>

aside{

width:40%;

padding-left:8px;

margin-left:8px;

float:right;

box-shadow:inset5px05px-5px#29627e;

font-style:italic;

color:#29627e;

}

aside>p{

margin:8px;

}

</style>

<p>貓科動物：哺乳綱、食肉目、貓科動物下的動物。分為兩種亞科，即貓亞科和豹亞科。共有14屬38種。</p>

<aside>

<p>獅子、老虎等猛獸也屬于貓科動物。</p>

</aside>

<p>貓科動物多數(shù)善攀緣及跳躍。大多喜獨(dú)居。常以伏擊方式捕殺其他溫血?jiǎng)游铩?lt;/p>1.8<aside>標(biāo)簽<aside>標(biāo)簽通常用于定義側(cè)邊欄或標(biāo)注框。1.9<hgroup>標(biāo)簽<hgroup>標(biāo)簽用于對多個(gè)<h1>～<h6>標(biāo)簽進(jìn)行組合，一般用來展示標(biāo)題的多個(gè)層級或副標(biāo)題。<hgroup>

<h1>Web基礎(chǔ)開發(fā)</h1>

<h2>HTML5+CSS3項(xiàng)目實(shí)戰(zhàn)</h2></hgroup>1.10<figure>標(biāo)簽<figure>標(biāo)簽用于定義一段獨(dú)立的流內(nèi)容，<figure>標(biāo)簽的內(nèi)容應(yīng)該與主要內(nèi)容相關(guān)，但如果其被刪除，也不會對文檔流產(chǎn)生影響。該標(biāo)簽經(jīng)常與<figcaption>標(biāo)簽配合使用。<style>

figure{

border:thin#c0c0c0solid;

max-width:350px;

margin:auto;

}

figureimg{

width:100%;

display:block;

}

figcaption{

background-color:#222;

color:#fff;

padding:3px;

text-align:center;

}</style><p>

榕樹：大喬木，高達(dá)15～25米，胸徑達(dá)50厘米，冠幅廣展；老樹常有銹褐色氣根。樹皮呈深灰色。榕果成對腋生或生于已落葉枝葉腋，成熟時(shí)呈黃色或微紅色，扁球形。</p><figure>

<imgsrc="tree.png"alt="榕樹圖片">

<figcaption>榕樹</figcaption></figure>1.10<figure>標(biāo)簽<figcaption>標(biāo)簽表示與其關(guān)聯(lián)引用的說明或標(biāo)題，用于描述其父標(biāo)簽<figure>中的數(shù)據(jù)內(nèi)容。

企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建任務(wù)1任務(wù)效果根據(jù)下圖進(jìn)行企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建

企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建任務(wù)1步驟1：新建文件在css文件夾中新建layout.css文件，用于設(shè)計(jì)企業(yè)官網(wǎng)首頁的布局結(jié)構(gòu)，并在企業(yè)官網(wǎng)首頁中引入reset.css和layout.css文件。<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>巨巨網(wǎng)絡(luò)科技有限公司</title><linkrel="stylesheet"href="css/reset.css"><linkrel="stylesheet"href="css/layout.css"></head>步驟2：進(jìn)行布局結(jié)構(gòu)的書寫由上而下將首頁劃分為頂部欄、廣