html西式甜品網(wǎng)制作_第1頁
html西式甜品網(wǎng)制作_第2頁
html西式甜品網(wǎng)制作_第3頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、“西式甜品網(wǎng)”首頁面制作一、案例描述1、考核知識點? 盒子模型? 元素的浮動與定位2、練習(xí)目標(biāo)? 掌握盒子的相關(guān)屬性。? 掌握元素的浮動與定位。3、需求分析盒子模型這樣的布局方式代替了傳統(tǒng)的表格布局，同時結(jié)合元素的浮動與定位，可使網(wǎng)頁的結(jié)構(gòu)更加多樣化，通過學(xué)習(xí)本案例可以使初學(xué)者進(jìn)一步的鞏固盒子模型和元素的浮動與定位等相關(guā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 樣式分析頁面中的各個模塊居

2、中顯示，頁面的版心為 980px。另外，頁面中的所有字體均為微軟雅黑，字體大小為 16px，這些可以通過 CSS 公共樣式進(jìn)行定義。2、頁面布局新建 index04.html 文件，在index04.html 文件內(nèi)書寫HTML 結(jié)構(gòu)代碼，具體代碼如下。1 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN"23 /xhtml" xml:lang="en">4 <head>5 <meta http-equiv="Content-Type&q

3、uot; content="text/html;charset=UTF-8">6 <title>西式甜品網(wǎng) </title>7 </head>8 <body>9 <!-head begin->10 <div class="head"></div>11 <!-head end->12 <!-nav begin->13 <div class="nav"></div>14 <!-nav end-&g

4、t;15 <!-banner begin->16 <div class="banner"></div>17 <!-banner end->18 <!-list begin->19 <div class="list"></div>20 <!-list end->21 <!-content begin->22 <div class="content"></div>23 <!-content end-&g

5、t;24 <!-footer begin->25 <div class="footer"></div>26 <!-footer end->27 </body>28 </html>在上述代碼中，通過給div 添加不同的類名來定義頁面中的各個模塊。3、定義公共樣式為了清除各瀏覽器的默認(rèn)樣式，使得網(wǎng)頁在各瀏覽器中顯示的效果一致，在完成頁面布局后，首先要做的就是對 CSS 樣式進(jìn)行初始化并聲明一些通用的樣式。在 index04.html 文件所在的文件夾內(nèi)新建 css 文件夾用于存放樣式表文件 style04.

6、css，使用鏈入式引入樣式表文件。然后定義頁面的基礎(chǔ)樣式，具體如下：/* 重置瀏覽器的默認(rèn)樣式*/*margin:0; padding:0;border:0; background:none;/* 全局控制 */bodyfont-family:"微軟雅黑 "font-size:16px;三、案例制作1、制作頭部模塊（ 1） HTML結(jié)構(gòu)分析“頭部”模塊整體由一個大盒子<div> 進(jìn)行控制。內(nèi)部嵌套<img> 和 <div> 分別用來搭建左側(cè)logo 和右側(cè)文字內(nèi)容部分?！邦^部”模塊的具體結(jié)構(gòu)如圖4-3 所示。圖 4-3“頭部”模塊結(jié)構(gòu)圖（

7、 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 <!-head begin->2 <div class="head">3 <img class="logo" src="images/logo.jpg" />4<div class="logi

8、n"><span>登錄 </span> | <span>注冊 </span></div>5 </div>6 <!-head end->（ 4）定義樣式在樣式表文件style04.css 中書寫 CSS 樣式代碼，用于控制“頭部”模塊。具體如下：1 .head2 width:980px;3 height:80px;4 margin:0 auto;5 position: relative;6 7 .logo8 position: absolute;9 left:100px;10 top:15px;1

9、1 12 .login13 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”模塊分別由一個大盒子<div> 進(jìn)行控制。 導(dǎo)航內(nèi)容部分由<spa

10、n>標(biāo)記定義， banner圖由 <img>標(biāo)記定義?！皩?dǎo)航”及“banner”模塊的具體結(jié)構(gòu)如圖4-5 所示。圖 4-5“導(dǎo)航”及“banner”模塊結(jié)構(gòu)圖（ 2）樣式分析“導(dǎo)航”模塊的背景色通欄顯示，因此需設(shè)置最外層<div> 的寬度100% ，內(nèi)部嵌套的<div> 寬度為980px，且在頁面中居中顯示。定義<span>標(biāo)記左浮動，并定義相關(guān)的文字樣式。最后還需設(shè)置“banner”模塊的圖片在頁面中居中顯示。（ 3）搭建結(jié)構(gòu)在 index04.html 文件內(nèi)書寫“導(dǎo)航”及“ banner”模塊的 HTML 結(jié)構(gòu)代碼。具體如下：1 &l

11、t;!-nav begin->2 <div class="nav">3 <div class="nav_in">4<span> 首頁 </span>5<span> 公司簡介 </span>6<span> 美食甜品 </span>7<span> 用戶留言 </span>8<span class="last" >聯(lián)系我們 </span>9 </div>10 </div>

12、;11 <!-nav end->12 <!-banner begin->13 <div class="banner"><img src="images/banner.jpg" /></div>14 <!-banner end->（ 4）定義樣式在樣式表文件style04.css 中書寫 CSS 樣式代碼，用于控制“導(dǎo)航”及“banner”模塊。具體如下：1 .nav2 width:100%;3 height:50px;4 background: #ff9c00;5 6 .nav_in

13、7 width:820px;8 margin:0 auto;9 line-height: 50px;10 color:#fff;11 padding-left: 160px;12 13 .nav_in span14 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

14、-6 所示。圖 4-6“導(dǎo)航”及“banner”模塊效果圖3、制作產(chǎn)品分類模塊（ 1） HTML結(jié)構(gòu)分析“產(chǎn)品分類”模塊主要由<div> 標(biāo)記定義?！爱a(chǎn)品分類”模塊的具體結(jié)構(gòu)如圖圖 4-7“產(chǎn)品分類”模塊結(jié)構(gòu)圖4-7 所示。（ 2）樣式分析“產(chǎn)品分類”模塊的背景色通欄顯示，因此需設(shè)置最外層<div> 的寬度 100%，內(nèi)部嵌套的<div> 寬度為 980px，且在頁面中居中顯示。定義每一個分類模塊的<div> 標(biāo)記左浮動，并定義相關(guān)的文字樣式。（ 3）搭建結(jié)構(gòu)在 index04.html 文件內(nèi)書寫“產(chǎn)品分類”模塊的HTML 結(jié)構(gòu)代碼。具體如下：

15、1 <!-list begin->2 <div class="list">3 <div class="list_in">4<div class="list1">提拉米蘇 </div>5<div class="list2">甜甜圈 </div>6<div class="list3">芝士蛋糕 </div>7<div class="list4">馬卡龍 <

16、/div>8<div class="list5">西式甜點 </div>9 </div>10 </div>11 <!-list end->（ 4）定義樣式在樣式表文件style04.css 中書寫 CSS 樣式代碼，用于控制“產(chǎn)品分類”模塊。具體如下：1 .list2 width:100%;3 height:240px;4 background: #e7bf80;5 6 .list .list_in7 width:940px;8 height:195px;9 margin:0 auto;10 padding:

17、45px 0 0 40px;11 12 .list .list_in div13 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 .lis

18、t_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、制作

19、產(chǎn)品展示模塊（ 1） HTML 結(jié)構(gòu)分析“產(chǎn)品展示”模塊主要由 <div> 標(biāo)記嵌套 <img> 標(biāo)記和 <span>標(biāo)記定義?！爱a(chǎn)品展示”模塊的具體結(jié)構(gòu)如圖 4-9 所示。圖 4-9“產(chǎn)品展示”模塊結(jié)構(gòu)圖（ 2）樣式分析“產(chǎn)品展示”模塊的背景色通欄顯示，因此需設(shè)置最外層<div> 的寬度 100%，內(nèi)部嵌套的<div> 寬度為 980px，且在頁面中居中顯示。定義每一個展示模塊的<div> 標(biāo)記左浮動，并定義相關(guān)的文字樣式。（ 3）搭建結(jié)構(gòu)在 index04.html 文件內(nèi)書寫“產(chǎn)品展示”模塊的HTML 結(jié)構(gòu)代碼。具體

20、如下：1 <!-content begin->2 <div class="content">3 <div class="con">4<div class="con_type">5<img src="images/con1.jpg" />6<span> 愛的 N 次方 </span>7<span class="con_name">馬卡龍 </span>8<span> 價格： &l

21、t;b>30 元</b></span>9</div>10<div class="con_type">11<img src="images/con2.jpg" />12<span>果肉果凍 </span>13<span class="con_name">雙色馬卡龍 </span>14<span>價格： <b>30 元</b></span>15</div>16<

22、div class="con_type">17<img src="images/con3.jpg" />18<span>芒果味 </span>19<span class="con_name">布丁馬卡龍 </span>20<span>價格： <b>30 元</b></span>21</div>22<div class="con_type">23<img src="

23、images/con4.jpg" />24<span>果凍荔枝味 </span>25<span class="con_name">多彩馬卡龍 </span>26<span>價格： <b>30 元</b></span>27</div>28<div class="con_type">29<img src="images/con5.jpg" />30<span>果味巧克力 </

24、span>31<span class="con_name">西式甜點 </span>32<span>價格： <b>30 元</b></span>33</div>34<div class="con_type">35<img src="images/con6.jpg" />36<span>奶油水果 </span>37<span class="con_name">提拉米蘇

25、</span>38<span>價格： <b>30 元</b></span>39</div>40<div class="con_type">41<img src="images/con7.jpg" />42<span>玫瑰花型 </span>43<span class="con_name">布丁 </span>44<span>價格： <b>30 元</b>&l

26、t;/span>45</div>46<div class="con_type">47<img src="images/con8.jpg" />48<span>燕麥奶油 </span>49<span class="con_name">芝士蛋糕 </span>50<span>價格： <b>30 元</b></span>51</div>52 </div>53 </div>

27、;54 <!-content end->（ 4）定義樣式在樣式表文件style04.css 中書寫 CSS 樣式代碼，用于控制“產(chǎn)品展示”模塊。具體如下：1 .content2 width:100%;3 height:570px;4 background: #f8f5bc;5 6 .con7 width:912px;8 height:530px;9 margin:0 auto;10 padding:40px 0 0 68px;11 12 .con .con_type13 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 span23 display: block;24 padding:2px

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論