Html+CSS浮動(dòng)的廣告條實(shí)現(xiàn)分解

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

我要評(píng)論

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

1.html部分

復(fù)制代碼

代碼如下:

<!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">
我是浮動(dòng)的div<img src="images/logingb.png">
</div>
浮動(dòng)的div
浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div 浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div
浮動(dòng)的div

</body>
</html>

2.css部分

復(fù)制代碼

代碼如下:

#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部分

復(fù)制代碼

代碼如下:

$(function() {
$("#fdiv img").click(function(){
$("#fdiv").hide();
});
});