旅游网站前端的设计与实现

XXIII5网站开发过程及实现5.1首页设计首页是一个网站的外观，作为公司的形象，特别强调设计和规划。它是用户首先看到的界面，其质量直接影响到站点的访问程度。因此，我从以下几个方面对主要界面进行设计。（1）在色彩搭配上，我用一个比较清新的颜色作基调，用相关的鲜艳色彩，给用户一个干净灵动的感觉、。（2）在字体选择上，适当的大小，尽量使用普通字体，适当配用其他字体。（3）在内容上，界面的主要内容充实而不繁杂，既体现了网站的特色，又满足了用户的需求。在主页的基础上我把主页中加入了可编辑区域，并保存为模板。后页是以模板为基础的。使用模板功能有助于用户设计风格一致的页面。通过模板来创建和更新页面，不仅大大提高了网站的工作效率和维护也将变得更加轻松。云南财经大学首页如下图5-1：图5-1界面首页5.1.1首页顶部设计在登录框的制作中，我设计的比较简单，是由邮箱框、密码框和登录按钮所构成的，如图5-2：图5-2顶部设计制作这个登录框的代码：<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.导航栏和LOGO设计导航栏的制作也相对比较简单，我就是将我需要介绍的内容放在导航条里，然后用了一个黑的背景色，白的文字，颜色分明，使导航条显而易见，如下图5-3：图5-3导航栏设计导航栏的代码：<!--导航栏--><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><!--导航-->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.首页主要内容设计中间内容我插入一张旅游的风景图，突出主题，因为只插入一张风景图片，所以代码比较简单，如图5-4：图5-4风景图导航栏的代码：<!--导航栏--><divclass="banner"><imgsrc="images/banner.jpg"></div><!--banner-->CSS的代码：.bannerimg{width:900px;height:238px;margin-top:10px;}中间的内容，主要是图片加文字介绍了一副海边的景点，加入了一个“阅读全文”的按钮，可以链接到详细介绍该内容的另一个网页，如图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;"/>最热风景</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><!--最新动态-->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}中下部分也是以图片加文字突出两个主题——雪景、桥景，文字可供游客选择想要什么样的雪景和什么样的桥景，在文字前，加了一个四叶草的小图标，也突出了旅游的主题，如图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}而其中首页的一个特效是图片切换，在这里面加入了许多风景照的切换，是网页增加了一点生动的信息，如图5-7： 图5-7图片切换效果切换代码：<divclass="right"> <h3style="position:relative"><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>学校好风光<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><!--宣行好风光-->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.首页底部设计页脚是旅游的一些信息介绍，如图5-8： 图5-8底部设计页脚的代码<divclass="footer"> <ul> <li><ahref="#">地址</a></li> <li><ahref="#">网站信息</a></li> <li><ahref="#">意见建议</a></li> <li><ahref="#">版权信息</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其余页面的设计5.2.1.宣宣景点页面设计宣宣景点我就介绍了一下宣威简介、历史沿革和宣威文化，在这个网页大家也能看出，我主要就是介绍我的家乡（宣威），可能加入过多的文字信息，会让人游客有点视觉疲劳，但如果能真正了解宣威的这些内容，你就会发现宣威是一个真正值得你来旅游的好地方，如图5-9:图5-9宣宣景点设计宣威简介的代码如下</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镇及17乡。宣威历史悠久。</p><p>元至元十三年（1276年）设沾益州，属云南行中书省曲靖路。清雍正五年（1727年）设宣威州，隶曲靖府。民国初改设宣威县，1954年改名榕峰县，1958年复设宣威县，现隶属曲靖地区。经国务院批准撤县设市，设宣威市。</p><p>

宣威地处滇江高原北部，地势东高，西、北低。主要山峰有东山梁子、白革皮，梁光山梁子、大水塘梁子、石盆梁子等；最高峰马鞍洞梁子，海拔2868米，最低处腊龙岔河，海拔920米。主要河流有可渡河、格香河、小江。气候特点，冬温夏凉，年温差小，日温差大。年均降水量986毫米，年均温13.3℃，一月均温5℃，七月均温19.4℃。属暖温带高原季风气候。全市工业主要有农机修造、煤炭、电力、采矿、化工、冶金、化肥、建材、食品加工、烤烟、粮油加工、酿酒、制药等。</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.私人专线页面设计私人专线我就介绍了一下宣威景点、大理景点、丽江景点和厦门景点，点到每一个景点都会有相应的文字介绍，主要是对在这里的各个地方的介绍，因为在这几个景点里都会有好多小景点，而每个风景的介绍会在二级界面里一一介绍，如图5-10：图5-10私人专线设计宣威景点的代码如下：<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年）设沾益州，属云南行...</a></li><li><ahref="#">宣威是全省重要煤炭产地之一</a></li><li><ahref="#">宣威市地处云南省东北部。东与贵州省盘县相邻，</a></li><li><ahref="#">宣威主要名胜及纪念地有：尖角洞文化遗址、</a></li><li><ahref="#">年均降水量986毫米，年均温13.3℃，一月均5℃</a></li><li><ahref="#">全市工业主要有农机修造、煤炭、电力、采矿、化冶金...</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旅游路线页面设计旅游路线我就介绍了一下热门的夏日好风光、省外好风光和宣行论坛等，在这个网页，我主要与各个地方的风景图片做一个展示，因为之前的两个页面都有大部分的文字介绍，所以在这一页我主要是风景介绍，这样也可以让浏览者不会感到视觉疲劳，如下5-11： 图5-11旅游路线设计“景点选择”代码如下：<divclass="content"><divclass="left"> <h3><imgsrc="images/label.gif"style="margin-left:5px;margin-right:5px;margin-bottom:-3px;"/>夏日好风光</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>省外好风光</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室外桃源页面设计世外桃源这个页面，我就介绍了一下热门的海景、鲜为人知的美景和专题景点等，也是用图片和文字搭配来展示，也区别了其他网页的布局，如图5-12：图5-12室外桃园页面设计代码如下：<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;">海边好风光</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">炎炎的太阳，高悬在世界的当空。红的光如火箭般射到地面，地面着<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/>家乡的秋天，这时候我窗前的梧桐树是不是已经穿上金黄的...</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>由此发现，宣行为何值得您加入！</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