XXIII5網(wǎng)站開發(fā)過程及實現(xiàn)5.1首頁設(shè)計首頁是一個網(wǎng)站的外觀，作為公司的形象，特別強調(diào)設(shè)計和規(guī)劃。它是用戶首先看到的界面，其質(zhì)量直接影響到站點的訪問程度。因此，我從以下幾個方面對主要界面進行設(shè)計。（1）在色彩搭配上，我用一個比較清新的顏色作基調(diào)，用相關(guān)的鮮艷色彩，給用戶一個干凈靈動的感覺、。（2）在字體選擇上，適當(dāng)?shù)拇笮。M量使用普通字體，適當(dāng)配用其他字體。（3）在內(nèi)容上，界面的主要內(nèi)容充實而不繁雜，既體現(xiàn)了網(wǎng)站的特色，又滿足了用戶的需求。在主頁的基礎(chǔ)上我把主頁中加入了可編輯區(qū)域，并保存為模板。后頁是以模板為基礎(chǔ)的。使用模板功能有助于用戶設(shè)計風(fēng)格一致的頁面。通過模板來創(chuàng)建和更新頁面，不僅大大提高了網(wǎng)站的工作效率和維護也將變得更加輕松。云南財經(jīng)大學(xué)首頁如下圖5-1：圖5-1界面首頁5.1.1首頁頂部設(shè)計在登錄框的制作中，我設(shè)計的比較簡單，是由郵箱框、密碼框和登錄按鈕所構(gòu)成的，如圖5-2：圖5-2頂部設(shè)計制作這個登錄框的代碼：<divclass="parent"> <divclass="English"> <ul> <li><inputtype="button"value="登錄"style="width:40px;"/></li><li>密碼<inputtype="search"style="width:50px;"/></li><li>郵箱<inputtype="search"style="width:50px;"/>@</li></ul>其中的CSS代碼：.parent{width:1002px;height:867px;background-image:url(images/background.jpg);margin:0auto}.English{width:900px;margin-left:auto;margin-right:auto;}.Englishli{float:right;margin:5px;padding-left:10px;}就這樣Banner就可以制作出來了。5.1.2.導(dǎo)航欄和LOGO設(shè)計導(dǎo)航欄的制作也相對比較簡單，我就是將我需要介紹的內(nèi)容放在導(dǎo)航條里，然后用了一個黑的背景色，白的文字，顏色分明，使導(dǎo)航條顯而易見，如下圖5-3：圖5-3導(dǎo)航欄設(shè)計導(dǎo)航欄的代碼：<!--導(dǎo)航欄--><divclass="bg"><divclass="logo"></div><!--logo部分--><ulclass="navBar"><li><ahref="#"style="color:#f39">首頁</a></li><li><ahref="cd.html">宣宣景點</a></li><li><ahref="cd.html">私人專線</a></li><li><ahref="cd.html">旅游路線</a></li><li><ahref="cd.html">世外桃源</a></li></ul><!--導(dǎo)航-->CSS的代碼：.logo{background-image:url(images/logo.jpg);width:900px;height:80px;}.logoli{list-style-type:none;float:left;padding-right:10px;}.logoul{float:right;margin-top:5px;width:150px}.logoa{color:#97d1ff;text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;width:60px;height:20px;display:block}.logoa:hover{color:#FFF;text-decoration:underline}.navBarli{list-style-type:none;float:left;width:97px;text-align:center;padding-right:35px}.navBar{width:900px;height:37px;background-color:#000;margin:0auto;}.navBara{color:#FFF;text-decoration:none;font-size:14px;font-weight:bold;line-height:37px;display:block}.navBara:hover{background-image:url(images/choose.jpg);width:97px;height:37px;color:#20acff}5.1.3.首頁主要內(nèi)容設(shè)計中間內(nèi)容我插入一張旅游的風(fēng)景圖，突出主題，因為只插入一張風(fēng)景圖片，所以代碼比較簡單，如圖5-4：圖5-4風(fēng)景圖導(dǎo)航欄的代碼：<!--導(dǎo)航欄--><divclass="banner"><imgsrc="images/banner.jpg"></div><!--banner-->CSS的代碼：.bannerimg{width:900px;height:238px;margin-top:10px;}中間的內(nèi)容，主要是圖片加文字介紹了一副海邊的景點，加入了一個“閱讀全文”的按鈕，可以鏈接到詳細介紹該內(nèi)容的另一個網(wǎng)頁，如圖5-5：圖5-5閱讀全文按鈕中間的代碼<divclass="content"> <divclass="left"> <divclass="leftTop"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>最熱風(fēng)景</h3><divclass="top"> <divclass="top01"><imgsrc="images/pic1.png"/></div><divclass="top02"style="position:relative"> <h1>只要你有有想去的地方，這就是你的天地。</h1><pstyle="text-indent:24px">水天相接的地方重合成了一條線，像是尊敬我們這些遠道而來的</p><p>客人，形成了一個接一個的浪頭水是藍的，蕩起了白色的泡沫</p><pstyle="background-image:url(images/choose02.gif);background-color:transparent;width:61px;height:22px;line-height:22px;text-align:center;position:absolute;left:315px;top:70px;"><ahref="cd閱讀全文.html"style="color:#FFF;text-decoration:none;">閱讀全文</a></p></div></div></div><!--最新動態(tài)-->CSS的代碼：.content{background-image:url(images/content.jpg);height:407px;width:878px;margin-top:10px;padding-top:15px;padding-left:22px}.left{width:590px;height:390px;float:left;margin-right:10px}.right{width:260px;height:390px;float:left;}.leftTop{margin-top:10px;}.leftToph3{margin-left:8px;width:578px;height:20px;border-bottom:solid1px#2c89c6;font-size:14px;color:#FFF}.top{height:135px;width:580px}.top01,.top02{float:left}.top01{margin-top:8px;margin-left:10px}.top02{margin-top:15px;margin-left:5px}.top02h1{color:#FFF;font-size:14px}.top02p{color:#FFF;margin-top:15px;line-height:10px}中下部分也是以圖片加文字突出兩個主題——雪景、橋景，文字可供游客選擇想要什么樣的雪景和什么樣的橋景，在文字前，加了一個四葉草的小圖標(biāo)，也突出了旅游的主題，如圖5-6：圖5-6旅游主題效果圖中間的代碼<divclass="leftBottom"> <divclass="leftList"style="position:relative"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>雪景</h3><imgsrc="images/pic2.jpg"style="margin-top:8px;margin-left:12px"/><divclass="text01"style="padding-left:30px;margin-top:5px"><ul><li><ahref="#">只見天地之間白茫茫的一片,雪花紛...</a></li><li><ahref="#">那雪花潔白如玉,它是天宮派下的小天將,還是...</a></li><li><ahref="#">大雪紛紛揚揚落下,那一片雪花在空中舞...</a></li><li><ahref="#">雪讓人的感覺只有一個字——冷.大地一片銀...</a></li></ul></div></div><!--雪景--><divclass="rightList"style="position:relative"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>橋景<style="text-decoration:none"><imgsrc="images/more.gif"style="position:absolute;left:235px;top:10px;border:0"/></a></h3><imgsrc="images/pic3.jpg"style="margin-top:8px;margin-left:12px;width:257px;height:87px"/><divclass="text01"style="padding-left:30px;margin-top:5px"><ul><li><ahref="#">橋身直跨大河兩岸，像一條飛虹</a></li><li><ahref="#">那是一座擁有高齡的石拱橋，橫...</a></li><li><ahref="#">小橋橫跨小河兩岸，橋上的石板還略</a></li><li><ahref="#">大橋給我有趣的童年染上了瑰麗的色彩。</a></li></ul></div></div><!--橋景--></div></div>CSS的代碼：.leftBottom{height:210px;width:590px;margin-top:17px}.leftList,.rightList{float:left}.leftListh3{margin-left:8px;width:300px;height:20px;border-bottom:solid1px#2c89c6;font-size:14px;color:#FFF}.text01a{color:#FFF;text-decoration:none;line-height:18px}.text01a:hover{text-decoration:underline}.text01li{color:#FFF}.text01{width:260px;height:75px}而其中首頁的一個特效是圖片切換，在這里面加入了許多風(fēng)景照的切換，是網(wǎng)頁增加了一點生動的信息，如圖5-7： 圖5-7圖片切換效果切換代碼：<divclass="right"> <h3style="position:relative"><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>學(xué)校好風(fēng)光<ahref="更多圖片/index.html"style="text-decoration:none"><imgsrc="images/more.gif"style="position:absolute;left:203px;top:10px;border:0"/></a></h3><divclass="mask"> <ulclass="rightPic"><li><ahref="bbjxl.html"><imgsrc="images/pic-right1.jpg"/></a></li><li><ahref="hhyyg.html"><imgsrc="images/pic-right2.jpg"/></a></li><li><ahref="bqtyg.html"><imgsrc="images/pic-right3.jpg"/></a></li><li><ahref="mlxyj.html"><imgsrc="images/pic-right4.jpg"/></a></li><li><ahref="bbfkt.html"><imgsrc="images/index-lp2-1.jpg"/></a></li><li><ahref="bbyfl.html"><imgsrc="images/index-lp2-2.jpg"/></a></li><li><ahref="zhfkt.html"><imgsrc="images/index-lp2-3.jpg"/></a></li><li><ahref="zhtug.html"><imgsrc="images/index-lp2-4.jpg"/></a></li> </ul></div></div></div><!--宣行好風(fēng)光-->CSS代碼是：.rightList{width:282px;overflow:hidden}.rightListh3{margin-left:8px;width:270px;height:20px;border-bottom:solid1px#2c89c6;font-size:14px;color:#FFF}.right{margin-top:10px}.righth3{width:246px;height:20px;border-bottom:solid1px#2c89c6;font-size:14px;color:#FFF}.mask{margin-top:5px;margin-left:2px;width:248px;height:350px;overflow:hidden;position:relative}.rightPic{width:243px;height:688px;position:absolute;top:0;left:0}.rightPicli{list-style-type:none;margin-bottom:3px}.rightPicimg{border:0none}5.1.4.首頁底部設(shè)計頁腳是旅游的一些信息介紹，如圖5-8： 圖5-8底部設(shè)計頁腳的代碼<divclass="footer"> <ul> <li><ahref="#">地址</a></li> <li><ahref="#">網(wǎng)站信息</a></li> <li><ahref="#">意見建議</a></li> <li><ahref="#">版權(quán)信息</a></li> <listyle="border:0;padding-right:0"><ahref="#">郵編</a></li></ul><br/><divclass="last">Copyright?2015YunnanXunxingWordAllRightsReserved.號</div></div>CSS的代碼：.footer{background-image:url(images/bottom.jpg);width:898px;height:48px;margin-top:10px;padding-top:12px;}.footera{text-decoration:none;color:#97d1ff;}.footerli{list-style-type:none;float:left;padding:020px;border-right:solid1px#97d1ff}.footera:hover{text-decoration:underline}.last{width:898px;text-align:center;padding-top:8px;color:#97d1ff}.footerul{margin-left:230px;}5.2其余頁面的設(shè)計5.2.1.宣宣景點頁面設(shè)計宣宣景點我就介紹了一下宣威簡介、歷史沿革和宣威文化，在這個網(wǎng)頁大家也能看出，我主要就是介紹我的家鄉(xiāng)（宣威），可能加入過多的文字信息，會讓人游客有點視覺疲勞，但如果能真正了解宣威的這些內(nèi)容，你就會發(fā)現(xiàn)宣威是一個真正值得你來旅游的好地方，如圖5-9:圖5-9宣宣景點設(shè)計宣威簡介的代碼如下</div><!--左邊欄--><divclass="rightBar"><h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>宣威簡介</h3><imgsrc="images/pic.jpg"style="margin-top:10px;margin-left:114px"/><p>宣威市地處云南省東北部。東與貴州省盤縣相鄰，南與曲靖市毗鄰，西隔牛欄江與會澤縣相望，北與貴州威寧縣接壤，距省會昆明市260公里。全市面積6062平方公里。民族有漢、彝、回、苗。轄榕城、來賓、倘塘、格宜、田壩、羊嘗板橋7鎮(zhèn)及17鄉(xiāng)。宣威歷史悠久。</p><p>元至元十三年（1276年）設(shè)沾益州，屬云南行中書省曲靖路。清雍正五年（1727年）設(shè)宣威州，隸曲靖府。民國初改設(shè)宣威縣，1954年改名榕峰縣，1958年復(fù)設(shè)宣威縣，現(xiàn)隸屬曲靖地區(qū)。經(jīng)國務(wù)院批準(zhǔn)撤縣設(shè)市，設(shè)宣威市。</p><p>

宣威地處滇江高原北部，地勢東高，西、北低。主要山峰有東山梁子、白革皮，梁光山梁子、大水塘梁子、石盆梁子等；最高峰馬鞍洞梁子，海拔2868米，最低處臘龍岔河，海拔920米。主要河流有可渡河、格香河、小江。氣候特點，冬溫夏涼，年溫差小，日溫差大。年均降水量986毫米，年均溫13.3℃，一月均溫5℃，七月均溫19.4℃。屬暖溫帶高原季風(fēng)氣候。全市工業(yè)主要有農(nóng)機修造、煤炭、電力、采礦、化工、冶金、化肥、建材、食品加工、烤煙、糧油加工、釀酒、制藥等。</p></div></div>CSS的代碼如下*{padding:0;margin:0;font-size:12px;}li{list-style:none;}body{background-color:#fdb4bb;}.parent{width:1002px;height:867px;background-image:url(images/background.jpg);margin:0auto;}.bg{margin:0auto;width:900px;overflow:hidden}.English{width:900px;margin-left:auto;margin-right:auto;}.Englishli{float:right;margin:5px;padding-left:10px;}.logo{background-image:url(images/logo.jpg);width:900px;height:80px;}.logoli{list-style-type:none;float:left;padding:05px;}.logoul{float:right;margin-top:5px;width:150px}.logo a{color:#97d1ff;text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;width:60px;height:20px;display:block;}.logoa:hover{color:#FFF;text-decoration:underline}.navBar li{list-style-type:none;float:left;width:97px;text-align:center;padding-right:35px;}.navBar{width:900px;height:37px;background-color:#000;margin:0auto;}.navBar a{color:#FFF; text-decoration:none;font-size:14px;font-weight:bold;line-height:37px;display:block;}.navBar>a:hover{background-image:url(images/choose.jpg);width:97px;height:37px;color:#20acff;}.bannerimg{width:900px;height:185px;}.content{height:505px;width:900px;background-color:#FFF;}.leftBar,.rightBar{float:left}.leftBar{background-image:url(images/leftbar.jpg);width:158px;height:485px;padding-top:20px;position:relative;}.left{padding-left:20px;}.left li{list-style-type:none;width:114px;height:33px;line-height:33px;background-image:url(images/line.jpg);background-position:bottom;background-repeat:no-repeat;margin-bottom:5px}.leftBarh1{font-size:14px;margin-left:22px}.leftBarh3{font-size:10px;font-family:Arial;color:#a2a2a3;margin-left:22px}.left a{text-decoration:none;color:#000;font-size:14px;font-weight:bold;padding-left:3px;}.lefta:hover{color:#F39;}.rightBar{padding-right:40px}.rightBar h3{margin-left:8px;width:692px;height:25px;border-bottom:solid1px#dedede;font-size:14px;color:#000;margin-top:33px;}.text{float:left}.date{float:right;}.text{padding-left:40px;margin-top:25px;width:346px}.date{margin-top:25px;width:84px;padding-right:10px}.text li{list-style-type:none;line-height:30px;width:340px;background-image:url(images/li.gif);background-repeat:no-repeat;background-position:left}.texta{padding-left:10px;text-align:left;}.dateli{list-style-type:none;line-height:30px}.texta{color:#747373;text-decoration:none;font-size:11px;margin-bottom:-8px;}.texta:hover{color:#000;text-decoration:underline}.footer{background-image:url(images/bottom.jpg);width:900px;height:48px;padding-top:12px;}.footera{text-decoration:none;color:#97d1ff;}.footerli{list-style-type:none;float:left;padding:020px;border-right:solid1px#97d1ff}.footera:hover{text-decoration:underline}.last{width:898px;text-align:center;padding-top:8px;color:#97d1ff}.footerul{margin-left:230px;}.rightBar{position:relative}5.2.2.私人專線頁面設(shè)計私人專線我就介紹了一下宣威景點、大理景點、麗江景點和廈門景點，點到每一個景點都會有相應(yīng)的文字介紹，主要是對在這里的各個地方的介紹，因為在這幾個景點里都會有好多小景點，而每個風(fēng)景的介紹會在二級界面里一一介紹，如圖5-10：圖5-10私人專線設(shè)計宣威景點的代碼如下：<divclass="content"> <divclass="leftBar"> <h1>各類景點</h1><h3>SCENERY</h3><imgsrc="images/line.jpg"style="width:158px;height:2px;position:absolute;top:58px;left:0"/><ulclass="left"><listyle="margin-top:25px"><ahref="cd.html"style="color:#F39">宣威景點</a></li><li><a>大理景點</a></li><li><a>麗江景點</a></li><li><a>廈門景點</a></li></ul></div><!--左邊欄--><divclass="rightBar"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;margin-bottom:-3px;;"/>宣威景點<ahref="#"style="text-decoration:none"><imgsrc="images/more.gif"style="position:absolute;border:0;left:650px;top:43px;"/></a></h3><ulclass="text"> <li><ahref="#">宣威市地處云南省東北部。東與貴州省盤縣等...</a></li><li><ahref="#">元至元十三年（1276年）設(shè)沾益州，屬云南行...</a></li><li><ahref="#">宣威是全省重要煤炭產(chǎn)地之一</a></li><li><ahref="#">宣威市地處云南省東北部。東與貴州省盤縣相鄰，</a></li><li><ahref="#">宣威主要名勝及紀(jì)念地有：尖角洞文化遺址、</a></li><li><ahref="#">年均降水量986毫米，年均溫13.3℃，一月均5℃</a></li><li><ahref="#">全市工業(yè)主要有農(nóng)機修造、煤炭、電力、采礦、化冶金...</a></li><li><ahref="#">貴昆鐵路縱貫市境，另有田煤、來賓煤礦、宣威電廠</a></li></ul><ulclass="date"><li>2015-12-14</li><li>2015-10-09</li><li>2015-06-08</li><li>2015-05-05</li><li>2015-12-29</li><li>2014-12-19</li><li>2014-12-03</li><li>2014-09-01</li></ul></div></div>CSS代碼：.content{height:505px;width:900px;background-color:#FFF;}.leftBar,.rightBar{float:left}.leftBar{background-image:url(images/leftbar.jpg);width:158px;height:485px;padding-top:20px;position:relative}.left{padding-left:20px}.leftli{list-style-type:none;width:114px;height:33px;line-height:33px;background-image:url(images/line.jpg);background-position:bottom;background-repeat:no-repeat;margin-bottom:5px}.leftBarh1{font-size:14px;margin-left:22px}.leftBarh3{font-size:10px;font-family:Arial;color:#a2a2a3;margin-left:22px}.lefta{text-decoration:none;color:#000;font-size:14px;font-weight:bold;padding-left:3px}.lefta:hover{color:#005bac;}.rightBar{padding-right:40px}.rightBarh3{margin-left:8px;width:692px;height:25px;border-bottom:solid1px#dedede;font-size:14px;color:#000;margin-top:33px;}.text{float:left}.date{float:right;}.text{padding-left:40px;margin-top:25px;width:346px}.date{margin-top:25px;width:84px;padding-right:10px}.textli{list-style-type:none;line-height:30px;width:340px;background-image:url(images/li.gif);background-repeat:no-repeat;background-position:left}.texta{padding-left:10px} .dateli{list-style-type:none;line-height:30px}.texta{color:#747373;text-decoration:none}.texta:hover{color:#000;text-decoration:underline}5.2.3旅游路線頁面設(shè)計旅游路線我就介紹了一下熱門的夏日好風(fēng)光、省外好風(fēng)光和宣行論壇等，在這個網(wǎng)頁，我主要與各個地方的風(fēng)景圖片做一個展示，因為之前的兩個頁面都有大部分的文字介紹，所以在這一頁我主要是風(fēng)景介紹，這樣也可以讓瀏覽者不會感到視覺疲勞，如下5-11： 圖5-11旅游路線設(shè)計“景點選擇”代碼如下：<divclass="content"><divclass="left"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>夏日好風(fēng)光</h3><pstyle="line-height:20px;">田野里，美在那里跳舞！夏天，田里禾苗綠油油。那翠綠的顏色，明亮地照耀著我們的眼睛，似乎每一片葉子上都有一個綠精靈在跳舞。</p><imgsrc="images/line.png"style="width:680px;height:1px"/><divclass="pic"> <ahref="#"class="picList"><imgsrc="images/pic1.jpg"/></a><ahref="#"class="picList"><imgsrc="images/pic2.jpg"/></a><ahref="#"class="picList"><imgsrc="images/pic3.png"/></a><ahref="#"class="picList"><imgsrc="images/pic4.png"/></a><ahref="#"class="picList"style="width:99px"><imgsrc="images/pic5.png"/></a><ahref="#"class="picList"><imgsrc="images/pic6.jpg"/></a><ahref="#"class="picList"><imgsrc="images/pic7.jpg"/></a><ahref="#"class="picList"><imgsrc="images/zhanwei.jpg"/></a><ahref="#"class="picList"><imgsrc="images/zhanwei.jpg"/></a><ahref="#"class="picList"style="width:99px"><imgsrc="images/pic9.jpg"/></a><ahref="#"class="picList"><imgsrc="images/pic10.png"/></a><ahref="#"class="picList"><imgsrc="images/pic11.png"/></a><ahref="#"class="picList"><imgsrc="images/zhanwei.jpg"/></a><ahref="#"class="picList"><imgsrc="images/zhanwei.jpg"/></a><ahref="#"class="picList"style="width:99px"><imgsrc="images/pic12.jpg"/></a><ahref="#"class="picList"><imgsrc="images/pic13.png"/></a><ahref="#"class="picList"><imgsrc="images/pic14.png"/></a><ahref="#"class="picList"><imgsrc="images/pic15.png"/></a><ahref="#"class="picList"><imgsrc="images/pic16.png"/></a><ahref="#"class="picList"style="width:99px"><imgsrc="images/pic17.png"/></a><divclass="bigPic"><ahref="#"class="picList"style="width:244px;height:168px;"><imgsrc="images/picbig.jpg"/></a></div></div></div><divclass="right"> <divclass="box01"> <p>美景接著看</p><divclass="button"><ahref="#">立即查看</a></div></div><divclass="box01"style="height:112px;margin-top:15px"> <p>省外好風(fēng)光</p><h3>搜索想要去的地方</h3><divclass="button"><ahref="#">立即了解</a></div></div><divclass="box01"style="height:130px;margin-top:15px"> <p>宣行論壇</p><h3>成為宣行一員，你會有非凡收獲！</h3><divclass="button"><ahref="#">進入講壇</a></div></div></div> </div>CSS代碼如下*{padding:0;margin:0;font-size:12px;}li{list-style:none;}body{background-color:#fdb4bb;}.parent{width:1002px;height:867px;background-image:url(images/background.jpg);margin:0auto}.bg{margin:0auto;width:900px;overflow:hidden}.English{width:900px;margin-left:auto;margin-right:auto;}.Englishli{float:right;margin:5px;padding-left:10px;}.logo{background-image:url(images/logo.jpg);width:900px;height:80px;}.logoli{list-style-type:none;float:left;padding:05px;}.logoul{float:right;margin-top:5px;width:150px}.logoa{color:#97d1ff;text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;width:60px;height:20px;display:block}.logoa:hover{color:#FFF;text-decoration:underline}.navBarli{list-style-type:none;float:left;width:97px;text-align:center;padding-right:35px}.navBar{width:900px;height:37px;background-color:#000;margin:0auto;}.navBara{color:#FFF;text-decoration:none;font-size:14px;font-weight:bold;line-height:37px;display:block}.navBara:hover{background-image:url(images/choose.jpg);width:97px;height:37px;color:#20acff}.bannerimg{width:900px;height:185px;}.content{height:500px;width:900px;background-color:#FFF;_padding-bottom:10px}.left{float:left}.right{float:right}.left{width:680px;padding-top:30px;padding-left:20px}.lefth3{width:680px;height:25px;border-bottom:solid1px#dedede;font-size:14px;color:#000;}.leftp{width:648px;margin-left:16px;margin-top:13px;margin-bottom:13px}.pic{margin-top:8px;width:620px;height:345px;margin-left:30px}.picListimg{border:0}.picList{border:5pxsolid#FFF;width:117px;height:79px;float:left}.picList:hover{border:5pxsolid#00337d}.right{width:180px;padding-right:9px;margin-top:54px}.box01{width:170px;height:89px;border:solid1px#dedede}.box01p{font-weight:bold;color:#313131;margin-top:20px;margin-left:15px}.button{background-image:url(images/right0102.gif);width:75px;height:20px;margin-top:15px;margin-left:15px}.buttona{color:#535353;text-decoration:none;line-height:20px;margin-left:5px}.buttona:hover{text-decoration:underline}.box01h3{color:#626262;font-weight:normal;margin-left:15px;margin-top:15px}.footer{background-image:url(images/bottom.jpg);width:900px;height:48px;padding-top:12px;}.footera{text-decoration:none;color:#97d1ff;}.footerli{list-style-type:none;float:left;padding:020px;border-right:solid1px#97d1ff}.footera:hover{text-decoration:underline}.last{width:898px;text-align:center;padding-top:8px;color:#97d1ff}.footerul{margin-left:230px;}.pic{position:relative}.bigPic{position:absolute;top:89px;left:252px}5.2.4室外桃源頁面設(shè)計世外桃源這個頁面，我就介紹了一下熱門的海景、鮮為人知的美景和專題景點等，也是用圖片和文字搭配來展示，也區(qū)別了其他網(wǎng)頁的布局，如圖5-12：圖5-12室外桃園頁面設(shè)計代碼如下：<divclass="banner"><imgsrc="images/banner.jpg"/></div><!--banner--> <divclass="contentrightBar"> <divclass="left"> <divclass="leftLine01"><h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>海景</h3><imgsrc="images/pic01.png"class="picLeft"/><pstyle="padding-top:5px;font-weight:bold;font-size:13px;">海邊好風(fēng)光</p><pstyle="padding-top:2px;text-indent:24px">仰首望上去，湛藍的天空下，陽光燦爛地做著背景，勾勒出高山那懸<br/>崖峭壁奇石怪壘的身...</p><spanstyle="position:absolute;left:595px;top:90px;width:60px"><ahref="cd新聞.html"class="buttonLeft">了解更多</a><imgsrc="images/sanjiao.gif"style="margin-left:5px"/></span></div><divclass="leftLine01"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>美景</h3><imgsrc="images/pic02.png"class="picLeft"/><pstyle="padding-top:5px；font-weight:bold;font-size:13px;font-weight:bold;">那些你不知道的美景</p><pstyle="padding-top:2px;text-indent:24px">炎炎的太陽，高懸在世界的當(dāng)空。紅的光如火箭般射到地面，地面著<br/>火了，反射出油一般在沸煎的火焰來。蒸騰，窒塞，酷...</p><spanstyle="position:absolute;left:595px;top:90px;width:60px"><ahref="cd重要通知.html"class="buttonLeft">了解更多</a><imgsrc="images/sanjiao.gif"style="margin-left:5px"/></span></div><divclass="leftLine01"style="margin=bottom:0;border:0"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>專題景點</h3><imgsrc="images/pic03.png"class="picLeft"/><pstyle="padding-top:5px；font-weight:bold;font-size:13px;font-weight:bold;">你也許從未見過的美景</p><pstyle="padding-top:2px;text-indent:24px">秋天已到，雖然還未在福州感受到這般涼意，但是卻不免會思念起<br/>家鄉(xiāng)的秋天，這時候我窗前的梧桐樹是不是已經(jīng)穿上金黃的...</p><spanstyle="position:absolute;left:595px;top:90px;width:60px"><ahref="cd專題欄目.html"class="buttonLeft">了解更多</a><imgsrc="images/sanjiao.gif"style="margin-left:5px"/></span></div></div><divclass="right"> <divclass="box01"style="height:130px;margin-top:15px"> <p>選擇宣行的理由</p><h3>由此發(fā)現(xiàn)，宣行為何值得您加入！</h3><divclass="button"><ahref="cd選擇財大的理由.html">立即了解</a></div></div></div> </div>CSS代碼如下：li{list-style:none;}body{background-color:#fdb4bb;}.parent{width:1002px;height:867px;background-image:url(images/background.jpg);margin:0auto}.bg{margin:0auto;width:900px;overflow:hidden}.English{width:900px;margin-left:auto;margin-right:auto;}.Englishli{float:right;margin:5px;padding-left:10px;}.logo{background-image:url(images/logo.jpg);width:900px;height:80px;}.logoli{list-style-type:none;float:left;padding:05px;}.logoul{float:right;margin-top:5px;width:150px}.logoa{color:#97d1ff;text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;width:60px;height:20px;display:block}.logoa:hover{color:#FFF;text-decoration:underline}.navBarli{list-style-type:none;float:left;width:97px;text-align:center;padding-right:35px}.navBar{width:900px;height:37px;background-color:#000;margin:0auto;}.navBara{color:#FFF;text-decoration:none;font-size:14px;font-weight:bold;line-height:37px;display:block}.navBara:hover{background-image:url(images/choose.jpg);width:97px;height:37px;color:#20acff}.bannerimg{width:900px;height:185px;}.content{height:505px;width:900px;background-color:#FFF;}.left{float:left}.right{float:right}.picLeft{float:left;margin-left:15px;margin-right:15px}.left{width:680px;padding-top:30px;padding-left:20px}.leftLine01{height:130px;width:680px;border-bottom:1pxdotted#dedede;margin-bottom:20px}.leftLine01h3{width:680px;height:25px;font-size:14px;color:#000;margin-bottom:6px}.leftLine01p{margin-left:16px;margin-top:13px;margin-bottom:13px;margin-top:2px;color:#525252;line-height:16px}.buttonLeft{color:#626262;text-decoration:none}.buttonLeft:hover{text-decoration:underline}.right{width:180px;padding-right:9px;margin-top:54px}.box01{width:170px;height:89px;border:solid1px#dedede}.box01p{font-weight:bold;color:#313131;margin-top:20px;margin-left:15px}.button{background-image:url(images/right0102.gif);width:75px;height:20px;margin-top:15px;margin-left:15px}.buttona{color:#535353;text-decoration:none;line-height:20px;margin-left:5px}.buttona:hover{text-decoration:underline}.box01h3{color:#626262;font-weight:normal;margin-left:15px;margin-top:15px}.footer{background-image:url(images/bottom.jpg);width:900px;height:48px;padding-top:12px;}.footera{text-decoration:none;color:#97d1ff;}.footerli{list-style-type:none;float:left;padding:020px;border-right:solid1px#97d1ff}.footera:hover{text-decoration:underline}.last{width:898px;text-align:center;padding-top:8px;c