1、“西式甜品網(wǎng)”首頁面制作一、事例描繪1、查核知識點盒子模型元素的浮動與定位2、練習(xí)目標掌握盒子的有關(guān)屬性。掌握元素的浮動與定位。3、需求剖析盒子模型這樣的布局方式取代了傳統(tǒng)的表格布局，同時聯(lián)合元素的浮動與定位，可使網(wǎng)頁的構(gòu)造更為多樣化，經(jīng)過學(xué)習(xí)本事例能夠使初學(xué)者進一步的穩(wěn)固盒子模型和元素的浮動與定位等有關(guān)知識點。4、事例展現(xiàn)成效如圖4-1所示。圖4-1“西式甜品網(wǎng)”成效展現(xiàn)二、布局及定義基礎(chǔ)款式1、成效剖析1）HTML構(gòu)造剖析“西式甜品網(wǎng)”首頁面從上到下能夠分為5個模塊，如圖4-2所示。圖4-2“西式甜品網(wǎng)”構(gòu)造剖析（2）CSS款式剖析頁面中的各個模塊居中顯示，頁面的版心為980px。此外，頁

2、面中的全部字體均為微軟雅黑，字體大小為16px，這些能夠經(jīng)過CSS公共款式進行定義。2、頁面布局新建index04.html文件，在index04.html文件內(nèi)書寫HTML構(gòu)造代碼，詳細代碼以下。西式甜品網(wǎng)在上述代碼中，經(jīng)過給div增添不一樣的類名來定義頁面中的各個模塊。3、定義公共款式為了消除各閱讀器的默認款式，使得網(wǎng)頁在各閱讀器中顯示的成效一致，在達成頁面布局后，第一要做的就是對CSS款式進行初始化并申明一些通用的款式。在index04.html文件所在的文件夾內(nèi)新建css文件夾用于寄存款式表文件style04.css，使用鏈入式引入款式表文件。而后定義頁面的基礎(chǔ)款式，詳細以下：/*重置

3、閱讀器的默認款式*/*margin:0;padding:0;border:0;background:none;/*全局控制*/bodyfont-family:微軟雅黑;font-size:16px;三、事例制作1、制作頭部模塊（1）HTML構(gòu)造剖析“頭部”模塊整體由一個大盒子進行控制。內(nèi)部嵌套和分別用來搭建左邊logo和右側(cè)文字內(nèi)容部分?！邦^部”模塊的詳細構(gòu)造如圖4-3所示。圖4-3“頭部”模塊構(gòu)造圖（2）款式剖析“頭部”模塊的寬為980px，經(jīng)過設(shè)置外邊距屬性使其在頁面中居中顯示，并設(shè)置相對定位。左邊logo和右邊文字內(nèi)容部分相對外層大盒子設(shè)置絕對定位，最后還需設(shè)置文字的有關(guān)款式等。（3）搭

4、建構(gòu)造在index04.html文件內(nèi)書寫“頭部”模塊的HTML構(gòu)造代碼。詳細以下：4登錄|注冊（4）定義款式在款式表文件style04.css中書寫CSS款式代碼，用于控制“頭部”模塊。詳細以下：.headwidth:980px;height:80px;margin:0auto;position:relative;.logoposition:absolute;left:100px;top:15px;.loginposition:absolute;right:100px;top:34px;color:#ff9c00;cursor:pointer;font-size:18px;上述代碼中，第4行

5、代碼用于設(shè)置“頭部”模塊在頁面中居中顯示。保留index04.html與style04.css文件，刷新頁面，成效如圖4-4所示。圖4-4“頭部”模塊成效圖2、制作導(dǎo)航及banner模塊1）HTML構(gòu)造剖析“導(dǎo)航”及“banner”模塊分別由一個大盒子進行控制。導(dǎo)航內(nèi)容部分由標志定義，banner圖由標志定義?！皩?dǎo)航”及“banner”模塊的詳細構(gòu)造如圖4-5所示。圖4-5“導(dǎo)航”及“banner”模塊構(gòu)造圖（2）款式剖析“導(dǎo)航”模塊的背風(fēng)景通欄顯示，所以需設(shè)置最外層的寬度100%，內(nèi)部嵌套的寬度為980px，且在頁面中居中顯示。定義標志左浮動，并定義有關(guān)的文字款式。最后還需設(shè)置“banner

6、”模塊的圖片在頁面中居中顯示。3）搭建構(gòu)造在index04.html文件內(nèi)書寫“導(dǎo)航”及“banner”模塊的HTML構(gòu)造代碼。詳細以下：4首頁5企業(yè)簡介6美食甜品7用戶留言8聯(lián)系我們（4）定義款式在款式表文件style04.css中書寫CSS款式代碼，用于控制“導(dǎo)航”及“banner”模塊。詳細以下：.navwidth:100%;height:50px;background:#ff9c00;.nav_inwidth:820px;margin:0auto;line-height:50px;color:#fff;padding-left:160px;.nav_inspanfloat:left;p

7、adding:038px;color:#9c5132;cursor:pointer;.bannertext-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構(gòu)造剖析“產(chǎn)品分類”模塊主要由標志定義?！爱a(chǎn)品分類”模塊的詳細構(gòu)造如圖圖4-7“產(chǎn)品分類”模塊構(gòu)造圖4-7所示。（2）款式剖析“產(chǎn)品分類”模塊的背風(fēng)景通欄顯示，所以需設(shè)置最外層的寬度100%，內(nèi)部嵌套的寬度為

8、980px，且在頁面中居中顯示。定義每一個分類模塊的標志左浮動，并定義有關(guān)的文字款式。3）搭建構(gòu)造在index04.html文件內(nèi)書寫“產(chǎn)品分類”模塊的HTML構(gòu)造代碼。詳細以下：4提拉米蘇5甜甜圈6芝士蛋糕7馬卡龍8西式甜點（4）定義款式在款式表文件style04.css中書寫CSS款式代碼，用于控制“產(chǎn)品分類”模塊。詳細以下：.listwidth:100%;height:240px;background:#e7bf80;.list.list_inwidth:940px;height:195px;margin:0auto;padding:45px0040px;.list.list_indiv

9、float:left;width:146px;height:55px;padding-top:95px;margin-right:42px;background:url(./images/list1.png)no-repeat;text-align:center;color:#9c5132;.list.list_in.list2background:url(./images/list2.png)no-repeat;.list.list_in.list3background:url(./images/list3.png)no-repeat;.list.list_in.list4backgroun

10、d:url(./images/list4.png)no-repeat;.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)品展現(xiàn)模塊1）HTML構(gòu)造剖析“產(chǎn)品展現(xiàn)”模塊主要由標志嵌套標志和標志定義?！爱a(chǎn)品展現(xiàn)”模塊的詳細構(gòu)造如圖4-9所示。圖4-9“產(chǎn)品展現(xiàn)”模塊構(gòu)造圖（2）款式剖析“產(chǎn)品展現(xiàn)”模塊的背風(fēng)景通欄顯示，所以需設(shè)置最外

11、層的寬度100%，內(nèi)部嵌套的寬度為980px，且在頁面中居中顯示。定義每一個展現(xiàn)模塊的標志左浮動，并定義有關(guān)的文字款式。3）搭建構(gòu)造在index04.html文件內(nèi)書寫“產(chǎn)品展現(xiàn)”模塊的HTML構(gòu)造代碼。詳細以下：456愛的N次方7馬卡龍8價錢：30元9101112果肉果凍13雙色馬卡龍14價錢：30元15161718芒果味19布丁馬卡龍20價錢：30元21222324果凍荔枝味25多彩馬卡龍26價錢：30元27282930果味巧克力31西式甜點32價錢：30元33343536奶油水果37提拉米蘇38價錢：30元39404142玫瑰花型43布丁44價錢：30元45464748燕麥奶油49芝士蛋

12、糕50價錢：30元51（4）定義款式在款式表文件style04.css中書寫CSS款式代碼，用于控制“產(chǎn)品展現(xiàn)”模塊。詳細以下：.contentwidth:100%;height:570px;background:#f8f5bc;.conwidth:912px;height:530px;margin:0auto;padding:40px0068px;.con.con_typewidth:180px;height:220px;border:1pxsolid#ccc;float:left;background:#fff;margin:039px30px0;font-size:14px;color:

13、#9c5132;.con.con_typespandisplay:block;padding:2px0016px;.con.con_typespan.con_namecolor:#fd8187;.con.con_typespanbfont-weight:normal;color:#fd8187;.con.con_typeimgmargin:12px12px3px12px;width:158px;height:122px;上述代碼中，第23行代碼將標志變換為塊元素用于換行顯示文字內(nèi)容。保留index04.html與style04.css文件，刷新頁面，成效如圖4-10所示。圖4-10“產(chǎn)品展現(xiàn)”模塊成效圖5、制作版權(quán)信息模塊1）HTML構(gòu)造剖析“版權(quán)信息”模塊由標志定義。詳細構(gòu)造如圖4-11所示。圖4-11“版權(quán)信息”模塊構(gòu)造圖（2）款式剖析“版權(quán)信息”模塊的背景圖通欄顯示，所以需設(shè)置最外層的寬度100%，且文字內(nèi)容居中顯示。（3）搭建構(gòu)造在index04.html文件內(nèi)書寫“版權(quán)信息”模塊的HTML構(gòu)造代碼。詳細以下：（4）定義款式在款式表文件style04.css中書寫CSS款式代碼，用于控制“版權(quán)信息”模塊。詳細以下：.footerposition:relative;top:-8