381.大学生HTML期末大作业 —【紫色的景区旅游网页(4页)】 Web前端网页制作 html+css+js

本实例应用html+css+js：导航菜单、图片轮翻效果等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含4个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>徐州紫薇园</title>

</div>

<script src="js/jquery.min.js" ></script>
<script src="js/script.js"></script>

<div class="top">
<div class="imgnv">
<img src="images/index_09.png" />
<img src="images/index_11.png" />
<img src="images/index_13.png" />
<img src="images/index_15.png" /></div>
</div>
<div style="background:url(images/index_08.jpg) no-repeat center top; height:330px">
<div class="top">
<dl class="about"><dt><img src="images/index_25.png" /></dt>
<dd style="width:550px; margin-left:20px; padding-top:20px">        紫薇园漂流项目所在徐州市铜山区伊庄镇倪园村，即徐州市吕梁山风景区紫薇园内；漂流全长约2.5公里，落差140米，总规划面积70000平方米，漂流总投资2200万元。漂流区主要设置有蓄水池，候漂长廊，起漂码头及候漂排队区、仓库、回旋车城等，漂流体验区分为3个区域，森林石海区，紫薇花溪区和汉邦古韵区。
<br />

       紫薇园漂流周边有倪园古镇，农家乐，我们有配套的游客服务中心，超市，奇石馆，纪念品商店，特色小吃店等，经过多年规划，形成了一个有特色的古镇文化风景区。农家乐位于倪园古镇北侧，我们配套特色农家小吃，如春秋古院，酒肆，香油坊，酱油坊。</dd>
<dd style="float:right; padding-top:15px"><img src="images/index_22.png" /></dd>
<div class="clear"></div></dl>
</div></div>
<div style="background:url(images/index_10.jpg) no-repeat center bottom #e5edf5; padding-bottom:120px ">
<div class="top">

<dl class="sub"><img src="images/index_32.png" /><dt>
<img src="images/index_41.png" width="296" height="93" /></dt>
<dd><ul class="news">
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>

</ul></dd></dl>
<dl class="sub"><img src="images/index_35.png" /><dt>
<img src="images/index_44.png" width="296" height="93" /></dt>
<dd><ul class="news">
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
<li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>

</ul></dd></dl>

</div>

</div>
<div class="clear"></div>
</div>
<div class="footbg">
<div class="foot"><span class="fr"><img src="images/index_66.png"/><br />
官方微信公众号</span><img src="images/index_63.png" class="fl"/><span style="padding-top:10px; display:inline-block">
<a href="index.html">网站首页</a> | <a href="#">景区简介</a> | <a href="#">景区资讯</a> | <a href="#">景点介绍</a> | <a href="#">特色商品</a> | <a href="#">游玩知识</a> | <a href="#">票务系统</a> | <a href="#">游客留言</a><br />

版权所有：徐州紫薇园景区客服咨询电话：400-9621866、0516-83277369    技术支持：<a href="#">慧谷科技</a><br />
观光地址：徐州吕梁悬水湖风景区紫薇园紫薇园全体员工欢迎您的到来</span>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */

html,body{margin:0;border:0;padding:0;width:100%;font-size:14px;font-family: Arial,"微软雅黑","宋体"; background:#fff; color:#333333; line-height:27px}
img {border:0px; }
*{ padding:0; margin:0}
ul,li,dl,dd,dt,span{ margin:0; padding:0;}
li { list-style:none;}
a {text-decoration:none;color:#333; }
a:hover { text-decoration:none; color:#e9002e}
.clear { clear:both; font-size:0; height:0; line-height:0;}
.mt10 { margin-top:10px;}
.mb5{ margin-bottom:5px}
.ml20{ margin-left:20px;}
.ml10{ margin-left:10px;}
.mt20{ margin-top:20px}
.mt8{ margin-top:8px}
.mt30{ margin-top:30px}
.p10{ padding:20px}
.p15{ padding:15px}
.ptb5{ padding-top:5px; padding-bottom:5px}
.fl{ float:left}
.fr{ float:right}
.wd90{ width:90%}

.topbg{ background:url(../images/index_02.png); height:90px; position:relative; margin-bottom:-90px; z-index:100}
.top{ width:1211px; margin:0 auto; }
.top2{ width:1211px; margin:0 auto; background:#fff; margin-top:480px;border-radius:10px; margin-bottom:20px }
.logo{ float:left; width:276px;}
.nav { float:right; width:920PX;}
.nav ul li{ float:left; width:115px; line-height:90px }
.nav ul li a{ text-align:left; display:block; color:#fff; font-size:16px; padding-left:25px; }
.nav ul li a.hover{ background:#90157b}
.nav ul li a:hover{background:#90157b }
.nav ul li a span{ display:block; margin-top:2px; font-size:12px; color:#999}
.about { padding:40px 0}
.about dt{ float:left; width:321px}
.about dd{ float:left;}

.sub { width:300px; float:left;margin:20px 10px}
.sub dt{ text-align:center; margin-top:5px}
.sub dd{}
.sub dd h1{ font-size:20px; margin-bottom:5px; margin-top:10px; line-height:20px;}
.footbg{ background:#1f1f1f;}
.foot{width:1211px; margin:0 auto; padding:15px 0;color:#dedede}
.foot a{color:#dedede }

.banner{height:680px;}
.banner .ban_c img{position:absolute;width:1920px;left:50%;margin-left:-960px;top:0;}
.banner .ban_nav{display:none;}
.banner .Left,.banner .Right{position:absolute;width:38px;height:38px;background:url(http://demo.lanrenzhijia.com/2014/banner1113/images/cir_white.gif) no-repeat #aaa;right:50%;bottom:15px;}
.banner .Left{margin-right:-650px;background-position:5px 0}
.banner .Right{margin-right:-690px;background-position:-33px 0;background-color:#e6292f;}

.bann_ext{position:relative;}
.frontCover{position:absolute;top:-120px;padding:0 0 16px;border-bottom:5px solid #de0000;}
.frontCover li{float:left;width:82px;padding:3px;background:#000;color:#fff;overflow:hidden;margin-right:10px;cursor:pointer;}
.frontCover p{text-align:center;height:14px;line-height:18px;overflow:hidden;}
.frontCover .img{position:relative;height:50px;overflow:hidden;}
.frontCover img{position:absolute;width:192px;height:50px;left:-50px;}
.frontCover .open{background:#e60013;}
.wrap{width:980px;margin-left:auto;margin-right:auto;}
/*幻灯片(组件)*/
.slide{position:relative;width:100%;}
.ban_c{display:none;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.ban_c img{width:100%;height:100%;}
.ban_t{position:absolute;left:0;bottom:0;width:100%;padding:4px 0;text-indent:10px;white-space:nowrap;overflow:hidden;color:#fff;background:rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88000000,endcolorstr=#88000000);z-index:3;}
.ban_nav{position:absolute;bottom:0;left:0;width:100%;text-align:right;z-index:4;}
.ban_nav a{display:inline-block;vertical-align:middle;width:14px;height:14px;line-height:14px;overflow:hidden;text-align:center;margin-right:8px;cursor:pointer;text-decoration:none;font-size:10px;-webkit-text-size-adjust:none;background:#ccc;}
.ban_nav .on{background:#f90;color:#fff;}
.Left,.Right{cursor:pointer;}

.tab{ border-left:4PX #fe0032 solid; font-size:24px; padding-left:5px; margin-top:20px; margin-bottom:10px}
.tab span{ display:block; font-size:12px}
.side li{ background:#fff; border:1px #dedede solid; line-height:45px; height:45px; text-indent:2em; margin-top:5px; font-size:16px}
.side li a{ display:block; height:45px}
.side li a:hover{ background:#333; color:#fff}
.side li a.hover{ background:#333; color:#fff}
.wz{ border-bottom:1px #dedede solid; padding:10px;}

.newslist{ margin:15px 0; border-bottom:1px #dedede solid; padding-bottom:15px}
.newslist dt{ float:left; margin-right:10px; padding:4px; border:1px #dedede solid}
.newslist dd h1{ font-size:16px; margin-bottom:15px; margin-top:10px}
.newslist dd span{ line-height:22px; color:#666; display:block}
.newslist dd.time{ width:95px; text-align:center; margin-top:10px}
.newslist dd.time{ font-size:35px; border:1px #dedede solid; background:#f0f0f0; padding-top:15px}
.newslist dd.time span{ background:#7f7f7f; display:block; font-size:16px; color:#fff; margin-top:15px}

/*分页*/
.page{ margin:25px 0; text-align:right; line-height:24px;}
.page a{ padding:0 12px; border:#c1c1c1 1px solid; display:inline-block; height:28px; line-height:28px; margin:0 2px; color:#333333 }
.page a.page_hover { background:#333; color:#FFFFFF}
.page a.page_hover:hover { background:#333; color:#FFFFFF}
.page a:hover{background:#333;color:#FFFFFF }

.title{ font-size:20px; margin:0px 0 10px 0; font-weight:bold}

.news{ margin-top:10px; line-height:20px}
.news li{ margin-top:10px}
.news li span{ margin-left:13px}
.news li a{ display:block;background:url(../images/news_10.png) no-repeat left; text-indent:1em}

.imgnv{ position:absolute; margin-top:-113px; padding-left:35px}
.imgnv img{ margin-left:10px}

...

3.JS

代码如下（节选示例）：

var ie6 = !-[1,] && !window.XMLHttpRequest;
var userAgent = navigator.userAgent.toLowerCase();
var browser = {
ie8: /msie 8/.test(userAgent),
ie7: /msie 7/.test(userAgent)
};

//Slide func
$.fn.slide=function(){
var defaults,opts,data_opts,$this,$b_,t,n=0,count,$nav,$p,$n,DelayObj,Delay=false;
   defaults={
       fade:true,
       auto:true,
       time:4000,
       action:'mouseover',
       fn:null
       };
   $this=$(this);
   data_opts=$this.data('slide')||{};
   opts=$.extend({},defaults,data_opts);
   $b_=$this.children('.ban_c');
   count=$b_.length;
   if($this.find('.ban_nav').length){$nav=$this.find('.ban_nav')}else{
           $nav=$('<div class="ban_nav"></div>');
           for(i=0;i<count;i++){$nav.append('<a>'+(i+1)+'</a>')};
           $this.append($nav)
           };
   $this.append('<a class="Left" onselectstart="return false;"></a><a class="Right" onselectstart="return false;"></a>');
   $nav.children('a').eq(0).addClass('on');
   $nav.children('a').eq(1).addClass('ban_next');
   $nav.children('a').eq(count-1).addClass('ban_prev');
   $b_.hide().eq(0).show();
   if(ie6){$b_.height($b_.attr('height') || $this.height())};
   $nav.children('a').each(function(index) {
       $(this).on(opts.action,function(event) {
           event.preventDefault();
           event.stopPropagation();
           if (index >= count){return false}else{
                   $nav.children('a').eq(index-1).addClass('ban_prev').siblings().removeClass('ban_prev');
                   $nav.children('a').eq(index==count-1 ? 0 : index+1).addClass('ban_next').siblings().removeClass('ban_next')
                   };
           if(opts.fade){$b_.stop(1,1).fadeOut(200).eq(index).stop(1,1).fadeIn(500)}else{$b_.hide().eq(index).show()};
           $(this).addClass('on').siblings().removeClass("on");
           n=index
       })
   });
   $p=$(this).find('.Left');
   $n=$(this).find('.Right');
   if(opts.auto){
       t = setInterval(function(){showAuto()}, opts.time);
       $this.mouseenter(function(){
           clearInterval(t);
           }).mouseleave(function(){
               t=setInterval(function(){showAuto()},opts.time);
               })
       };
   $p.click(function(){showPre()});
   $n.click(function(){showAuto()});
   function showAuto(){n=n>=(count - 1) ? 0 : ++n;$nav.find('a').eq(n).trigger(opts.action);};
   function showPre(){n=n<=0 ? (count - 1) : --n;$nav.find('a').eq(n).trigger(opts.action)};
   if(opts.fn){eval(opts.fn+"(opts,$b_,$nav)")}
};
$('.slide').each(function() {$(this).slide()});

//banner专辑封面
function banner_ext(opts,$b_,$nav){
   var album=$b_.filter(function(){return $(this).hasClass('album')}),
       newslink=$('.banner').find('.link');
       newslink.eq(0).show();
   if(browser.ie8) opts.fade=false;
   $b_.each(function(i){
       $(this).data('index',i)
       });
   album.each(function(i){
       $('.frontCover').append('<li index="'+($(this).data('index'))+'"><div class="img">'+$(this).find('a').eq(0).html()+'</div><p>'+$(this).find('img').eq(0).attr('alt')+'</p></li>')
       });
   $nav.children('a').each(function(index) {
$(this).click(function(){
           $('.frontCover').children('li').filter(function() {
               return $(this).attr('index')==index
           }).addClass('open').siblings().removeClass('open');
           newslink.eq($('.frontCover').find('.open').index()).show().siblings('.link').hide();
       })
});
   $('.frontCover').children('li').click(function(){
       $nav.children('a').eq($(this).attr('index')).trigger('click')
       });
   $('.frontCover').children('li').eq(0).addClass('open').end().eq(-1).css('margin',0)
   };

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流

标签：Web,网页,top,height,html,nav,background,margin,left
From： https://blog.csdn.net/VX_L_5201314168/article/details/144665846