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

1、文檔，式甜品網(wǎng)”首頁面制作1、令核如iRj藏 盒子棋弦 元素的浮動(dòng)與定位2、練習(xí)目標(biāo) 掌握盒子的相關(guān)屆性C 掌握元素的浮動(dòng)與定位。3、冊灰分析盒子棋型這樣的布局方式代替了傳統(tǒng)的農(nóng)格布局，同時(shí)結(jié)合元素的浮動(dòng)與定位可使網(wǎng)頁的結(jié)構(gòu)更加 多樣化. 通過學(xué)習(xí)本案例可以使初學(xué)者進(jìn)一步的鞏固盒子棋型和元素的浮動(dòng)與定位等相關(guān)知識點(diǎn)。4、案例展樂效果如圖4-1所示文檔翻B品阿扳權(quán)所有2000201竦ICPgW01421京公網(wǎng)安備UO1G0OO77O2S4-1“西式甜品網(wǎng)”效果展示、布局及定文基礎(chǔ)樣式效果分析(1) HTML結(jié)枸分析“西式甜品網(wǎng)”首頁面從上到下可以分為5個(gè)棋塊，如圖42所示文檔頭部4FUIS忡催!

2、一1絕1產(chǎn)品展示D!CWIW “l(fā)MKc2版權(quán)信息80OZ7024-2“西式甜品網(wǎng)”結(jié)構(gòu)分析(2) CSS禪式分析頁面中的各個(gè)棋塊居中顯示. 頁面的版心為980pxo 另外，頁面中的所有字體均為微軟雅黑. 字體大 小為16px,這些可以通過CSS公共樣式進(jìn)行定義新廷mdex04.html文件，在mdex04.html文件書寫HTML結(jié)構(gòu)代碼，具體代碼如下。1 VDOCTYPE htnil PUBLIC ,-/W3C/7DTD XHTML 1.0 Transitional-7ENH2 :TR/xhtmH/DTD，xhunlltKms”KnaLdKr、3 4 5 6 西式甜品網(wǎng)7 8

3、9 文檔10111213div class-navX/dix1415161718!-list begin19div class-UisCX/dh202122div class-contentx/dh2324!-footei begin25262728Vhtml在上述代碼中，通過給div添加不同的類名來定義頁面中的各個(gè)棋塊。3、寵義公共樣式為了淸除各瀏覽器的默認(rèn)樣式. 使得網(wǎng)頁在各瀏覽器中顯示的效果一致.在完成頁面布局后，首先要 做的詆是對CSS樣式進(jìn)行初始化并盧明一些通用的樣式 在 mdex04.html文件所在的文件夾新理css文件 夾用于存放樣式農(nóng)文件style04.csst 使用徴入式引

4、入樣式農(nóng)文件 然后定義頁面的基礎(chǔ)樣式，其體如下：/ffl-ja.瀏覽器的默認(rèn)樣式 審*margm:O; padding:0;bordei:0; background:none;八全局垃制*/body font-family:軟雅療”;fbntsize:16px;三、案例制作1、制作頭部棋塊(1) HTML鉉枸分析“頭郃” 棋塊拴體由一個(gè)大盒子div進(jìn)行控制 郃眾奈cimg和div分別用來搭琨左側(cè)logo和右側(cè) 文字容郃分。“頭郃” 棋塊的其體結(jié)構(gòu)如圖4-3所示文檔 圖43“頭郃”棋塊結(jié)構(gòu)圖(2) 禪式分析“頭郃”棋塊的寬為980px,通過設(shè)址外邊距厲性使其在頁面中居中顯示.并設(shè)相對定位。左側(cè)l

5、ogo 和右側(cè)文字容部分相對外層大盒子設(shè)堂絕對定位.最后還需設(shè)宜文字的相關(guān)樣式等(3) 播構(gòu)在 mdex04.html文件書寫“頭郃”棋塊的HTML結(jié)構(gòu)代碼具體如下：1 2 3 4 | t冊5 6 (4) 定九樣式在樣式農(nóng)文件style04.css中書寫CSS樣式代碼.用于控制“頭部”棋塊 其體如下：1.head2width:980px;3height :80px;4maigin:0 auto;5position: relative;67logo8position: absolute;9leftlOOpx：10top:15px;1112logm13position: absolute;14ri

6、ght: lOOpx;15top:34px;16color:#ff9c00;17cursor: pointer;18font-size: 18px:19上述代碼中. 第4行代碼用于設(shè)堂“頭郃”棋塊在頁面中居中顯示保存 mdex04.html與stvle04.css文件，刷新頁面.效果如圖4-4所示。文檔S4-4“頭郃”棋塊效果圖2、制及banner棋塊(1) HTML結(jié)槍分析“導(dǎo)航” 及 “banner” 棋塊分別由一個(gè)大盒子div進(jìn)行控制 導(dǎo)航容部分由vspan標(biāo)記定義.banner 圖由iing標(biāo)記定義“導(dǎo)航” 及“banner” 棋塊的其體結(jié)構(gòu)如圖4-5所示圖45“導(dǎo)航”及“bann”棋

7、塊結(jié)構(gòu)圖(2) 禪式分析“導(dǎo)航”棋塊的背奈色通欄顯示，因此需設(shè)堂衆(zhòng)外層div的寬度100%.部嵌套的div寬度為980px. 且在頁面中居中顯示 定義span標(biāo)記左浮動(dòng). 并定義相關(guān)的文字樣式。最后還鶴徴XL “bannei” 棋塊的 圖片在頁面中居中顯示C(3) IMMMe在mdex04.html文件書寫“導(dǎo)航”及“banner”棋塊的HTML結(jié)構(gòu)代碼其體如下：1!nav begin234Sr 頁 5 公司 簡介 6美貸 甜品 Vspan7/n 戶 W78聯(lián)系我們9101112文檔13 14 （4）定義樣戒在樣式農(nóng)文件style04.css中書寫CSS樣式代碼.用于控制“導(dǎo)航”及abaime

8、rv棋塊 具體如下：1.nav2width: 100%;3height :50px;4backgiound: #ff9c00;56.nav_in7width: 820px;8maigin:0 auto;9line-height: 50px;10color:#fff;11padding-left: 160px;1213.nav_in span14float: left;15padding:0 38px:16color:#9c5132;17cursor: pointer;1819.banner text-align: center;上述代碼中. 第8行和第19行代碼分別用于誅導(dǎo)航容郃分利bamie

9、r圖片在頁面中居中顯示。 保存 mdex04.html與style04.css文件.刷新頁面.效果如圖4-6所示。圖46“導(dǎo)航”及“bann”棋塊效果圖(1) HTML結(jié)柚分析文檔“產(chǎn)品分類” 棋塊主要由div標(biāo)記定義。“產(chǎn)品分類” 棋塊的具體結(jié)構(gòu)如圖47所示。圖47“產(chǎn)品分類”棋塊結(jié)構(gòu)圖(2)樣戒金析“產(chǎn)品分類” 棋塊的背余色通欄顯示，因此需設(shè)JX衆(zhòng)外層div的寬度100%, 部嵌套的div3&度為980px. 且在頁面中居中顯示 定義每一個(gè)分類棋塊的div標(biāo)記左浮動(dòng). 并定義相關(guān)的文字樣式(3)在 mdex04.html文件書寫“產(chǎn)品分類”棋塊的HTML結(jié)構(gòu)代碼其體如下：1!-list b

10、egin234div class-listrift 拉米蘇 5frtt,ffl6 芝士歪糕 7 馬卡九 Vdiv8 西式甜 A91011(4)寵艾樺式在樣式農(nóng)文件style04.css中書寫CSS樣式代碼，用于控制“產(chǎn)品分類”棋塊 其體如下：1list2width: 100%;3height:240px;4background: #e7bf8O;56list .list_m7width:940px;8height: 195px;9maigin:0 auto;10padding:45px 0 0 40px;1112list .list_m div13float: left;文檔width: 14

11、6px;height:55px;padding-top: 95px;margin-right: 42px;background: url(./images/listl png) no-repeat;text-align: center;color:#9c5132;list list_mist2background: ur 1(./unageszlist2 png) no-repeat;list list_m ,list3background: u【l(./images/list3.png) no-repeat;list list_m ,list4background: u【l(./images

12、/list4.png) no-repeat;list list_m listSbackground: u【l(./images/list5.png) no-repeat;上述代碼中. 第22-25行代碼用于分別設(shè)JX各個(gè)分類棋塊的背母圖片c 保存 mdex04.html與style04.css文件.刷新頁面.效果如圖4-8所示。圖4-8“產(chǎn)品分類” 棋塊效果圖制作嚴(yán)品艮示棋塊“產(chǎn)品展示”棋塊主要由div標(biāo)記嵌套mg標(biāo)記和span標(biāo)記定義 “產(chǎn)品展示”棋塊的具體結(jié)構(gòu)141516171819202122232425農(nóng)如圖4-9所示文檔Jgk M A1-f卑凍亙咬眛價(jià)裕：匯；一亠- - -vspa

13、n 價(jià)?。?三味巧克ZJ價(jià)悟：/7T-奶?由水杲亠vspanWg型 Tj瞬：30亓-vspa n- 圖49“產(chǎn)品展示”棋塊結(jié)構(gòu)圖（2）樣式分析“產(chǎn)品展示”棋塊的背余色通欄顯示，因此需設(shè)堂最外層的寬度100%,部嵌套的寬度為 980pxt 且在頁面中居中顯示 定義毎一個(gè)展示棋塊的標(biāo)記左浮動(dòng). 并定義相關(guān)的文字樣式（3）播槍在 mdex04.html文件書寫“產(chǎn)品展示”棋塊的HTML結(jié)構(gòu)代碼其體如下：1 2 3 4 5 6 St&5 N 次方7 馬卡龍 8 價(jià)格：30 3t9 10 11 12 果肉 果凍 13 雙色馬卡龍 14 價(jià)格：30 3t15 16171819202122232425262

14、728293031323334353637383940414243444546474849505152535412文檔芒果味 布丁馬卡九 價(jià)格：30 元cspann果凍荔枝 味 彩馬卡 t價(jià)格：30 元cspann果 味巧克力 西式甜點(diǎn) 價(jià)格：30 元 奶油水 果 拉米 蘇 價(jià)格：30 元 玫瑰花 31span class-”con_name憐布丁 價(jià)格：30 元 救気 奶油 -3rM價(jià)格：30 元（4）定義樣戒，在樣式農(nóng)文件style04.css中書寫CSS樣式代碼.用于控制“產(chǎn)品展示”棋塊。其體如下： contentwidth: 100%;height:570px:文檔backgiound

15、: #fSf5bc;conwidth:912px;height:530px;margin:0 auto;padding:40px 0 0 68px：con .con_typewidth: 180px;height:220px;border: lpx solid #ccc;float: left;backgiound: #fff:maigin:0 39px 30px 0:font-size: 14px:color:#9c5132;con .con_type spandisplay: block;padding:2px 0 0 16px;con .con_type span.con_namecol

16、or:#fd8187;con .con_type span bfont-weight: normal;color:#fd8187;con .con_type iingmaigin:12px 12px 3px 12px;width: 158px;height: 122px;上述代碼中，第23行代碼將span標(biāo)記轉(zhuǎn)換為塊元素用于換行顯示文字容4567891011121314151617181920212223242526272829303132333435保存 mdex04.html與stvle04.css文件，刷新頁面.效果如圖4-10所示文檔圖410 “產(chǎn)品展示”棋塊效果圖(1) HTML結(jié)枸

17、分析“信息” 棋塊由標(biāo)記定義。具體結(jié)構(gòu)如圖4-11所示c西式甜品網(wǎng)版權(quán)所有2000-2016京ICP備080014、網(wǎng)安備 110108007702S4-11 “信息”棋塊結(jié)構(gòu)圖(2) 樣式分析“信息” 棋塊的背母圖通欄顯示，因此需設(shè)Jtt衆(zhòng)外層vdiv的寬度100%, 且文字容居中顯示(3) 播槍在 mdex04.html文件書寫“信息”棋塊的HTML結(jié)構(gòu)代碼。具體如下：1 !-fboter begin2 西式甜品網(wǎng)所有 2000-2016 京 ICP 備 08001421 號 : 京公網(wǎng)安備 1101080077023 (4) 宅義禪式在樣式農(nóng)文件style04.css中書寫CSS樣式代碼.用于控制“借息”棋塊 其體如下：1