Html+CSS浮动的广告条实现分解

ttx9n · 发表于 2013-10-8 17:40:28

广告条想必大家并不陌生吧，在本文将为大家详细介绍下如何使用Html+CSS实现浮动的广告条，感兴趣的朋友可以参考下 1.html部分

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<title>blog_floatdiv.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="./css/blog_floatdiv.css">
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/blog_floatdiv.js"></script>
</head>
<body>
<div id="fdiv">
我是浮动的div<img src="images/logingb.png">
</div>
浮动的div
浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div 浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div

</body>
</html>

2.css部分

复制代码代码如下:
#fdiv{
width:200px;
height: 500px;
background: yellow;
position: fixed;
top: 128px;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop) );
}
#fdiv img{
margin-left: 190px;
margin-top: 470px;
}

3.js部分

复制代码代码如下:
$(function() {
$("#fdiv img").click(function(){
$("#fdiv").hide();
});
});

4r8oiin60 · 发表于 2022-8-9 08:23:07

看到这帖子真是高兴！

溪谷小兵 · 发表于 2022-12-10 08:25:53

老大你好你好好你好

3pjdk29w · 发表于 2023-1-3 21:46:37

强烈支持楼主ing……

Anthonylam · 发表于 2023-2-11 15:07:04

很不错的样子

5ble0ks · 发表于 2023-8-25 06:14:00

的沙发水电费水电费

6hruhg · 发表于 2023-9-15 14:49:57

hi哦和烦恼农家女

czoz5y · 发表于 2023-12-9 15:26:25

哦哦哦哦哦哦哦哦哦

gc4hg · 发表于 2024-5-27 08:49:33

笑纳了老板

idy6_yus · 发表于 2024-7-13 19:59:45

谢谢您的分享！

账号		自动登录	找回密码
密码			立即注册

[HTML/Xhtml] Html+CSS浮动的广告条实现分解

相关帖子