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

三、网页文件

四、网页效果

以下为网页正文（节选示例）：

五、代码展示

1.HTML

代码如下（节选示例）：

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5高端大气响应式网络科技公司网站模板</title>
<meta name="keywords" content="HTML5高端大气响应式网络科技公司网站模板" />
<meta name="description" content="HTML5高端大气响应式网络科技公司网站模板下载。" />
<meta name="author" content="js代码" />
<meta name="copyright" content="js代码" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"
/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/animate.min.css" rel="stylesheet" type="text/css" />
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/lib.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js">
</script>
<script src="js/global.js">
</script>
<script src="js/cn.js">
</script>
<script src="js/checkform.js">
</script>
<script src="js/wow.js">
</script>
<script src="js/imagesloaded.min.js">
</script>
<script src="js/countup.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
jQuery(window).scrollTop(0);
jQuery('html,body').scrollTop(0);
new WOW().init({
mobile: false
});

$(function() {
setTimeout(function() {
$('#body').show();
},
500);
})
</script>
</head>

<body>
<header class="trans border-box ">
<div class="wrap clean relative">
<div id="logo" class="fl relative trans">
<a href="index.html" class="relative trans">
<img src="picture/logo.png" alt="" class="max-w100 max-h100 trans">
</a>
</div>
<nav class="absolute fz0 trans border-box stopP ">
<div class="bd over clean">
<div class="title clean show992">
<a href="#" class="btn-close trans middle fr" onClick="ActionMenu('Close');">
</a>
</div>
<div class="nav-item fl text-center trans">
<a href="index.html" class='on trans'>
首页
</a>
</div>
<div class="nav-item fl text-center trans">
<a href="about.html">
关于
</a>
</div>
<div class="nav-item fl text-center trans">
<a href="product.html">
产品
</a>
</div>
<div class="nav-item fl text-center trans">
<a href="case.html">
案例
</a>
</div>
<div class="nav-item fl text-center trans">
<a href="price.html">
价格
</a>
</div>
<div class="nav-item fl text-center trans">
<a href="news.html">
新闻
</a>
</div>
<div class="nav-item fl text-center trans">
<a href="contact.html">
联系
</a>
</div>

</div>
</nav>

<div class="menu-button fr stopP show992 trans">
<a href="#" class="fa fa-align-justify trans" rel="nofollow"
οnclick="ActionMenu();">
</a>
</div>
</div>
</header>
<div id="header-blank">
</div>
<div id="body" class="trans">
<div id="banner" class="relative hide992">
<div class="bd over">
<div class="bar relative fz0 nowrap">

<div class="item relative inline-block text-center fz0 over item-1">

<img src="picture/1-1f92z915060-l.jpg" alt="" class="max-w100">
<a class="absolute">
</a>
</div>
<div class="item relative inline-block text-center fz0 over item-1">

<img src="picture/1-1f92z915190-l.jpg" alt="" class="max-w100">
<a class="absolute">
</a>
</div>
<div class="item relative inline-block text-center fz0 over item-1">

<img src="picture/1-1f929111s30-l.jpg" alt="" class="max-w100">
<a class="absolute">
</a>
</div>
</div>
</div>
</div>
<div id="small-banner" class="relative show992">
<div class="bd over">
<div class="bar relative fz0 nowrap">
</div>
</div>
</div>
<div class="blank25">
</div>
<div id="products" class="index">
<div class="index-title text-center wow fadeInUp">
产品
</div>
<div class="index-brief text-center wow fadeInUp">
20年建站经验 + 1000家企业客户 + 高端建站团队
</div>
<div class="category-list text-center fz0 hide992 wow fadeInUp">
<a href="#" class="item inline-block trans" cid="6"
rel="nofollow">
企业集团
</a>
<a href="#" class="item inline-block trans" cid="6"
rel="nofollow">
服饰珠宝
</a>
<a href="#" class="item inline-block trans" cid="6"
rel="nofollow">
家居房产
</a>
<a href="#" class="item inline-block trans" cid="6"
rel="nofollow">
婚纱摄影
</a>
<a href="#" class="item inline-block trans" cid="6"
rel="nofollow">
餐饮美食
</a>
<a href="#" class="item inline-block trans"
cid="6" rel="nofollow">
美容美妆
</a>
<a href="#" class="item inline-block trans" cid="6"
rel="nofollow">
设计建筑
</a>

</div>
<div class="category-list text-center show992 wow fadeInUp">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
全部产品
<span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#" cid="6" rel="nofollow">
企业集团
</a>
</li>
<li>
<a href="#" cid="6" rel="nofollow">
服饰珠宝
</a>
</li>
<li>
<a href="#" cid="6" rel="nofollow">
家居房产
</a>
</li>
<li>
<a href="#" cid="6" rel="nofollow">
婚纱摄影
</a>
</li>
<li>
<a href="#" cid="6" rel="nofollow">
餐饮美食
</a>
</li>
<li>
<a href="#" cid="6" rel="nofollow">
美容美妆
</a>
</li>
<li>
<a href="#" cid="6" rel="nofollow">
设计建筑
</a>
</li>

</ul>
</div>
</div>

......

2.CSS

代码如下（节选示例）：

/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.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: 700
}
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
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
height:auto
}
input[type=search] {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-appearance: textfield
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
   padding: .35em .625em .75em;
   margin: 0 2px;
   border: 1px solid silver
}
legend {
   padding: 0;
   border: 0
}
textarea {
   overflow: auto
}
optgroup {
   font-weight: 700
}
table {
   border-spacing: 0;
   border-collapse: collapse
}
td, th {
   padding: 0
}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
*, :after, :before {
   color: #000!important;
   text-shadow: none!important;
   background: 0 0!important;
   -webkit-box-shadow: none!important;
   box-shadow: none!important
}
a, a:visited {
   text-decoration: underline
}
a[href]:after {
   content: " (" attr(href) ")"
}
abbr[title]:after {
   content: " (" attr(title) ")"
}
a[href^="javascript:"]:after, a[href^="#"]:after {
   content: ""
}
blockquote, pre {
   border: 1px solid #999;
   page-break-inside: avoid
}
thead {
   display: table-header-group
}
img, tr {
   page-break-inside: avoid
}
img {
   max-width: 100%!important
}
h2, h3, p {
   orphans: 3;
   widows: 3
}
h2, h3 {
   page-break-after: avoid
}
.navbar {
   display: none
}
.btn>.caret, .dropup>.btn>.caret {
   border-top-color: #000!important
}
.label {
   border: 1px solid #000
}
.table {
   border-collapse: collapse!important
}
.table td, .table th {
   background-color: #fff!important
}
.table-bordered td, .table-bordered th {
   border: 1px solid #ddd!important
}
}
@font-face {
   font-family: 'Glyphicons Halflings';
   src: url(../fonts/glyphicons-halflings-regular.eot);
   src: url(../fonts/glyphicons-halflings-regular.eot) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}
.glyphicon {
   position: relative;
   top: 1px;
   display: inline-block;
   font-family: 'Glyphicons Halflings';
   font-style: normal;
   font-weight: 400;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.glyphicon-asterisk:before {
   content: "\2a"
}
.glyphicon-plus:before {
   content: "\2b"
}
.glyphicon-eur:before, .glyphicon-euro:before {
   content: "\20ac"
}
.glyphicon-minus:before {
   content: "\2212"
}
.glyphicon-cloud:before {
   content: "\2601"
}
.glyphicon-envelope:before {
   content: "\2709"
}
.glyphicon-pencil:before {
   content: "\270f"
}

......

3.JS

代码如下（节选示例）：

// JavaScript Document

/*var member_obj={
   main_init:function(){
       var h=$(window).height()-$('#member_header').height();
       $('#member_cont, #member_menu').height(h);
   }
}*/

function PreviewImg(Input,Img){
var Src = getObjectURL(Input.files[0]);
Img.prop('src',Src);
}

function slideSubMenu(obj){
   var sub_menu=$('.'+obj.attr('data-sub'));
   sub_menu.slideToggle('fast');
}

break;
}
}
},
changeEmail : function(Email, Password, Action, Btn, Type){
var thisObj = this;
thisObj.Opt.Type = Type;
if( thisObj.Switch ){
switch(thisObj.Opt.Type){
               case 'Email':
                   Email = Email.val();
                   Password = Password.val();
                   Action = Action.val();
                   if( thisObj.set.Reg[1].test(Email) ){
thisObj.Switch = false;
jQuery.post(thisObj.Opt.Path, {NewEmail:Email, Password:Password, Action:Action}, function(Data){
thisObj.CountDown(Btn);
                           alert(Data.msg);
},'json');
}else{
alert(thisObj.Opt.Tips);
}
break;
default:

break;
}
}
},
getVerify : function(Phone, Action, Btn, Type){
var thisObj = this;
thisObj.Opt.Type = Type;
if( thisObj.Switch ){
switch(thisObj.Opt.Type){
case 'Apply':
                   PhoneNumber = Phone.val();
                   Action = Action.val();
if( thisObj.set.Reg[0].test(PhoneNumber) ){
thisObj.Switch = false;
jQuery.post(thisObj.Opt.Path, {Mobile:PhoneNumber, Action:Action}, function(Data){
thisObj.CountDown(Btn);
                           alert(Data.msg);
},'json');
}else{
alert(thisObj.Opt.Tips);
}
break;
default:

break;
}
}
},
   createAccount : function(Phone, Action, Btn, Type){
       var thisObj = this;
thisObj.Opt.Type = Type;
if( thisObj.Switch ){
switch(thisObj.Opt.Type){
case 'Create':
                   PhoneNumber = Phone.val();
                   Action = Action.val();
if( thisObj.set.Reg[0].test(PhoneNumber) ){
thisObj.Switch = false;
jQuery.post(thisObj.Opt.Path, {Mobile:PhoneNumber, Action:Action}, function(Data){
thisObj.CountDown(Btn);
                           alert(Data.msg);
},'json');
}else{
alert(thisObj.Opt.Tips);
}
break;
default:

break;
}
}
}
};

......

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

仙女网页设计-CSDN博客

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

上一篇： CSS_定位_网页布

下一篇：第七章利用CSS和