657. 大学生HTML期末大作业 ―【绿色农副产品科技企业响应式自适应网页】 Web前端网页制作 html+css+js
目录
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+js： 导航菜单、图片轮翻、三级页面、下拉菜单、无缝滚动插件、鼠标滑动特效、返回菜单栏按钮等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含8个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
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>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<script src="js/html5_tag.js"></script>
<![endif]-->
<SCRIPT src="js/jquery-1.4.2.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/common.js" type="text/javascript"></SCRIPT>
<!--[if lte IE 6]><SCRIPT src="js/iepng.js" type="text/javascript"></SCRIPT>
<script>
EvPNG.fix('div, ul, img, li, input,a,span,nav,article');
</script><![endif]-->
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/kuvai_style/images/114_logo.png">
</head>
<body class="indexBody">
<header class="headerTop" id="headerTop">
<div class="wrap">
<h1><span class="cm_ico2"></span>全国统一24小时服务热线：<strong class="pchtel">400-0000-000</strong><a class="mobilehtel">400-0000-000</a> <strong class="pchtel"> / 12345678</strong></h1>
<menu>
<ul>
<li><span class="text">在线沟通: </span><a href="http://wpa.qq.com/msgrd?v=3&uin=1234567&site=qq&menu=yes" class="qq cm_ico" title="通过QQ与促进经济转型，发挥林下资源优势客服进行沟通" target="_blank" rel="nofollow"></a><span class="sline cm_ico"></span></li>
<li class="none_720"><a href="#" target="_blank" title="">联系我们</a></li>
<li class="line none_720"></li>
<div class="cls"></div>
</ul>
</menu>
</div>
</header>
<nav class="nav">
<div class="nav_bg">
<div class="wrap">
<div class="mobile_nav_wrap"> <a href="/" class="logo" title="自适应网站"><img src="images/logo.jpg" alt="自适应网站"/></a><span class="ThiscurCity" id="ThiscurCity" οnclick="showAllCopn()"></span>
<div class="w1024_search" onClick="show_search()"></div>
<div class="menu_moblie_icon" onClick="show_moblie_menu()"></div>
</div>
<ul class="navlist" id="navlist">
<li><a href="index.html" title="自适应网站">网站首页<span>Home</span></a></li>
<li ><a href="about.html">关于我们<span>About</span></a>
<menu id="aboutNavMenu"> <a href="about.html" class="AboutNavMenu6">企业简介</a> <a href="#" class="AboutNavMenu6">公司文化</a> <a href="team.html" class="AboutNavMenu6">团队成员</a> <a href="honor.html" class="AboutNavMenu6">企业荣誉</a> <a href="about.html" class="AboutNavMenu6">联系我们</a> </menu>
</li><li ><a href="#">产品展示<span>Product</span></a>
<menu id="aboutNavMenu"> <a href="prolist.html" class="AboutNavMenu6">产品一类</a> <a href="#" class="AboutNavMenu6">产品二类</a> <a href="prolist.html" class="AboutNavMenu6">产品三类</a> <a href="prolist.html" class="AboutNavMenu6">产品四类</a> <a href="prolist.html" class="AboutNavMenu6">产品五类</a> </menu>
</li><li ><a href="newslist.html">技术培训<span>Training</span></a>
<menu id="aboutNavMenu"> </menu>
</li><li ><a href="prolist.html">招商引资<span>Business</span></a>
<menu id="aboutNavMenu"> </menu>
</li><li ><a href="prolist.html">风光景点<span>Attractions</span></a>
<menu id="aboutNavMenu"> <a href="prolist.html" class="AboutNavMenu6">九曲十八湾</a> <a href="prolist.html" class="AboutNavMenu6">日月江山</a> <a href="prolist.html" class="AboutNavMenu6">卡伦小镇</a> <a href="prolist.html" class="AboutNavMenu6">博物馆</a> <a href="prolist.html" class="AboutNavMenu6">百环度假村</a> <a href="prolist.html" class="AboutNavMenu6">原始樟子松林</a> </menu>
</li><li ><a href="#">新闻资讯<span>News</span></a>
<menu id="aboutNavMenu"> <a href="newslist.html" class="AboutNavMenu6">产业新闻</a> <a href="newslist.html" class="AboutNavMenu6">媒体报道</a> <a href="#" class="newslist.html">科普园地</a> </menu>
</li>
<li class="no_bor "><a href="http://wpa.qq.com/msgrd?v=3&uin=1234567&site=qq&menu=yes">在线咨询<span>Online</span></a></li>
<div class="cls"></div>
</ul>
<div class="cls"></div>
</div>
</div>
</nav>
<section class="mcur">
<div class="wrap">
<h1>企业荣誉<span>honor</span></h1>
<h2> <span></span>当前位置:<a href='/'>主页</a> > <a href='#'>关于我们</a> > <a href='#'>企业荣誉</a> > </h2>
</div>
</section>
<menu class="PageMenuList">
<div class="wrap">
<ul id="PagemenuClass">
<li><a href='#'>企业简介</a></li>
<li><a href='#'>公司文化</a></li>
<li><a href='#'>团队成员</a></li>
<li class='hover'><a href='#' class='thisclass'>企业荣誉</a> </li>
<li><a href='#'>联系我们</a></li>
<div class="cls"></div>
</ul>
</div>
</menu>
...
2.CSS
代码如下（节选示例）：
/*Reset*/
.xian {
margin-top: 40px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
}
* {
padding: 0;
margin: 0
}
html, div, ul, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, img, form, embed, label, ol {
margin: 0;
padding: 0;
border: 0;
font-size: 12px;
font-weight: normal
}
img {
border: none
}
object, .dis {
display: block
}
ul, ul li, ol, ol li, menu li {
list-style: none
}
.cls {
clear: both;
line-height: 0px!important;
height: 0px!important;
font-size: 0px!important
}
select, input {
vertical-align: middle;
font-size: 12px
}
a {
color: #444;
text-decoration: none
}
a:visited {
color: #918b8e;
text-decoration: none
}
a:hover {
color: #7ec318
}
a:active {
color: #666
}
.undis, .hidden, .play {
display: none
}
/*basic*/
html {
height: 100%;
width: 100%
}
body {
margin: 0px;
padding: 0px;
font-size: 12px;
color: #444;
font-family: "微软雅黑";
_background-image: url(about:blank);
_background-attachment: fixed
}
.wrap {
width: 1318px;
margin: 0 auto;
position: relative
}
.mobile_nav_wrap {
width: 100%;
position: relative
}
.cm_ico {
background: url(../images/common_bg.gif) no-repeat
}
.cm_ico2 {
background: url(../images/toptel_bg.png) no-repeat;
}
/*头部*/
.pchtel {
display: inline-block;
color: #7ec318;
font-weight: bold
}
.headerTop {
background: #f3f3f3;
height: 49px;
border-bottom: 1px solid #e6e6e6;
position: relative;
z-index: 111
}
.headerTop h1 {
color: #999;
font-size: 16px;
padding-top: 14px;
color: #F50;
font-weight: bold;
white-space: nowrap
}
...
3.JS
代码如下（节选示例）：
// JavaScript Document power By QQ 364564465 xubaojian
var SetMoreCasePage=false,SetMoreNewsPage=false,lpt_index=false,jylm_page=false,index_page_is=false;DTPath="http://"+window.location.host+"/";$(function(){$('.indexCaseList p').live("mouseover",function(){$(this).stop().find('a').animate({top:0},300,'easeOutExpo');})
$('.indexCaseList p').live("mouseleave",function(){var tops=$(this).height();$(this).stop().find('a').animate({top:tops},300);})
$('.moreA').mouseover(function(){$(this).stop().animate({right:0},300);}).mouseleave(function(){$(this).stop().animate({right:-30},300);})
$('.indexHonorItem').mouseover(function(){$(this).stop().animate({height:169,paddingTop:24}).find('figcaption').show();}).mouseleave(function(){$(this).stop().animate({height:159,paddingTop:34}).find('figcaption').hide();})
$('#rightScrollBar_a5').mouseover(function(){$(this).find('#erweima').fadeIn(100)}).mouseleave(function(){$(this).find('#erweima').fadeOut(100)})
$('#rightScrollBar_a44').mouseover(function(){$(this).addClass('a5_hover');$(this).find('.nav_huodong').fadeIn(100)}).mouseleave(function(){$(this).removeClass('a5_hover');$(this).find('.nav_huodong').fadeOut(100)})
setNav();var body_width=$('.wrap').eq(1).width();var resizeTimer=null;$(window).resize(function(){if(resizeTimer){clearTimeout(resizeTimer)}
resizeTimer=setTimeout(function(){LoadPageSize();body_width=$('.wrap').eq(1).width();},30);});var resizeTimer2=null;function ws(){var ht=$('#headerTop');$(window).scroll(function(){if(resizeTimer2){clearTimeout(resizeTimer)}
resizeTimer=setTimeout(function(){var sctop=ht.offset().top;var bodytop=$(document).scrollTop();if($.browser.version!="6.0"&&body_width>720){if(bodytop>sctop+300){$('.nav').addClass('fixed_nav').fadeIn(500);ht.css('margin-bottom','124px')}else{$('.nav').removeClass('fixed_nav');ht.css('margin-bottom','0px')}}},200);});}
ws();$('#foothelp a').each(function(i){$(this).click(function(){help_type=i;var b=i+1;temp_HelpText_index=i;$('.foothelp'+b).eq(0).show(0).siblings('.foothelp').hide();})})
$('#city_select').mouseover(function(){$(this).find('.city_box').fadeIn(50).mouseover(function(){})}).mouseleave(function(){$(this).find('.city_box').fadeOut(50)})
$('#city_select3').mouseover(function(){$(this).find('.city_box').fadeIn(50).mouseover(function(){})}).mouseleave(function(){$(this).find('.city_box').fadeOut(50)})
$('#city_box a').click(function(){$(this).parent().hide(0).prev().html($(this).html());$.getJSON(DTPath+"ajax/selectArea.php",{areaid:$(this).attr('value')},function(data){if(data.length>0){$('#city_select2').show(0)
$('#city_box2').show(0);}else{$('#city_box2').hide(0);$('#city_select2').hide(0);}
var temp_html='';$.each(data,function(idx,e){temp_html+="<a href='javascript:'>"+e['areaname']+"</a>";})
$('#city_box2').html(temp_html);})})
$('#city_box3 a').click(function(){$(this).parent().hide(0).prev().html($(this).html());$.getJSON(DTPath+"ajax/selectArea.php",{areaid:$(this).attr('value')},function(data){if(data.length>0){$('#city_select4').show(0)
$('#city_box4').show(0);}else{$('#city_box4').hide(0);$('#city_select4').hide(0);}
var temp_html='';$.each(data,function(idx,e){temp_html+="<a href='javascript:'>"+e['areaname']+"</a>";})
$('#city_box4').html(temp_html);})})
$('#city_box2 a').live("click",function(){$(this).parent().hide(0).prev().html($(this).html());})
$('#city_box4 a').live("click",function(){$(this).parent().hide(0).prev().html($(this).html());})});var temp_HelpText_index=0;var help_type=null;var help_stact=true;function SendHelp(){if(help_stact==false){alert('您已经反馈过了！');return false;}
var help_content=$('#help_text'+temp_HelpText_index).val();$.post(DTPath+"ajax/setHelp.php",{help_type:help_type,help_cat:help_cat,help_mid:help_mid,help_content:help_content,help_url:help_url},function(date){if(date==1){help_stact=false;$('.foothelp4').show(0).siblings('.foothelp').hide(0);}else{}})}
function setNav(){$('.navlist li').each(function(){var s=false;var body_width=$('.wrap').eq(1).width();var m=$(this).find('menu');var a=$(this).children('a');if(body_width<=640&&$(this).find('menu').length>0){var old_href=a.attr('href');a.attr('bsrc',old_href);a.attr('href','javascript:void(0)');a.attr('target','_self');$(this).unbind('mouseover').unbind('mouseleave').click(function(){s==false?m.show(0,function(){s=true;return false;}):m.hide(0,function(){s=false;return false;});})}else if(body_width>640){a.attr('bsrc')==null?'':a.attr('bsrc',a.attr('href')).attr('href','javascript:void(0)');$(this).mouseover(function(){$(this).addClass('hover');m.show(0);}).mouseleave(function(){$(this).removeClass('hover');m.hide();})}})}
function showFlink(){$('#friendLink').css('display')=='block'?$('#friendLink').hide(500):$('#friendLink').show(500);$("html,body").animate({scrollTop:$('#friendLink').offset().top},1200)}
function showRightBar(){$('#rightScrollBar').removeClass('rightScrollBarHide');return true;}
function hideRightBar(){$('#rightScrollBar').addClass('rightScrollBarHide');return true;}
var MapShow_state=true;;function showMap(){if(MapShow_state){$('#webSiteMap').stop().animate({height:240},400,'easeOutExpo',function(){MapShow_state=false;})}else{$('#webSiteMap').stop().animate({height:33},400,'easeOutExpo',function(){MapShow_state=true;})}}
function showOtherCp(){$('.webSite').show(1000);}
function closeOtherCp(){$('.webSite').hide(1000);}
var sub_shejishi_id=null;function showOA(t,t2,t3){var bheight=$('body').height();$('#lyBoxBg').css('height',bheight).show();$("html,body").animate({scrollTop:550},400)
$('#lyBox').show();$('#OATitle').html(t);$('#OATitle2').html(t2);if(t3>0){sub_shejishi_id=t3;}}
function hidelyBox(){$('#lyBoxBg').hide();$('#lyBox').hide();}
function show_search(){$('.search').fadeIn(500);$('.searchPut').focus();var seachTime=null;$('.search').mouseleave(function(){seachTime=setTimeout(function(){$('.search').fadeOut(500)},700);}).mouseover(function(){clearTimeout(seachTime);})}
function SetCaseListWidht(index){$('.js_check_width_list').each(function(){$(this).find('.indexCaseItem').each(function(i){if((i+1)%index==0&&i>0){$(this).addClass('no_nr')}else{$(this).removeClass('no_nr');}})})}
function SetCaseListWidht2(index){$('.indexGoldDesigner').each(function(){$(this).find('.indexCaseItem').each(function(i){if((i+1)%index==0&&i>0){$(this).addClass('no_nr')}else{$(this).removeClass('no_nr');}})})}
function SetNewsListWidth(index){$('.NewsList li').each(function(i){if((i+1)%index==0&&i>0){$(this).addClass('no_mr')}else{$(this).removeClass('no_mr');}})}
var js_check_width_list=0;var newsIndexPage=false;var menu_ul=false;var CaseDetail=false;var CaseDetailSet=0;function LoadPageSize(){setNav();var body_width=$('.wrap').eq(1).width();if(js_check_width_list==4&&body_width==980){SetCaseListWidht(3);return false;}
if(body_width<980){$('#headerTop').css('margin-bottom',0);}
if(body_width>=1200&&js_check_width_list==4){SetCaseListWidht(4);return false;}
if(body_width==640&&js_check_width_list==4){SetCaseListWidht(2);return false;}
if(body_width==980){SetCaseListWidht(4);SetCaseListWidht2(3);$('#navlist').show(0);menu_ul=false;}
if(body_width>=1200){SetCaseListWidht(5);SetCaseListWidht2(3);menu_ul=false;$('#navlist').show(0);}
if(body_width==640){SetCaseListWidht(3);SetCaseListWidht2(2);if(!menu_ul){$('#navlist').hide(0);}}
if(newsIndexPage){if(body_width==640){SetNewsListWidth(2);}
if(body_width==980){SetNewsListWidth(3);}
if(body_width>=1200){SetNewsListWidth(4);}}
if(CaseDetail){if(body_width<640){SetSrcollLList(2);CaseDetailSet=2;}
if(body_width==640){SetSrcollLList(3);CaseDetailSet=3;}
if(body_width==980){SetSrcollLList(2);CaseDetailSet=2;}
if(body_width==1200){SetSrcollLList(2);CaseDetailSet=2;}
if(body_width>1200){SetSrcollLList(3);CaseDetailSet=2;}}
if(SetMoreCasePage){if(body_width<=640){SetMoreCase(0,0);}
if(body_width==640){SetMoreCase(219,3);}
if(body_width==980){SetMoreCase(254,4);}
if(body_width==1200){SetMoreCase(247,5);}
if(body_width>1200){SetMoreCase(271,5);}}
if(SetMoreNewsPage){if(body_width<=640){SetMoreNews(body_width,1);}
if(body_width==640){SetMoreNews(336,2);}
if(body_width==980){SetMoreNews(336,4);}
if(body_width==1200){SetMoreNews(271,4);}
if(body_width>1200){SetMoreNews(346,4);}}
if(lpt_index){if(body_width>=640){showIndexBanner();}
if(body_width>979){$('#indexbannerWrap').height($('#indexbanner li.hover').find('img').eq(0).height()+116);}else{$('#indexbannerWrap').height($('#indexbanner li.hover').find('img').eq(0).height()+0);}
if(body_width>=640){$('#mrtj_2').hide(0)}else{$('#mrtj_2').show(0)}}
if(jylm_page){if(body_width<640){var td_w=body_width-$('.jylm_submit_box_left .td_left').eq(0).width()-30;$('.jylm_moblie_input_width').width(td_w);$('#city_select3').unbind('mouseover').click(function(){$(this).find('.city_box').fadeIn(50);})}else{$('.jylm_moblie_input_width').removeAttr('style');}}}
function show_moblie_menu(){menu_ul=true;if($('.navlist').css('display')=="block"){$('.navlist').hide(500)}else{$('.navlist').show(500,function(){menu_ul=true;});}}
function showMoreArea(){var obj=$('#select_area_box');if(obj.height()==35){obj.css("height",'auto')}else{obj.css("height",'35px')}}
var pj_stact=true;;function setPjFun(m,t,i,_this){if(!pj_stact){alert("您已经评价过了!");return false;}
var mid=m,tid=t,iid=i;$.post(DTPath+"ajax/setPJ.php",{mid:mid,tid:tid,iid:iid},function(date){if(date){pj_stact=false;alert("谢谢支持");var th=parseInt($(_this).find('font').html());$(_this).find('font').html(th+1);}})}
function GetAboutMenu(cityid,title){var temp_html='';$.getJSON(DTPath+"ajax/getAboutmenu.php",{cid:cityid,title:title},function(data){if(data==null||data==''){return false;}
$.each(data,function(idx,e){temp_html=e['content'];})
if(title=='公司简介'){$('.about_index_1').html(temp_html);}else{$('.about_contact').html(temp_html);}})}
function showAllCopn(){$("html,body").animate({scrollTop:0},200,function(){showOtherCp()});}
var SendSub_State=true;function SendSub(){if(!SendSub_State){alert('您已经提交过了！');}
if($('#SubName').val()==''||$('#SubName').val()=='您的姓名'){alert('请填写您的姓名');$('#SubName').focus();return false;}
if($('#SubTel').val()==''||$('#SubTel').val()=='联系电话'){alert('请填写您的电话号码');return false;$('#SubTel').focus();}
if($('#SubText').val()==''){alert('请填写内容');$('#SubText').focus();return false;}
var name=$('#SubName').val();var tel=$('#SubTel').val();var diqu=$('#SubArea_1').html()+','+$('#SubArea_2').html();var text=$('#SubText').val();var ip=$('#SubIP').html();var sid=0;if(sub_shejishi_id!=null){sid=sub_shejishi_id;}
$.post(DTPath+"ajax/setGuestbook.php",{title:"["+$('#OATitle').html()+"]",name:name,tel:tel,diqu:diqu,text:text,ip:ip,sid:sid},function(data){if(data){alert('提交成功，我们将会与您联系!');hidelyBox();if(sid!=0){var b=parseInt($('#renshu').html())
$('#renshu').html(b+1)}}})}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有兴趣的添加以下微信交流👇🏻👇🏻👇🏻