html西式甜品網(wǎng)制作(已修改)
2025-05-27 23:10 本頁面
【正文】 ., .. .. “西式甜品網(wǎng)”首頁面制作一、案例描述 考核知識點216。 盒子模型216。 元素的浮動與定位練習目標216。 掌握盒子的相關屬性。216。 掌握元素的浮動與定位。需求分析盒子模型這樣的布局方式代替了傳統(tǒng)的表格布局，同時結合元素的浮動與定位，可使網(wǎng)頁的結構更加多樣化，通過學習本案例可以使初學者進一步的鞏固盒子模型和元素的浮動與定位等相關知識點。案例展示效果如圖41所示。 圖41 “西式甜品網(wǎng)”效果展示二、布局及定義基礎樣式效果分析（1）HTML結構分析“西式甜品網(wǎng)”首頁面從上到下可以分為5個模塊，如圖42所示。圖42 “西式甜品網(wǎng)”結構分析（2）CSS樣式分析頁面中的各個模塊居中顯示，頁面的版心為980px。另外，頁面中的所有字體均為微軟雅黑，字體大小為16px，這些可以通過CSS公共樣式進行定義。頁面布局，具體代碼如下。 1 !DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN 2 3 html xmlns= xml:lang=en 4 head 5 meta equiv=ContentType content=text/html。charset=UTF8 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 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 24 !footer begin 25 div class=footer/div 26 !footer end 27 /body 28 /html在上述代碼中，通過給div添加不同的類名來定義頁面中的各個模塊。定義公共樣式為了清除各瀏覽器的默認樣式，使得網(wǎng)頁在各瀏覽器中顯示的效果一致，在完成頁面布局后，首先要做的就是對CSS樣式進行初始化并聲明一些通用的樣式。，使用鏈入式引入樣式表文件。然后定義頁面的基礎樣式，具體如下：/*重置瀏覽器的默認樣式*/*{margin:0。 padding:0。border:0。 background:none。}/*全局控制*/body{fontfamily:微軟雅黑。fontsize:16px。}三、案例制作制作頭部模塊（1）HTML結構分析“頭部”模塊整體由一個大盒子div進行控制。內(nèi)部嵌套img和div分別用來搭建左側logo和右側文字內(nèi)容部分?！邦^部”模塊的具體結構如圖43所示。圖43 “頭部”模塊結構圖（2）樣式分析“頭部”模塊的寬為980px，通過設置外邊距屬性使其在頁面中居中顯示，并設置相對定位。左側logo和右側文字內(nèi)容
公司管理相關推薦
鄂ICP備17016276號-1