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

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