393.大学生HTML期末大作业 —【宽屏大气的推广科技网站(5页)】 Web前端网页制作 html5+css3+js
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3+js： 导航菜单、图片轮翻、鼠标滑动特效、图片飞入效果等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含5个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html5
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>云地推－专业的地推服务商</title>
<meta content="青团社,云地推,地推," name="Keywords">
<meta name="description" content="云地推是专业、高效的地推服务商，专为企业提供地面推广服务，帮助企业获取有效的用户，提高订单数据。云地推为企业提供方案策划、人员招聘、资源整合、落地执行、效果反馈一整套地推流程，并按照效果收费。云地推，即插即用，按量付费，一秒钟落地一个城市！">
<link href="css/jquery.slidebox.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/clound.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/footer.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/join_us.css" rel="stylesheet" type="text/css">
<link href="css/lianxiwomen.css" rel="stylesheet" type="text/css">
<link href="css/shizhananli.css" rel="stylesheet" type="text/css">
<link href="css/woyaotuiguang.css" rel="stylesheet" type="text/css">
<link href="css/xinchoufuli.css" rel="stylesheet" type="text/css">
<link href="css/yuangongfengcai.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/promise.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/cookies.js"></script>
<script type="text/javascript" src="js/routerutil.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/animat.js" type="text/javascript" charset="utf-8"></script>
<script src="js/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/chinamapconfig.js" type="text/javascript" charset="utf-8"></script>
<script src="js/map-min.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/ajaxpack.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/join_us.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.slidebox.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.superslide2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?c3a498c27c2d383df3db9827d1a2b1f2";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<script type='text/javascript'>
(function(m, ei, q, i, a, j, s) {
m[a] = m[a] || function() {
(m[a].a = m[a].a || []).push(arguments)
};
j = ei.createElement(q),
s = ei.getElementsByTagName(q)[0];
j.async = true;
j.charset = 'UTF-8';
j.src = i + '?v=' + new Date().getUTCDate();
s.parentNode.insertBefore(j, s);
})(window, document, 'script', '//eco-api.meiqia.com/dist/meiqia.js', '_MEIQIA');
_MEIQIA('entId', 10836);
</script>
</body>
</html>
...
2.CSS3
代码如下（节选示例）：
@charset "utf-8";
*{
margin:0;
padding:0;
list-style-type:none;
}
a,img{
border:0;
}
/*课程介绍 轮播*/
.friend{
height:220px;
margin:0 auto;
overflow:hidden;
width:1280px;
}
.mr_frbox{
height:220px;
padding:24px 0px 0px;
}
.mr_frBtnL{
cursor:pointer;
display:inline;
float:left;
height:52px;
margin:52px 10px 0 0;
width:26px;
}
.mr_frUl{
float:left;
height:152px;
width:1047px;
margin-left:10px;
}
.mr_frBtnR{
float:right;
margin-top:52px;
cursor:pointer;
width:26px;
height:52px;
}
.mr_frUl ul li{
display:inline;
float:left;
width:239px;
height:152px;
overflow:hidden;
position:relative;
}
.mr_frUl ul li a img{
width:98%;
height:150px;
/*border: 1px solid #CECECE;*/
}
...
3.JS
代码如下（节选示例）：
!function(d,c){"object"==typeof module&&"object"==typeof module.exports?module.exports=d.document?c(d,!0):function(b){if(!b.document){throw new Error("jQuery requires a window with a document")}return c(b)}:c(d)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l="1.11.1",m=function(a,b){return new m.fn.init(a,b)},n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,o=/^-ms-/,p=/-([\da-z])/gi,q=function(a,b){return b.toUpperCase()};m.fn=m.prototype={jquery:l,constructor:m,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=m.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return m.each(this,a,b)},map:function(a){return this.pushStack(m.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},m.extend=m.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||m.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++){if(null!=(e=arguments[h])){for(d in e){a=g[d],c=e[d],g!==c&&(j&&c&&(m.isPlainObject(c)||(b=m.isArray(c)))?(b?(b=!1,f=a&&m.isArray(a)?a:[]):f=a&&m.isPlainObject(a)?a:{},g[d]=m.extend(j,f,c)):void 0!==c&&(g[d]=c))}}}return g},m.extend({expando:"jQuery"+(l+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===m.type(a)},isArray:Array.isArray||function(a){return"array"===m.type(a)},isWindow:function(a){return null!=a&&a==a.window},isNumeric:function(a){return !m.isArray(a)&&a-parseFloat(a)>=0},isEmptyObject:function(a){var b;for(b in a){return !1}return !0},isPlainObject:function(a){var b;if(!a||"object"!==m.type(a)||a.nodeType||m.isWindow(a)){return !1}try{if(a.constructor&&!j.call(a,"constructor")&&!j.call(a.constructor.prototype,"isPrototypeOf")){return !1}}catch(c){return !1}if(k.ownLast){for(b in a){return j.call(a,b)}}for(b in a){}return void 0===b||j.call(a,b)},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(b){b&&m.trim(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(o,"ms-").replace(p,q)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=r(a);if(c){if(g){for(;f>e;e++){if(d=b.apply(a[e],c),d===!1){break}}}else{for(e in a){if(d=b.apply(a[e],c),d===!1){break}}}}else{if(g){for(;f>e;e++)
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、网页简介
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
12
0- 0
已为社区贡献4条内容
所有评论(0)