DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> Html+CSS浮動的廣告條實現分解
Html+CSS浮動的廣告條實現分解
編輯:HTML和Xhtml     
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();
});
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved