当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS简单实现网页悬浮效果(对联广告)

CSS样式表
脚本控制三行三列自适应高度DIV布局
通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐
HTML/XHTML模板
用DIV+CSS写小三角
SPAN元素和DIV元素有的区别
关于Firefox中的Flash不可以显示透明效果的问题
当ie7不认!important之后 [布局的解决办法]
绝对定位的DIV宽度自动适应的一个方法
被人遗忘的html tags
一个css 的小问题
IE 5.x/Win 和模型bug
[转]目前找到的最好的Iframe自适应高度代码
Web Safe Color Pallette
网站制作之网页技巧
http状态码一览表
从Table向Css过渡的优缺点比较
不用float实现div模块居中布局
解决列高度自适应(相同)的五种方法
用CSS floats创建三栏页布局
如何正确使用标题元素、段落和强制换行

CSS样式表 中的 CSS简单实现网页悬浮效果(对联广告)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-09   浏览: 203 ::
收藏到网摘: n/a

css固定定位,即悬浮效果(例如对联广告),不用js,css中"position:fixed;"即可。
position:fixed; 以视口为包含块,因此在浏览器窗口内固定。
ie 6.0不支持,因此采用相对于html元素的绝对定位。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS固定定位</title>
<style type="text/css">
{
padding
:0;
margin
:0;
}

#fixedLayer 
{
width
:100px;
line-height
:50px;
background
: #FC6;
border
:1px solid #F90;
position
:fixed;
left
:10px;
top
:10px;
}

</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
#fixedLayer {
position:absolute;
}
</style>
<![endif]
-->
</head>

<body>
<div id="fixedLayer">固定不动</div>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</body>
</html>