【正文】 /p div id=moreimg src=images/ width=50 height=15 //div /div /div ! end of content div id=templatmeo_sidebar div class=sidebar_section h2飲食誤區(qū)/h2 div class=sidebar_section_content ul class=categories_list lia href=不能和雞蛋一起吃的食物/a/li lia href=好的生活習(xí)慣不包括吃宵夜/a/li lia href=在劇烈運動后最好別喝可樂/a/li lia href=空腹吃香蕉損害健康/a/li lia href=兒童飲食的十大誤區(qū)/a/li lia href=放棄五谷雜糧，貧血威脅健康/a/li lia href=吃水果避開8誤區(qū)，別想吃就吃/a/li lia href=揭穿健康飲食的6大謊言/a/li lia href=腌菜致癌的4大誤解/a/li lia href=重新解讀“吃啥補啥”/a/li /ul div id=morea href=img src=images/ width=50 height=15 border=0 //a/div /div /div div class=sidebar_section h2食材營養(yǎng)/h2 div class=sidebar_section_content ul class=categories_list lia href=span class=STYLE4水果也有時間表 按時間吃更健康/span/a/li lia href=span class=STYLE4石榴全身都是寶 可以抗菌治流感/span/a/li lia href=span class=STYLE4鮮美紫菜湯 去脂減肥降血脂/span/a/li lia href=span class=STYLE4生吃海鮮易得病/span/a/li /ul div class=cleaner/div div id=morea href=img src=images/ width=50 height=15 border=0 //a/div /div /div /div ! end of sidebar div class=cleaner/div /div div id=templatemo_content_wrapper_bottom/div ! end of content_wrapper div id=templatemo_footer ul class=footer_menu lia href=首頁/a/li lia href= target=_parent食材營養(yǎng)/a/li lia href= target=_parent四季飲食/a/li lia href= target=_parent異域美食/a/li li class=last_menua href=烹飪食譜/a/li /ul Copyright 169。float: left。}.img_switch_text {width: 262px。).eq(i).fadeIn(39。 }) $(pic img).hover(function(){clearInterval(_h)}, function(){play()})。39。設(shè)計稿完成后，通過老師的指點修改后，我正式開始了網(wǎng)站的制作。給每一個圖片加上alt屬性，便于搜索引擎搜索到圖片文件。fontweight: bold。 width: 400px。 $(pic img).fadeOut(39。 //play()。 color: 000000。 height: 30px。}kuang2 { float: left。 paddingleft: 10px。 margin: 0。（如圖圖7）四、網(wǎng)站具體制作（一）DIV結(jié)構(gòu)圖圖6 子頁圖7 二級子頁templatemo_headersite_titletemplatemo_menutemplatemo_content_wrappertemplatemo_contenttemplatmeo_sidebartemplatemo_footer圖8 首頁DIV框架圖8為網(wǎng)站主頁的DIV結(jié)構(gòu)圖，每個框中文字是每個DIV框架的id，利用這個簡單的布局可以體現(xiàn)網(wǎng)站大體的設(shè)計布局。食材營養(yǎng)頁面包含了各種關(guān)于食材的健康知識，四季美食頁面包含了春、夏、秋等季節(jié)應(yīng)該了解的養(yǎng)生美食，異域美食頁面則包含了各種外國菜肴的做法，烹飪食譜頁面包含了烹飪技巧、菜譜、調(diào)味品等內(nèi)容，以上頁面均可隨意點擊任意標(biāo)題進入下一級頁面了解更詳細內(nèi)容。針對這個問題，我選擇制作了精致膳食養(yǎng)生網(wǎng)。網(wǎng)站采用了清新自然的綠色為主色調(diào)，顏色明快柔和，界面美觀簡潔。2. Adobe Photoshop CS2Adobe Photoshop CS2是電影、視頻和多媒體領(lǐng)域的專業(yè)人士, 使用 3D 和動畫的圖形和 Web 設(shè)計人員, 以及工程和科學(xué)領(lǐng)域的專業(yè)人士的理想選擇。（2）設(shè)計步驟五個導(dǎo)航并排安置，并除了首頁之外，都設(shè)置鼠標(biāo)懸停效果，如首頁的效果（圖3）及鼠標(biāo)懸停效果（圖4）。}more { float: right。 margintop: 0px。 margintop: 10px。 fontfamily: 黑體。 marginright: 140px。$(document).ready(function () { $(39。,39。 overflow:hidden。FLOAT: left。filter:alpha(opacity=75)。功夫不負有心人，我總算能大概了解，如何運用DIV+CSS布局一個完整的網(wǎng)站。在此，鄭重感謝老師以及同學(xué)們。).click(function(){ var i = $(this).attr(39。).eq(i).css(39。 marginright: auto。padding: 0px。opacity: 。/script/div/body/html