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

CSS样式表
CSS教程之css选择器 、属性、值
CSS的color颜色使用说明
firefox css自动换行的实现方法
css支持标准的图片垂直居中
css+table 1px边框单元格
css之使table也能overflow:hidden
几个常用经典的css技巧
css 跨浏览器实现float:center
css浏览器不兼容原因分析及解决办法
iframe transparent透明背景方法
有衬线字体与无衬线字体比较
div+css在思路和流程上实现结构与表现的分离分析
css教程 css和document
层盖住下拉列表框问题解决方案
css样式之区分input是按钮还是文本框的方法
CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
谈谈网页设计中的字体应用Font Set
XHTML标签的自关闭写法的坏处分析
顶级经典常用的CSS属性收集整理
10条影响CSS渲染速度的写法与使用建议

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-09   浏览: 236 ::
收藏到网摘: 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>