首页 > PHP资讯 > HTML5培训技术 > Html+CSS浮动的广告条实现分解

Html+CSS浮动的广告条实现分解

HTML5培训技术

点评:广告条想必大家并不陌生吧,在本文将为大家详细介绍下如何使用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(); 
}); 
}); 

南京HTML5培训
 

本文由欣才IT学院整理发布,未经许可,禁止转载。