128. 大学生期末作业 简洁创意的广告网络营销公司网页模板 web前端网页制作html+css+js

一、前言

简洁创意的广告网络营销公司网页模板,应用html+css+js,设置图片轮翻效果、隐藏菜单、点击事件、留言表单等,供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板,DW网页成品源代码等,2000+套Web案例源码,优质文章,关注作者获取更多源码,点赞收藏博文,您的支持是我创作的动力!3Q!


二、网页文件


三、网页效果

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


四、代码展示

1.HTML

代码如下(节选示例):

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高端大气的互联网网络营销企业网站模板</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/jquery-min-1.7.js"></script>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript" src="js/jquery.kinMaxShow-1.0.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/validator.js"></script>
<script type="text/javascript" src="js/jquery.cookies.js"></script>
<script>
    $(function () {
        if (jQuery.cookie("the_cookie") != "the_value") {
            $(".mengban").show();
            $(".mengban").click(function () {
                $(".mengban").hide();
                jQuery.cookie('the_cookie', 'the_value', { expires: 1, path: '/' });
            })
        }
    })

    $(window).scroll(function () {
        if ($(window).scrollTop() > 0) {
            $(".mengban").hide();
        }
    });
            
</script>
<style>
.mengban{ background:#000; width:100%; height:100%; position:fixed; z-index:99999999;filter:alpha(opacity=90);opacity:0.9}
.mengban .mengban1{ position:absolute; top:20px; left:5%}
.mengban .mengban2{ position:absolute; top:0px; right:5%}
.mengban .mengban3{ position:absolute; top:92px; left:5%}
.mengban .mengban4{ position:absolute; top:92px; right:5%}
</style>
</head>
<body>
<div class="mengban" style="display:none">
    <div class="mengban1"><img src="images/meng3.png" width="148" height="21"></div>
    <div class="mengban2"><img src="images/meng4.png" width="154" height="56"></div>
    <div class="mengban3"><img src="images/meng1.png" width="290" height="270"></div>
    <div class="mengban4"><img src="images/meng2.png" width="301" height="282"></div>
</div>
<div class="top">
        <div class="top_a">
            <a href="index.html" class="logo"><img src="images/_20140418135147890.jpg" alt="" width="148" height="21"></a>
        </div>
        <div class="top_b">
             <a href="javascript:;" class="top_bb"></a>
             <div class="aaa_cz">
            <div class="xj_nav">
                    <a href="solution.html">解决方案</a>
                    <a href="service.html">服务专区</a>
                    <a href="knowledge.html">知识学院</a>
                    <a href="case.html">客户案例</a>
                    <a href="product.html">产品中心</a>
                  </div>
            </div>
          <div class="top_ba">Memu</div>
        </div>
    </div>   
<div class="banner">
        <div class="intro" id="mangoShow">
        <div class="wrap clearFix">
            <div class="cz_bannn" style="background:url(images/banner_aa.jpg) no-repeat center top #ffa800">
            </div>    
            <div>
             <img src="images/cz_ban_a.png" class="sub_1_1" >
             <img src="images/cz_ban_b.png" class="sub_1_2">
             <img src="images/cz_ban_c.png" class="sub_1_3" >
             <img src="images/cz_ban_d.png" class="sub_1_4">
             <a href="javascript:;scheme/"><img src="images/czx1.png" class="sub_1_5"></a>

......

2.CSS

代码如下(节选示例):

html{overflow-y:scroll;_background-image:url(../images/about:blank);_background-attachment:fixed;_overflow-x:hidden;overflow-x:hidden;}    
body{overflow-x: hidden;min-width:1100px;}
*{
    padding: 0;
    margin: 0;
    font-size:12px;
    color: #666666;
    font-family: "微软雅黑";
}

input,button,select,textarea{outline:none}
li{
    list-style:none;
}
a{
    text-decoration:none;
    color:#666666
}
a:hover{
    color:#3a3434
    }
img{
    border:0}

.collb_lb p {
    line-height: 25px;
    margin: 15px 10px;
}
.qqkefu{
    position: fixed;
    bottom:40%;
    _position: absolute;
   _top: expression(eval(document.documentElement.scrollTop + 365));
    z-index: 20;
    right:0;
    width:45px
    }
.qqkefu ul li{
    height:45px;
    margin-bottom:1px;
    float:right;
    background:#1b1b1d;
    line-height:35px;
    font-size:14px;
    cursor:pointer;
    position:relative
}
.qqkefu ul li a{
    color:#fff;
    }
.qqkefu ul li.qq_cza{
    overflow:hidden
    }
.qqkefu ul li:hover{
    background:#c9112c;
    }
.qqkefu ul li.top{
    color:#1c1c1c;
    font-weight:800;
    text-align:center;
    line-height:45px;
    background:#ffffff;
    position:relative;
    width:45px;
    cursor:pointer
    }
.qqkefu ul li.top span{
    position:absolute;
    display:block;
    left:0;
    top:-5px;
    height:5px;
    width:45px;
    background:url(../images/czx2.png) no-repeat center;}
.qqkefu ul li.top:hover{
    background:#CBCBCB}
.qqkefu ul li.top:hover span{
    background:url(../images/czx2_hover.png) no-repeat center}
.qqkefu ul li b{
    width:45px;
    height:45px;
    display:block;
    overflow:hidden;
    float:left}
.qqkefu ul li b.a{
    background:url(../images/czx4.png) no-repeat center center;
}

......

3.JS

代码如下(节选示例):

/*
 * jQuery Form Plugin
 * @requires jQuery v1.1 or later
 *
 * Examples at: http://malsup.com/jquery/form/
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.form.js 3028 2007-08-31 13:37:36Z joern.zaefferer $
 */
 (function($) {
/**
 * ajaxSubmit() provides a mechanism for submitting an HTML form using AJAX.
 *
 * ajaxSubmit accepts a single argument which can be either a success callback function
 * or an options Object.  If a function is provided it will be invoked upon successful
 * completion of the submit and will be passed the response from the server.
 * If an options Object is provided, the following attributes are supported:
 *
 *  target:   Identifies the element(s) in the page to be updated with the server response.
 *            This value may be specified as a jQuery selection string, a jQuery object,
 *            or a DOM element.
 *            default value: null
 *
 *  url:      URL to which the form data will be submitted.
 *            default value: value of form's 'action' attribute
 *
 *  type:     The method in which the form data should be submitted, 'GET' or 'POST'.
 *            default value: value of form's 'method' attribute (or 'GET' if none found)
 *
 *  data:     Additional data to add to the request, specified as key/value pairs (see $.ajax).
 *
 *  beforeSubmit:  Callback method to be invoked before the form is submitted.
 *            default value: null

......