html-西式甜品網(wǎng)制作.doc

“西式甜品網(wǎng)”首頁(yè)面制作一、案例描述 1、考核知識(shí)點(diǎn) 盒子模型 元素的浮動(dòng)與定位2、練習(xí)目標(biāo) 掌握盒子的相關(guān)屬性。 掌握元素的浮動(dòng)與定位。3、需求分析盒子模型這樣的布局方式代替了傳統(tǒng)的表格布局，同時(shí)結(jié)合元素的浮動(dòng)與定位，可使網(wǎng)頁(yè)的結(jié)構(gòu)更加多樣化，通過(guò)學(xué)習(xí)本案例可以使初學(xué)者進(jìn)一步的鞏固盒子模型和元素的浮動(dòng)與定位等相關(guān)知識(shí)點(diǎn)。4、案例展示效果如圖4-1所示。 圖4-1 “西式甜品網(wǎng)”效果展示二、布局及定義基礎(chǔ)樣式1、效果分析（1）HTML結(jié)構(gòu)分析“西式甜品網(wǎng)”首頁(yè)面從上到下可以分為5個(gè)模塊，如圖4-2所示。圖4-2 “西式甜品網(wǎng)”結(jié)構(gòu)分析（2）CSS樣式分析頁(yè)面中的各個(gè)模塊居中顯示，頁(yè)面的版心為980px。另外，頁(yè)面中的所有字體均為微軟雅黑，字體大小為16px，這些可以通過(guò)CSS公共樣式進(jìn)行定義。2、頁(yè)面布局新建index04.html文件，在index04.html文件內(nèi)書(shū)寫(xiě)HTML結(jié)構(gòu)代碼，具體代碼如下。 1 3 4 5 6 西式甜品網(wǎng) 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 在上述代碼中，通過(guò)給div添加不同的類(lèi)名來(lái)定義頁(yè)面中的各個(gè)模塊。3、定義公共樣式為了清除各瀏覽器的默認(rèn)樣式，使得網(wǎng)頁(yè)在各瀏覽器中顯示的效果一致，在完成頁(yè)面布局后，首先要做的就是對(duì)CSS樣式進(jìn)行初始化并聲明一些通用的樣式。在index04.html文件所在的文件夾內(nèi)新建css文件夾用于存放樣式表文件style04.css，使用鏈入式引入樣式表文件。然后定義頁(yè)面的基礎(chǔ)樣式，具體如下：/*重置瀏覽器的默認(rèn)樣式*/*margin:0; padding:0;border:0; background:none;/*全局控制*/bodyfont-family:微軟雅黑;font-size:16px;三、案例制作1、制作頭部模塊（1）HTML結(jié)構(gòu)分析“頭部”模塊整體由一個(gè)大盒子進(jìn)行控制。內(nèi)部嵌套和分別用來(lái)搭建左側(cè)logo和右側(cè)文字內(nèi)容部分。“頭部”模塊的具體結(jié)構(gòu)如圖4-3所示。圖4-3 “頭部”模塊結(jié)構(gòu)圖（2）樣式分析“頭部”模塊的寬為980px，通過(guò)設(shè)置外邊距屬性使其在頁(yè)面中居中顯示，并設(shè)置相對(duì)定位。左側(cè)logo和右側(cè)文字內(nèi)容部分相對(duì)外層大盒子設(shè)置絕對(duì)定位，最后還需設(shè)置文字的相關(guān)樣式等。（3）搭建結(jié)構(gòu)在index04.html文件內(nèi)書(shū)寫(xiě)“頭部”模塊的HTML結(jié)構(gòu)代碼。具體如下： 1 2 3 4 登錄 | 注冊(cè) 5 6 （4）定義樣式在樣式表文件style04.css中書(shū)寫(xiě)CSS樣式代碼，用于控制“頭部”模塊。具體如下： 1 .head 2 width:980px; 3 height:80px; 4 margin:0 auto; 5 position: relative; 6 7 .logo 8 position: absolute; 9 left:100px; 10 top:15px; 11 12 .login 13 position: absolute; 14 right:100px; 15 top:34px; 16 color:#ff9c00; 17 cursor: pointer; 18 font-size: 18px; 19 上述代碼中，第4行代碼用于設(shè)置“頭部”模塊在頁(yè)面中居中顯示。保存index04.html與style04.css文件，刷新頁(yè)面，效果如圖4-4所示。圖4-4 “頭部”模塊效果圖2、制作導(dǎo)航及banner模塊（1）HTML結(jié)構(gòu)分析“導(dǎo)航”及“banner”模塊分別由一個(gè)大盒子進(jìn)行控制。導(dǎo)航內(nèi)容部分由標(biāo)記定義，banner圖由標(biāo)記定義?！皩?dǎo)航”及“banner”模塊的具體結(jié)構(gòu)如圖4-5所示。圖4-5 “導(dǎo)航”及“banner”模塊結(jié)構(gòu)圖（2）樣式分析“導(dǎo)航”模塊的背景色通欄顯示，因此需設(shè)置最外層的寬度100%，內(nèi)部嵌套的寬度為980px，且在頁(yè)面中居中顯示。定義標(biāo)記左浮動(dòng)，并定義相關(guān)的文字樣式。最后還需設(shè)置“banner”模塊的圖片在頁(yè)面中居中顯示。（3）搭建結(jié)構(gòu)在index04.html文件內(nèi)書(shū)寫(xiě)“導(dǎo)航”及“banner”模塊的HTML結(jié)構(gòu)代碼。具體如下： 1 2 3 4 首頁(yè) 5 公司簡(jiǎn)介 6 美食甜品 7 用戶(hù)留言 8 聯(lián)系我們 9 10 11 12 13 14 （4）定義樣式在樣式表文件style04.css中書(shū)寫(xiě)CSS樣式代碼，用于控制“導(dǎo)航”及“banner”模塊。具體如下： 1 .nav 2 width:100%; 3 height:50px; 4 background: #ff9c00; 5 6 .nav_in 7 width:820px; 8 margin:0 auto; 9 line-height: 50px; 10 color:#fff; 11 padding-left: 160px; 12 13 .nav_in span 14 float: left; 15 padding:0 38px; 16 color:#9c5132; 17 cursor: pointer; 18 19 .banner text-align: center;上述代碼中，第8行和第19行代碼分別用于設(shè)置導(dǎo)航內(nèi)容部分和banner圖片在頁(yè)面中居中顯示。保存index04.html與style04.css文件，刷新頁(yè)面，效果如圖4-6所示。圖4-6 “導(dǎo)航”及“banner”模塊效果圖3、制作產(chǎn)品分類(lèi)模塊（1）HTML結(jié)構(gòu)分析“產(chǎn)品分類(lèi)”模塊主要由標(biāo)記定義?！爱a(chǎn)品分類(lèi)”模塊的具體結(jié)構(gòu)如圖4-7所示。圖4-7 “產(chǎn)品分類(lèi)”模塊結(jié)構(gòu)圖（2）樣式分析“產(chǎn)品分類(lèi)”模塊的背景色通欄顯示，因此需設(shè)置最外層的寬度100%，內(nèi)部嵌套的寬度為980px，且在頁(yè)面中居中顯示。定義每一個(gè)分類(lèi)模塊的標(biāo)記左浮動(dòng)，并定義相關(guān)的文字樣式。（3）搭建結(jié)構(gòu)在index04.html文件內(nèi)書(shū)寫(xiě)“產(chǎn)品分類(lèi)”模塊的HTML結(jié)構(gòu)代碼。具體如下： 1 2 3 4 提拉米蘇 5 甜甜圈 6 芝士蛋糕 7 馬卡龍 8 西式甜點(diǎn) 9 10 11 （4）定義樣式在樣式表文件style04.css中書(shū)寫(xiě)CSS樣式代碼，用于控制“產(chǎn)品分類(lèi)”模塊。具體如下： 1 .list 2 width:100%; 3 height:240px; 4 background: #e7bf80; 5 6 .list .list_in 7 width:940px; 8 height:195px; 9 margin:0 auto; 10 padding:45px 0 0 40px; 11 12 .list .list_in div 13 float: left; 14 width:146px; 15 height:55px; 16 padding-top: 95px; 17 margin-right: 42px; 18 background: url(./images/list1.png) no-repeat; 19 text-align: center; 20 color:#9c5132; 21 22 .list .list_in .list2background: url(./images/list2.png) no-repeat; 23 .list .list_in .list3background: url(./images/list3.png) no-repeat; 24 .list .list_in .list4background: url(./images/list4.png) no-repeat; 25 .list .list_in .list5background: url(./images/list5.png) no-repeat;上述代碼中，第22-25行代碼用于分別設(shè)置各個(gè)分類(lèi)模塊的背景圖片。保存index04.html與style04.css文件，刷新頁(yè)面，效果如圖4-8所示。圖4-8 “產(chǎn)品分類(lèi)”模塊效果圖4、制作產(chǎn)品展示模塊（1）HTML結(jié)構(gòu)分析“產(chǎn)品展示”模塊主要由標(biāo)記嵌套標(biāo)記和標(biāo)記定義?！爱a(chǎn)品展示”模塊的具體結(jié)構(gòu)如圖4-9所示。圖4-9 “產(chǎn)品展示”模塊結(jié)構(gòu)圖（2）樣式分析“產(chǎn)品展示”模塊的背景色通欄顯示，因此需設(shè)置最外層的寬度100%，內(nèi)部嵌套的寬度為980px，且在頁(yè)面中居中顯示。定義每一個(gè)展示模塊的標(biāo)記左浮動(dòng)，并定義相關(guān)的文字樣式。（3）搭建結(jié)構(gòu)在index04.html文件內(nèi)書(shū)寫(xiě)“產(chǎn)品展示”模塊的HTML結(jié)構(gòu)代碼。具體如下： 1 2 3 4 5 6 愛(ài)的N次方 7 馬卡龍 8 價(jià)格：30元 9 10 11 12 果肉果凍 13 雙色馬卡龍 14 價(jià)格：30元 15 16 17 18 芒果味 19 布丁馬卡龍 20 價(jià)格：30元 21 22 23 24 果凍荔枝味 25 多彩馬卡龍 26 價(jià)格：30元 27 28 29 30 果味巧克力 31 西式甜點(diǎn) 32 價(jià)格：30元 33 34 35 36 奶油水果 37 提拉米蘇 38 價(jià)格：30元 39 40 41 42 玫瑰花型 43 布丁 44 價(jià)格：30元 45 46 47 48 燕麥奶油 49 芝士蛋糕 50 價(jià)格：30元 51 52 53 54 （4）定義樣式在樣式表文件style04.css中書(shū)寫(xiě)CSS樣式代碼，用于控制“產(chǎn)品展示”模塊。具體如下： 1 .content 2 width:100%; 3 height:570px; 4 background: #f8f5bc; 5 6 .con 7 width:912px; 8 height:530px; 9 margin:0 auto; 10 padding:40px 0 0 68px; 11 12 .con .con_type 13 width:180px; 14 height:220px; 15 border:1px solid #ccc; 16 float: left; 17 background: #fff; 18 margin:0 39px 30px 0; 19 font-size: 14px; 20 color:#9c5132; 21 22 .con .con_type span 23 display: block; 24 padding:2px 0 0 16px; 25 26 .con .con_type span.con_namecolor:#fd8187; 27 .con .con_type span b 28 font-weight: normal; 29 color:#fd8187; 30 31 .con .con_type img 32 margin:12px 12px 3px 12px; 33 width:158px; 34 height:122px; 35 上述代碼中，第23行代碼將標(biāo)記轉(zhuǎn)換為塊元素用于換行顯示文字內(nèi)容。保存index04.html與style04.css文件，刷新頁(yè)面，效果如圖4-10所示。圖4-10 “產(chǎn)品展示”模塊效果圖5、制作版權(quán)信息模塊（1）HTML結(jié)構(gòu)分析“版權(quán)信息”模塊由標(biāo)記定義。具體結(jié)構(gòu)如圖4-11所示。圖4-11 “版權(quán)信息”模塊結(jié)構(gòu)圖（2）樣式分析“版權(quán)信息”模塊的背景圖通欄顯示，因此需設(shè)置最外層的寬度100%，且文字內(nèi)容居中顯示。（3）搭建結(jié)構(gòu)在index04.html文件內(nèi)書(shū)寫(xiě)“版權(quán)信息”模塊的HTML結(jié)構(gòu)代碼。具體如下： 1 2 西式甜品網(wǎng)版權(quán)所有2000-2016京ICP備08001421號(hào)  京公網(wǎng)安備110108007702 3 （4）定義樣式在樣式表文件style04.css中書(shū)寫(xiě)CSS樣式代碼，用于控制“版權(quán)信息”模塊。具體如下： 1 .footer 2 position: relative; 3