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

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

2024-05-09 10:05:44 前端知识 前端哥 169 566 我要收藏

目录

一、前言

二、网页文件

三、网页效果

四、代码展示

1.HTML

2.CSS

3.JS

五、更多推荐


一、前言

HTML5大气响应式建站网络科技公司网页,响应式网页,供大家参考。


二、网页文件


三、网页效果

以下为网页正文(节选示例):


四、代码展示

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 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">
                <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>
                    <!-- <a href="#"​ class="item inline-block trans" cid="7" rel="nofollow">餐饮美食</a> 
                    <a href="#"​ class="item inline-block trans" cid="9" 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>
                            <!--<li><a href="#"​ cid="7" rel="nofollow">餐饮美食</a></li>
                            <li><a href="#"​ cid="9" 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);
    }    
}*/

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;
            }
        }
    }
};
 

......


五、更多推荐

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

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

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


转载请注明出处或者链接地址:https://www.qianduange.cn//article/7649.html
标签
bootstrap
评论
会员中心 联系我 留言建议 回顶部
复制成功!