本实例应用html+css+js，应用 Div、导航条、图片轮翻效果、鼠标滑动特效、悬浮菜单、留言表单、背景特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。响应式布局，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

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

四、网页效果

提示：以下是本篇文章正文内容，下面案例供参考:

五、代码展示

1.html

</head>
<body>

<header>
<div class="navbar-default" >
   <div class="container">
       <div class="logo">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span class="icon-bar"> </span>
               <span class="icon-bar"> </span>
               <span class="icon-bar"> </span>
           </button>
           <h1><a href="index.html"></a></h1>
       </div>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="navbar-nav">
               <li><a href="index.html" class="now">首页</a></li>
               <li><a href="Ios.html">IOS开发</a></li>
               <li><a href="Android.html">Android开发</a></li>
<li><a href="weixin.html">微信开发</a></li>
               <li><a href="plan.html">解决方案</a></li>
               <li><a href="news.html">新闻中心</a></li>
               <li><a href="case.html">成功案例</a></li>
           </ul>
           <div class="clearfix"> </div>
       </div>
       <script src="js/menu_jquery.js"></script>
   </div>
   <div class="clearfix"> </div>
</div>
<div class="headerbg"></div>
</header>

...

2.CSS

代码如下（节选示例）：

html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}

...

3.JS

代码如下（节选示例）：

/*
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
*
* Uses the built In easIng capabilities added In jQuery 1.1
* to offer multiple easIng options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/

// t: current time, b: begInnIng value, c: change In value, d: duration

jQuery.extend( jQuery.easing,
{
   easeInQuad: function (x, t, b, c, d) {
       return c*(t/=d)*t + b;
   },
   easeOutQuad: function (x, t, b, c, d) {
       return -c *(t/=d)*(t-2) + b;
   },
   easeInOutQuad: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t + b;
       return -c/2 * ((--t)*(t-2) - 1) + b;
   },
   easeInCubic: function (x, t, b, c, d) {
       return c*(t/=d)*t*t + b;
   },
   easeOutCubic: function (x, t, b, c, d) {
       return c*((t=t/d-1)*t*t + 1) + b;
   },
   easeInOutCubic: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t*t + b;
       return c/2*((t-=2)*t*t + 2) + b;
   },
   easeInQuart: function (x, t, b, c, d) {
       return c*(t/=d)*t*t*t + b;
   },
   easeOutQuart: function (x, t, b, c, d) {
       return -c * ((t=t/d-1)*t*t*t - 1) + b;
   },
   easeInOutQuart: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
       return -c/2 * ((t-=2)*t*t*t - 2) + b;
   },
   easeInQuint: function (x, t, b, c, d) {
       return c*(t/=d)*t*t*t*t + b;
   },
   easeOutQuint: function (x, t, b, c, d) {
       return c*((t=t/d-1)*t*t*t*t + 1) + b;
   },
   easeInOutQuint: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
       return c/2*((t-=2)*t*t*t*t + 2) + b;
   },
   easeInSine: function (x, t, b, c, d) {
       return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
   },
   easeOutSine: function (x, t, b, c, d) {
       return c * Math.sin(t/d * (Math.PI/2)) + b;
   },
   easeInOutSine: function (x, t, b, c, d) {
       return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
   },
   easeInExpo: function (x, t, b, c, d) {
       return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
   },
   easeOutExpo: function (x, t, b, c, d) {
       return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
   },
   easeInOutExpo: function (x, t, b, c, d) {
       if (t==0) return b;
       if (t==d) return b+c;
       if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
       return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
   },
   easeInCirc: function (x, t, b, c, d) {
       return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
   },
   easeOutCirc: function (x, t, b, c, d) {
       return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
   },
   easeInOutCirc: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
       return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
   },
   easeInElastic: function (x, t, b, c, d) {
       var s=1.70158;var p=0;var a=c;
       if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
       if (a < Math.abs(c)) { a=c; var s=p/4; }
       else var s = p/(2*Math.PI) * Math.asin (c/a);
       return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
   },
   easeOutElastic: function (x, t, b, c, d) {
       var s=1.70158;var p=0;var a=c;
       if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
       if (a < Math.abs(c)) { a=c; var s=p/4; }
       else var s = p/(2*Math.PI) * Math.asin (c/a);
       return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
   },
   easeInOutElastic: function (x, t, b, c, d) {
       var s=1.70158;var p=0;var a=c;
       if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
       if (a < Math.abs(c)) { a=c; var s=p/4; }
       else var s = p/(2*Math.PI) * Math.asin (c/a);
       if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
       return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
   },

...

六、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

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

2.使用方便

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

3.整体性好

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

4.形象突出

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

5.交互式强

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

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

仙女网页设计-CSDN博客

关注作者，点赞收藏博文，获取完整源码，Thanks!

上一篇： HTML5新特性总结

下一篇： 139.大学生HTM