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
......