162.大学生HTML5期末大作业 —【宽屏的音响音频设备公司网页】 Web前端网页制作 html5+css3+js
本实例应用html5+css3+js： 导航栏、三级菜单、图片轮翻效果、鼠标滑动特效、悬浮菜单、背景特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
目录
一、更多推荐
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html5+css3+js： 导航栏、三级菜单、图片轮翻效果、鼠标滑动特效、悬浮菜单、背景特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含6个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>荷创-首页</title>
<meta name="keywords" content="荷创-首页">
<meta name="description" content="荷创-首页">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.12.1.min.js" ></script>
<script src="js/jquery.lazyload.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
<script type="text/javascript" src="js/tab.js" ></script>
<script src="js/jquery.tabs.js"></script>
</head>
<body>
<div class="w-all">
<div class="w-main top">
<div class="fl"><a href=""><img src="img/indexlogo.png" alt="" /></a></div>
<div class="fl toptel">
<div class="fl"><img src="img/tellogo.png" alt=""/></div>
<div class="fl telnum">
<p class="fs-14">全国服务热线</p>
<p class="fs-18 font-b">400-0531-628</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="w-all nag">
<div class="w-main">
<ul class="nav">
<li>
<a href="index.html" class="on">首页</a>
</li>
<li>
<a href="music.html">会议音响</a>
</li>
<li>
<a href="#">公共广播</a>
</li>
<li>
<a href="#">解决方案</a>
</li>
<li>
<a href="case.html">工程案例</a>
</li>
<li>
<a href="news.html">公司新闻</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
</div>
<div class="w-all">
<div id="slideBoxmo" class="slideBoxmo">
<div class="bd">
<ul>
<li><a href=""><img src="img/banner.png" alt="" /></a></li>
<li><a href=""><img src="img/banner.png" alt="" /></a></li>
</ul>
</div>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script type="text/javascript">
jQuery(".slideBoxmo").slide({mainCell:".bd ul",effect:"leftLoop",autoPlay:true,delayTime:700});
</script>
</div>
<!--搜索-->
<div class="w-all seach">
<div class="w-main">
<p class="fs-14 fc99 fl one_hidden">热搜产品：TZ-10同轴音箱、JRX125、P7000S、CROWN_CNI_系列、CROWN_XLS_系列、A10等热搜产品</p>
<form>
<div class="fl topseacher">
<input type="text" class="fs-14 fc99 nrinput" placeholder="搜索" />
<button type="submit" class="topsubmit curpter"> </button>
</div>
</form>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/*css初始值*/
body,div,span,a,ul,li,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,input,button,textarea,p,header,nav,select,option,ol,img{ border: 0px; margin: 0; padding: 0; font-family: "Microsoft YaHei";}
ul,li{ list-style: none;}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
a{ text-decoration: none; border: 0px;}
input,textarea{ border: 0px;}
img,select,option{ border: 0px;}
.fl{ float: left;}
.fr{ float: right;}
.clear{ clear: both;}
.dsbnone{ display: none;}
.dsblock{ display: block;}
.dsinline{ display:inline;}
.ovhidden{ overflow: hidden;}
.tx-ind{ text-indent: -9999px;}
.ftf-s{ font-family: "宋体";}
/*鼠标样式*/
.curpter{ cursor: pointer;}
/*文字溢出隐藏 start*/
.one_hidden{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.tw_hidden{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.tr_hidden{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.fu_hidden{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}
.fw_hidden{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;}
/*文字溢出隐藏 end*/
/*文本居中*/
.text-l{ text-align: left;}
.text-c{ text-align: center;}
.text-r{ text-align: right;}
/*margin*/
.m-auto{ margin: 0 auto;}
/*字体的粗细*/
.font-b1{ font-weight: 100;}
.font-b9{ font-weight: 900;}
.font-b{font-weight: bold;}
/*字体的大小*/
.fs-8{ font-size:8px;}
.fs-10{ font-size:10px;}
.fs-12{ font-size:12px;}
.fs-13{ font-size:13px;}
.fs-14{ font-size:14px;}
.fs-15{ font-size: 15px;}
.fs-16{ font-size: 16px;}
.fs-17{ font-size: 17.5px;}
.fs-18{ font-size: 18px;}
.fs-20{ font-size: 20px;}
.fs-21{ font-size: 21px;}
.fs-22{ font-size: 22px;}
.fs-24{ font-size: 24px;}
.fs-26{ font-size: 26px;}
.fs-28{ font-size: 28px;}
.fs-30{ font-size: 30px;}
.fs-37{ font-size: 37px;}
/*字体颜色*/
.fc99{color: #999999;}/*浅灰色*/
.fc2{color: #666666;}/*浅灰色2*/
.fc3{color: #000000;}
/*width*/
.w-all{ width:100%;min-width: 1200px;}
.w-main{ width: 1200px;margin: 0 auto;}
.h-30{width: 100%;height: 30px;}
.h-40{width: 100%;height: 40px;}
.h-80{width: 100%;height: 80px;}
.h-100{width: 100%;height: 100px;}
select::-ms-expand { display: none; }
select {
width: 273px;
height: 25px;
border: none;
outline: none;
/*将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-ms-appearance:none;
background: url("../img/arrow.png") no-repeat scroll right 10% center transparent;
padding-left: 30px;
background-color: #dfdfdf;
}
body{overflow-x:hidden;}
/*top*/
.top{padding-top: 27px;}
.top .toptel{margin-top: 12px;margin-left: 400px;}
.top .toptel .telnum{padding-left: 15px;}
.nag{margin-top: 27px;background: url(../img/naglogo.png) no-repeat;height: 61px;}
.nag .nav li{height: 35px;width: 150px;float: left;margin-top: 14px;}
.nag .nav li a{line-height: 35px;width: 150px;display: inline-block;text-align: center;font-size: 15px;color: #ffffff;}
.nag .nav .on{background-color: #ffffff;border-radius: 5px;color: #4a4a4a;}
.nag .nav li a:hover{background-color: #ffffff;border-radius: 5px;color: #4a4a4a;}
/*footer*/
.footernav{height: 80px;background-color: #1e2021;color: #ffffff;border-bottom:solid #535353 1px;}
...
3.JS
代码如下（节选示例）：
(function($){
$.fn.lazyload=function(options){
var settings = {
threshold:0,
failurelimit:0,
event:"scroll",
effect:"show",
container:window
};
if(options){
$.extend(settings,options);
}
var elements=this;
if("scroll"==settings.event){
$(settings.container).bind("scroll", function(event){
var counter=0;
elements.each(function(){
if($.abovethetop(this,settings)||$.leftofbegin(this,settings))
{}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){
$(this).trigger("appear");
}else{
if(counter++ > settings.failurelimit){
return false;
}
}
});
var temp = $.grep(elements,function(element){
return !element.loaded;
});
elements = $(temp);
});
}
this.each(function(){
var self=this;
if(undefined==$(self).attr("original")){
$(self).attr("original", $(self).attr("src"));
}if("scroll" != settings.event||undefined == $(self).attr("src")||"" == $(self).attr("src")||settings.placeholder == $(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){
if(settings.placeholder){
$(self).attr("src", settings.placeholder);}else{$(self).removeAttr("src");
}
self.loaded=false;
}else{
self.loaded=true;
}
$(self).one("appear", function(){
if(!this.loaded || 1 == 1){
$("<img />").bind("load", function(){
$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
self.loaded=true;
}).attr("src", $(self).attr("original"));
};
});
if("scroll"!=settings.event){
$(self).bind(settings.event, function(event){
if(!self.loaded){
$(self).trigger("appear");
}
}
);}
});
$(settings.container).trigger(settings.event);
return this;
};
$.belowthefold=function(element,settings){
if(settings.container === undefined || settings.container === window){
var fold = $(window).height() + $(window).scrollTop();
}else{
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold=function(element,settings){
if(settings.container === undefined || settings.container === window){
var fold = $(window).width() + $(window).scrollLeft();
}else{
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop=function(element,settings){
if(settings.container === undefined || settings.container === window){
var fold = $(window).scrollTop();
}else{
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin=function(element,settings){
if(settings.container === undefined || settings.container === window){
var fold = $(window).scrollLeft();
}else{
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
...
六、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
28
0- 0
已为社区贡献4条内容
所有评论(0)