html西式甜品網(wǎng)制作-全文預(yù)覽
【正文】 的HTML結(jié)構(gòu)代碼。nbsp。 4 width:100%。 8 lineheight: 120px。，刷新頁面，效果如圖412所示。用一些事情，總會看清一些人。4. 歲月是無情的，假如你丟給它的是一片空白，它還給你的也是一片空白。圖412。你必須努力，當(dāng)有一天驀然回首時，你的回憶里才會多一些色彩斑斕，少一些蒼白無力。既糾結(jié)了自己，又打擾了別人。2. 若不是心寬似海，哪有人生風(fēng)平浪靜。 10 fontsize: 18px。 6 background: url(../images/) repeatx。具體如下： 1 .footer{ 2 position: relative。nbsp。具體結(jié)構(gòu)如圖411所示。 34 height:122px。} 27 .con .con_type span b{ 28 fontweight: normal。 20 color:9c5132。 16 float: left。 10 padding:40px 0 0 68px。 4 background: f8f5bc。（3）搭建結(jié)構(gòu)“產(chǎn)品展示”模塊的HTML結(jié)構(gòu)代碼。圖48 “產(chǎn)品分類”模塊效果圖制作產(chǎn)品展示模塊（1）HTML結(jié)構(gòu)分析“產(chǎn)品展示”模塊主要由div標(biāo)記嵌套img標(biāo)記和span標(biāo)記定義。} 24 .list .list_in .list4{background: url(../images/) norepeat。 19 textalign: center。 15 height:55px。 9 margin:0 auto。 3 height:240px。定義每一個分類模塊的div標(biāo)記左浮動，并定義相關(guān)的文字樣式。，刷新頁面，效果如圖46所示。 16 color:9c5132。 10 color:fff。 4 background: ff9c00。（3）搭建結(jié)構(gòu)“導(dǎo)航”及“banner”模塊的HTML結(jié)構(gòu)代碼。“導(dǎo)航”及“banner”模塊的具體結(jié)構(gòu)如圖45所示。 19 }上述代碼中，第4行代碼用于設(shè)置“頭部”模塊在頁面中居中顯示。 15 top:34px。 9 left:100px。 3 height:80px。左側(cè)logo和右側(cè)文字內(nèi)容部分相對外層大盒子設(shè)置絕對定位，最后還需設(shè)置文字的相關(guān)樣式等。}三、案例制作制作頭部模塊（1）HTML結(jié)構(gòu)分析“頭部”模塊整體由一個大盒子div進(jìn)行控制。border:0。定義公共樣式為了清除各瀏覽器的默認(rèn)樣式，使得網(wǎng)頁在各瀏覽器中顯示的效果一致，在完成頁面布局后，首先要做的就是對CSS樣式進(jìn)行初始化并聲明一些通用的樣式。另外，頁面中的所有字體均為微軟雅黑，字體大小為16px，這些可以通過CSS公共樣式進(jìn)行定義。需求分析盒子模型這樣的布局方式代替了傳統(tǒng)的表格布局，同時結(jié)合元素的浮動與定位，可使網(wǎng)頁的結(jié)構(gòu)更加多樣化，通過學(xué)習(xí)本案例可以使初學(xué)者進(jìn)一步的鞏固盒子模型和元素的浮動與定位等相關(guān)知識點(diǎn)。 元素的浮動與定位練習(xí)目標(biāo)216。 盒子模型216。 掌握元素的浮動與定位。圖42 “西式甜品網(wǎng)”結(jié)構(gòu)分析（2）CSS樣式分析頁面中的各個模塊居中顯示，頁面的版心為980px。charset=UTF8 6 title西式甜品網(wǎng)/title 7 /head 8 body 9 !head begin 10 div class=head/div 11 !head end 12 !
公司管理相關(guān)推薦
鄂ICP備17016276號-1