“西式甜品網”首頁面制作一、案例描述 1、考核知識點 盒子模型 元素的浮動與定位2、練習目標 掌握盒子的相關屬性。 掌握元素的浮動與定位。3、需求分析盒子模型這樣的布局方式代替了傳統的表格布局，同時結合元素的浮動與定位，可使網頁的結構更加多樣化，通過學習本案例可以使初學者進一步的鞏固盒子模型和元素的浮動與定位等相關知識點。4、案例展示效果如圖4-1所示。 圖4-1 “西式甜品網”效果展示二、布局及定義基礎樣式1、效果分析（1）HTML結構分析“西式甜品網”首頁面從上到下可以分為5個模塊，如圖4-2所示。圖4-2 “西式甜品網”結構分析（2）CSS樣式分析頁面中的各個模塊居中顯示，頁面的版心為980px。另外，頁面中的所有字體均為微軟雅黑，字體大小為16px，這些可以通過CSS公共樣式進行定義。2、頁面布局新建index04.html文件，在index04.html文件內書寫HTML結構代碼，具體代碼如下。 1 3 4 5 6 西式甜品網 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 在上述代碼中，通過給div添加不同的類名來定義頁面中的各個模塊。3、定義公共樣式為了清除各瀏覽器的默認樣式，使得網頁在各瀏覽器中顯示的效果一致，在完成頁面布局后，首先要做的就是對CSS樣式進行初始化并聲明一些通用的樣式。在index04.html文件所在的文件夾內新建css文件夾用于存放樣式表文件style04.css，使用鏈入式引入樣式表文件。然后定義頁面的基礎樣式，具體如下：/*重置瀏覽器的默認樣式*/*margin:0; padding:0;border:0; background:none;/*全局控制*/bodyfont-family:微軟雅黑;font-size:16px;三、案例制作1、制作頭部模塊（1）HTML結構分析“頭部”模塊整體由一個大盒子進行控制。內部嵌套和分別用來搭建左側logo和右側文字內容部分。“頭部”模塊的具體結構如圖4-3所示。圖4-3 “頭部”模塊結構圖（2）樣式分析“頭部”模塊的寬為980px，通過設置外邊距屬性使其在頁面中居中顯示，并設置相對定位。左側logo和右側文字內容部分相對外層大盒子設置絕對定位，最后還需設置文字的相關樣式等。（3）搭建結構在index04.html文件內書寫“頭部”模塊的HTML結構代碼。具體如下： 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行代碼用于設置“頭部”模塊在頁面中居中顯示。保存index04.html與style04.css文件，刷新頁面，效果如圖4-4所示。圖4-4 “頭部”模塊效果圖2、制作導航及banner模塊（1）HTML結構分析“導航”及“banner”模塊分別由一個大盒子進行控制。導航內容部分由標記定義，banner圖由標記定義。“導航”及“banner”模塊的具體結構如圖4-5所示。圖4-5 “導航”及“banner”模塊結構圖（2）樣式分析“導航”模塊的背景色通欄顯示，因此需設置最外層的寬度100%，內部嵌套的寬度為980px，且在頁面中居中顯示。定義標記左浮動，并定義相關的文字樣式。最后還需設置“banner”模塊的圖片在頁面中居中顯示。（3）搭建結構在index04.html文件內書寫“導航”及“banner”模塊的HTML結構代碼。具體如下： 1 2 3 4 首頁 5 公司簡介 6 美食甜品 7 用戶留言 8 聯系我們 9 10 11 12 13 14 （4）定義樣式在樣式表文件style04.css中書寫CSS樣式代碼，用于控制“導航”及“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行代碼分別用于設置導航內容部分和banner圖片在頁面中居中顯示。保存index04.html與style04.css文件，刷新頁面，效果如圖4-6所示。圖4-6 “導航”及“banner”模塊效果圖3、制作產品分類模塊（1）HTML結構分析“產品分類”模塊主要由標記定義。“產品分類”模塊的具體結構如圖4-7所示。圖4-7 “產品分類”模塊結構圖（2）樣式分析“產品分類”模塊的背景色通欄顯示，因此需設置最外層的寬度100%，內部嵌套的寬度為980px，且在頁面中居中顯示。定義每一個分類模塊的標記左浮動，并定義相關的文字樣式。（3）搭建結構在index04.html文件內書寫“產品分類”模塊的HTML結構代碼。具體如下： 1 2 3 4 提拉米蘇 5 甜甜圈 6 芝士蛋糕 7 馬卡龍 8 西式甜點 9 10 11 （4）定義樣式在樣式表文件style04.css中書寫CSS樣式代碼，用于控制“產品分類”模塊。具體如下： 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行代碼用于分別設置各個分類模塊的背景圖片。保存index04.html與style04.css文件，刷新頁面，效果如圖4-8所示。圖4-8 “產品分類”模塊效果圖4、制作產品展示模塊（1）HTML結構分析“產品展示”模塊主要由標記嵌套標記和標記定義。“產品展示”模塊的具體結構如圖4-9所示。圖4-9 “產品展示”模塊結構圖（2）樣式分析“產品展示”模塊的背景色通欄顯示，因此需設置最外層的寬度100%，內部嵌套的寬度為980px，且在頁面中居中顯示。定義每一個展示模塊的標記左浮動，并定義相關的文字樣式。（3）搭建結構在index04.html文件內書寫“產品展示”模塊的HTML結構代碼。具體如下： 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 西式甜點 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樣式代碼，用于控制“產品展示”模塊。具體如下： 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行代碼將標記轉換為塊元素用于換行顯示文字內容。保存index04.html與style04.css文件，刷新頁面，效果如圖4-10所示。圖4-10 “產品展示”模塊效果圖5、制作版權信息模塊（1）HTML結構分析“版權信息”模塊由標記定義。具體結構如圖4-11所示。圖4-11 “版權信息”模塊結構圖（2）樣式分析“版權信息”模塊的背景圖通欄顯示，因此需設置最外層的寬度100%，且文字內容居中顯示。（3）搭建結構在index04.html文件內書寫“版權信息”模塊的HTML結構代碼。具體如下： 1 2 西式甜品網版權所有2000-2016京ICP備08001421號  京公網安備110108007702 3 （4）定義樣式在樣式表文件style04.css中書寫CSS樣式代碼，用于控制“版權信息”模塊。具體如下： 1 .footer 2 position: relative; 3