Html+CSS浮動的廣告條實現(xiàn)分解

發(fā)布時間：2013-10-08 17:40:28 作者：佚名

我要評論

廣告條想必大家并不陌生吧，在本文將為大家詳細介紹下如何使用Html+CSS實現(xiàn)浮動的廣告條，感興趣的朋友可以參考下

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();
});
});