Html+CSS浮动的广告条实现分解
创建时间：2014-06-06 18:50
点评：广告条想必大家并不陌生吧，在本文将为大家详细介绍下如何使用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="./styles.css">-->
<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();
});
});
上一篇：HTML页面加载和解析流程详细介绍
下一篇：使select在选中/聚焦时列出所有选项目前比较好的处理方式