廣告條想必大家并不陌生吧，在本文將為大家詳細介紹下如何使用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();
});
});
版權所有:易賢網
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試