117. web前端网页制作 HTML5大气响应式建站网络科技公司网页设计实例 大学生期末大作业 html5 css3 js

……

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 = ‘

‘+content+’

‘,
            Mask = ‘

‘;
        $(‘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                 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;
            }
        }
    }
};
 

……

五、更多推荐

【关注作者 | 获取更多源码（2000+ 个网页源码）| 优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！

Web 前端网页制作、整站模板、3D 炫酷效果、图片展示、文字效果、大学生毕业 HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!

更多优质博客文章、网页模板点击以下链接查阅：http://angella.blog.csdn.net。