117. web前端 大学生期末作业 HTML5大气响应式建站网络科技公司网页 网页制作html5+css3+js
一、前言
HTML5大气响应式建站网络科技公司网页，响应式网页，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
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">
</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 class="member show992 clean"> <a href="#" class="login member-btn fl content-box text-center trans"><i></i>登录</a> <a href="#" class="try member-btn fl content-box text-center trans">注册账号</a> </div>-->
</div>
</nav>
<!--<div class="header-user fr"> <a href="#" class="login inline-block text-center border-box trans hide992" rel="nofollow"><i></i>登录</a> <a href="#" class="try inline-block text-center border-box trans hide992" rel="nofollow">注册账号</a> </div>-->
<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-0"> <a href="#" class="banner-button absolute text-center trans-1s"></a> <img src="" alt="" class="max-w100">
<div class="font font-0 text-center absolute nowrap trans-1s"><span class="trans-1s inline-block">模版 · 一样可以很精致</span></div>
<img class="img-0 img trans-1s absolute" src="" alt=""/> <img class="img-1 img trans-1s absolute" src="" alt=""/> <img class="img-2 img trans-1s absolute" src="" alt=""/> </div>-->
<div class="item relative inline-block text-center fz0 over item-1">
<!--<a class="banner-button absolute text-center trans-1s"></a>-->
<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">
<!--<a class="banner-button absolute text-center trans-1s"></a>-->
<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">
<!--<a class="banner-button absolute text-center trans-1s"></a>-->
<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">
......
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);
}
}*/
var label_obj={
input:'.label_input',
class:'on',
action:function(name){
var thisObj = this,
input = $(thisObj.input+'[name='+name+']');
input.each(function(){
var type = $(this).attr('type'),
label = $(this).parents('label');
$(this).is(':checked') ? label.addClass(thisObj.class) : label.removeClass(thisObj.class);
});
}
};
var Pop_obj={
createPop:function(content){
var Pop = '<div id="pop_form" style="display: none;">'+content+'<div class="cls_wrap"><div class="cls" οnclick="Pop_obj.closePop();"><img src="/images/images/ico-close.png" /></div></div></div>',
Mask = '<div id="mask" style="display: none;"></div>';
$('body').append(Pop+Mask);
$('#pop_form,#mask').fadeIn(300);
},
PopUp:function(para){
var thisObj = this;
$.get('/member/module/pop.php',para,function(content){
if(content){
thisObj.createPop(content);
}
});
},
closePop:function(){
$('#pop_form,#mask').fadeOut(300,function(){$('#pop_form,#mask').remove();});
}
};
function PreviewImg(Input,Img){
var Src = getObjectURL(Input.files[0]);
Img.prop('src',Src);
}
function getObjectURL(file){
var url = null;
if(window.createObjectURL!=undefined){
url = window.createObjectURL(file);
}else if(window.URL!=undefined){
url = window.URL.createObjectURL(file);
}else if(window.webkitURL!=undefined){
url = window.webkitURL.createObjectURL(file);
}
return url;
}
function slideSubMenu(obj){
var sub_menu=$('.'+obj.attr('data-sub'));
sub_menu.slideToggle('fast');
}
var SendCode = {
Opt: {
Type : 'Email',
Timer : 60,
Tips : '请正确填写手机号码！',
BtnTips : '{Timer}秒后重新发送', //{Timer}为倒计时变量
Path : '/ajax/send-code.php', //请求地址
SendBefore : null,
SendAfter : null,
TimerAfter : null
},
Switch : true,
set: {
Reg: [
/^[1][358][0-9]{9}$/, //电话
/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ //邮箱
],
Timer : '' //倒计时定制器
},
CountDown : function(Btn){ //倒计时
var BtnFont = Btn.val(),
thisObj = this,
T = thisObj.Opt.Timer;
Btn.val( thisObj.Opt.BtnTips.replace( '{Timer}' , thisObj.Opt.Timer ) );
thisObj.set.Timer = setInterval(function(){
if( T <= 1 ){ //倒计时结束
thisObj.Switch = true;
clearInterval( thisObj.set.Timer );
Btn.val( BtnFont );
}else{
T--;
Btn.val( thisObj.Opt.BtnTips.replace( '{Timer}' , T ) );
}
}, 1000);
},
changeMobile : function(Phone, Password, Action, Btn, Type){
var thisObj = this;
thisObj.Opt.Type = Type;
if( thisObj.Switch ){
switch(thisObj.Opt.Type){
case 'Phone':
PhoneNumber = Phone.val();
Password = Password.val();
Action = Action.val();
if( thisObj.set.Reg[0].test(PhoneNumber) ){
thisObj.Switch = false;
jQuery.post(thisObj.Opt.Path, {NewMobile:PhoneNumber, Password:Password, Action:Action}, function(Data){
thisObj.CountDown(Btn);
alert(Data.msg);
},'json');
}else{
alert(thisObj.Opt.Tips);
}
break;
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;
}
}
},
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;
}
}
}
};
......