廣告條想必大家并不陌生吧，在本文將為大家詳細(xì)介紹下如何使用Html+CSS實(shí)現(xiàn)浮動(dòng)的廣告條，感興趣的朋友可以參考下
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">
我是浮動(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部分
代碼如下:
#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();
});
});
版權(quán)所有:易賢網(wǎng)
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試