【文章內(nèi)容簡介】 本網(wǎng)站的首頁由一張簡單的動畫圖組成，給人一種舒服的感覺。頁頭上幾個大字，讓人對本網(wǎng)站的 功能一目了然。 網(wǎng)站的導(dǎo)航包含有八個選項分別是首、秀色可餐、吃出美麗、家常菜譜、休閑食品等。 標(biāo)題新穎，主題突出。 黃岡職業(yè)技術(shù)學(xué)院 16 效果圖為： 頁頭及導(dǎo)航的設(shè)計代碼為： div id=top/div div id=daohang ul lia href= 首頁 /a/li lia href=秀色可餐 /a/li lia href=吃出美麗 /a/li lia href=家常菜譜 /a/li lia href=休閑食品 /a/li li a href=我愛我家 /a/li lia href=甜品派對 /a/li lia href=美食書坊 /a/li /ul /div 網(wǎng)站正文的設(shè) 計 網(wǎng)站正文由兩大部分組成及上部和下部。其中上部又由三部分組成（左、中、右），下部由一組流動的圖片組成。 網(wǎng)站的上部分 網(wǎng)站的上部分由左、中、右三部分組成。其中左邊 用了的布局是在一個大的DIV 盒子里面裝著四個小的盒子，在小的盒子中分別放了圖片和文字。此外中間和右邊同樣是在一個大的盒子中安放小的 DIV，不同的是在 在中間和右邊的盒子中還安放了 文字和圖片。 黃岡職業(yè)技術(shù)學(xué)院 17 其效果圖展示為： 正文的上部分代碼為： div id=main div id=mainleft div id=tuijiespan class=a秀色可餐 /span/div div id=jingdiana href=img src=images/fengjing/ width=133 height=159 border=0 /豆瓣醬蒸翅根 /a p雞翅根洗凈，泡在清水里十分鐘之后倒掉水，雞翅根瀝干水分，用刀在正反兩面各劃兩道；放入蔥姜絲、料酒、一大勺豆瓣醬，攪拌均勻，腌制一個小時。 /p 黃岡職業(yè)技術(shù)學(xué)院 18 p 將香菇洗凈切片，碼在碗底，上面放入腌制好的翅根，大火蒸半個小時即可。 /p /div div id=jingdiana href=img src=images/fengjing/ width=130 height=108 border=0 //astronga href=小蝦燉蘿卜 /a/strong p新鮮的小蝦揀去雜物備用； /p p 綠蘿卜切條，焯水備用； /pp 起油鍋，爆香蔥姜； /p p 下入蘿卜條大火翻炒至軟； /p p 下入小蝦，加入沒過的熱水，大火煮開； /p p 調(diào)入適量的鹽和味精，起鍋前撒上蔥花香菜即可 /p /p /div div id=jingdiana href=img src=images/fengjing/ width=130 height=108 border=0 /手撕包菜 /a p包菜用手撕開成片狀，洗凈之后瀝干水分，蒜切片，紅辣椒切小斷兒，姜切絲； 五花肉切片，用黑胡椒粉腌制 5 分鐘。 炒鍋內(nèi)放少許油，下入五花肉煸出油，肉變得透明； 放入蒜片、紅辣椒斷兒和姜絲炒香； 放入包菜翻炒； 最后放入鹽、料酒、蒸魚豉油、蠔油，翻炒均勻即可。 /p /div /div div id=maincenter div id=dongtai img 黃岡職業(yè)技術(shù)學(xué)院 19 src=images/bg/ width=17 height=13 / span class=a吃出美麗 /span/div div id=zixun ul li img src=images/bg/ width=14 height=13 / 低卡豆腐料理 讓你瘦在起跑線上 20201220 /li li img src=images/bg/ width=14 height=13 / 9 大低卡減肥食品 吃得健康更享瘦 20201219/li li img src=images/bg/ width=14 height=13 / 春季減肥很簡單 8 大飲食原則包你瘦 20201210 /li li img src=images/bg/ width=14 height=13 / 艷 陽 春 吃 出 蘋 果 肌 將 亮 色 衣 美 美 穿 20201208/li li img src=images/bg/ width=14 height=13 / 四個妙招教你如何品鑒正宗酸梅湯 2020 年 7 月 30日 /li li img src=images/bg/ width=14 height=13 / 春季飲食減肥 請牢記 3 宜 5 忌 2020730/li li img src=images/bg/ width=14 height=13 / 四種抗衰老食品 學(xué)趙雅芝做不老美女 20201203 /li li img src=images/bg/ width=14 height=13 / 久對電腦易上火 電腦族六個祛火保健方 span id=pub_date20201202/span /li liimg src=images/bg/ width=14 height=13 / 形 式 誘 惑 實 則 樸 素 ！ 超 人 氣 4 家 素 食 館20201127/li li img src=images/bg/ width=14 height=13 / 素食塑造美女 你要變身嗎 20201126 /li liimg src=images/bg/ width=14 height=13 / 春季養(yǎng)肝正當(dāng)時 這樣來食補 202028/li /ul /div /div div id=mainright div id=hgimg src=images/fengjing/ 黃岡職業(yè)技術(shù)學(xué)院 20 width=249 height=229 border=0 //div div id=jianjieul li img src=images/bg/ width=14 height=13 / 簡單廚房杯仔蛋糕 輕松俘獲你的心 /li li img src=images/bg/ width=14 height=13 / 腦力激蕩的 6 則食品廣告 /li li img src=images/bg/ width=14 height=13 / 卡哇伊餅干 讓你怎么舍得吃？ /li li img src=images/bg/ width=14 height=13 / 巧妙設(shè)計人臉餐盤 隨時從老頭變美女 /li liimg src=images/bg/ width=14 height=13 / 醉人浪漫 意大利奢華咖啡月歷 /li liimg src=images/bg/ width=14 height=13 / 好吃又好玩 瓜果蔬菜的 SEX 大片 /li liimg src=images/bg/ width=14 height=13 / 創(chuàng)意無限 食物的美好生活 /li liimg src=images/bg/ width=14 height=13 / 精致日式糕點走上你的餐桌 /li liimg src=images/bg/ width=14 height=13 / 超可愛洗碗棉 讓你愛上做家事 /li liimg src=images/bg/ width=14 height=13 / 精美咖啡包裝 展示另類創(chuàng)意 /li li img src=images/bg/ width=14 height=13 / 比新娘還有看頭！婚禮蛋糕也瘋狂 /li liimg src=images/bg/ width=14 height=13 / 老爸的溫馨禮物薄煎餅 /li /ul/p /div /div /div 2 網(wǎng)站 正文 的下部分 網(wǎng)站的下部分是一組流動的圖片 。此圖片組由十一張圖片組成，在一個頁面里循環(huán)的流動。 黃岡職業(yè)技術(shù)學(xué)院 21 下部分效果圖部分展示： 此部分的代碼是： div id=jingmeitupian div id=zhaopian/div div id=demostyle=OVERFLOW: hidden。 WIDTH: 100%。 COLOR: ffffff。 HEIGHT:150px table width=100% border=0 align=left cellpadding=0 cellspacing=0 tr td id=demo1TABLE cellSpacing=5 cellPadding=0 border=0 TBODY TR TD align=middleA href= target=_blankimg height=150 src=images/fengjing/ width=140 border=0 //ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= 黃岡職業(yè)技術(shù)學(xué)院 22 target=_blankIMG height=150 src=images/fengjing/ width=140 border=0/ABR /TD TD align=middleA href= target=_blankimg height=150 src=images/fengjing/ width=140 border=0 //ABR /TD TD align=middleA href= target=_blankIMG height=150 src=images/fengjing/ width=140