三更论坛技术版『 网站建设 』 → 节日网页飘红代码


  共有635人关注过本帖树形打印复制链接

主题:节日网页飘红代码

帅哥哟,离线,有人找我吗?
荞麦
  1楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39446 威望:0 精华:5 注册:2004-7-31 17:34:24
节日网页飘红代码  发帖心情 Post By:2018-2-13 17:46:28 [只看该作者]

1、将背景图比如2018cj.jpg,以及css文件比如chunjie.css,放在新建的chunjie目录里。

2、在网页<head>与</head>之间增加如下代码:

 

<!--春节飘红css-->

<link type="text/css" rel="stylesheet" href="chunjie/chunjie.css"/>
<script language="javascript">function g(id){return document.getElementById?document.getElementById(id):null;}</script>

<!--end-->

 

3、在</head>的下面,增加如下代码:


<!--首页春节飘红广告-->


<body class="AyStyle">
<div id="toolbar" style="height:85px;"></div>

<!--
<div id="clStyle" title="关闭背景"></div>
-->

<script language="javascript" type="text/javascript">

g("clStyle").onclick = function(){
 document.body.className = "";
 g("toolbar").style.display = "none";
 this.style.display = "none";
};
g("clStyle").onmouseover = function(){this.className = "hover"};
g("clStyle").onmouseout = function(){this.className = ""};

</script>

</body>

 

<!--结束-->

 

4、chunjie.css文件内容如下(复制到记事本里面保存即可):

 

@charset "utf-8";
body {
 margin:0;
}
#layout {
 width:950px;
 margin:0 auto;
 text-align:center;
}

 

/*关闭按钮位置设置*/

#clStyle {
 position:absolute;
 top:70px;
 right:200px;
 display:block;
 height:43px;
 width:18px;
 overflow:hidden;
 background:url(close.gif) no-repeat 0 0;
 cursor:pointer;
}
#clStyle.hover {
 background-position:-50px 0;
}
.AyStyle {
 background: url(2018cj.jpg) no-repeat center top #fff;
}
p, p a {

/*
 font-size:50px;
*/

 color:#666;
}
.demo_menu {
 font-size:14px;
 text-align:center;
 margin:10px 0 0 0;
 color:#999;
 line-height:180%;
}
.demo_menu b {
 color:#333;
}
.demo_menu a, .demo_menu a:visited {
 color:#F00;
 font-size:14px;
}
.demo_menu a:hover {
 color:#090;
 font-size:14px;
}

 



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部
帅哥哟,离线,有人找我吗?
荞麦
  2楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39446 威望:0 精华:5 注册:2004-7-31 17:34:24
  发帖心情 Post By:2018-2-13 17:54:14 [只看该作者]

效果


图片点击可在新窗口打开查看



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部