html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

CSS实现的div悬浮框并且兼容IE6的样式_CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评:div悬浮框在某些特殊场合还是比较实用的,下面为大家介绍下使用CSS实现的并且兼容IE6,示例如下,感兴趣的朋友可以练练手

复制代码
代码如下:
P68HTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> P68HTML5中文学习网 - HTML5先行者学习网
<html xmlns="http://www.w3.org/1999/xhtml"> P68HTML5中文学习网 - HTML5先行者学习网
<head> P68HTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> P68HTML5中文学习网 - HTML5先行者学习网
<title>CSS固定定位</title> P68HTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> P68HTML5中文学习网 - HTML5先行者学习网
{ P68HTML5中文学习网 - HTML5先行者学习网
padding:0; P68HTML5中文学习网 - HTML5先行者学习网
margin:0; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
#fixedLayer{ P68HTML5中文学习网 - HTML5先行者学习网
width:100px; P68HTML5中文学习网 - HTML5先行者学习网
line-height:50px; P68HTML5中文学习网 - HTML5先行者学习网
background: #FC6; P68HTML5中文学习网 - HTML5先行者学习网
border:1px solid #F90; P68HTML5中文学习网 - HTML5先行者学习网
position:fixed; P68HTML5中文学习网 - HTML5先行者学习网
right:10px; P68HTML5中文学习网 - HTML5先行者学习网
bottom:10px; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
</style> P68HTML5中文学习网 - HTML5先行者学习网
<!--[if lte IE 6]> P68HTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> P68HTML5中文学习网 - HTML5先行者学习网
html { P68HTML5中文学习网 - HTML5先行者学习网
height:100%; P68HTML5中文学习网 - HTML5先行者学习网
overflow:hidden; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
body { P68HTML5中文学习网 - HTML5先行者学习网
height:100%; P68HTML5中文学习网 - HTML5先行者学习网
overflow:auto; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
#fixedLayer { P68HTML5中文学习网 - HTML5先行者学习网
position:absolute; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
</style> P68HTML5中文学习网 - HTML5先行者学习网
<![endif]--> P68HTML5中文学习网 - HTML5先行者学习网
</head> P68HTML5中文学习网 - HTML5先行者学习网
<body> P68HTML5中文学习网 - HTML5先行者学习网
<div id="fixedLayer">固定不动</div> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
</body> P68HTML5中文学习网 - HTML5先行者学习网
</html> P68HTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助