快速业务通道

CSS简单实现网页悬浮效果(对联广告)

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04

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

CSS简单实现网页悬浮效果(对联广告)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS简单实现网页悬浮效果(对联广告)
<html xmlns="http://www.w3.org/1999/xhtml">
CSS简单实现网页悬浮效果(对联广告)
<head>
CSS简单实现网页悬浮效果(对联广告)
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
CSS简单实现网页悬浮效果(对联广告)
<title>CSS固定定位</title>
<style type="text/css">
{
CSS简单实现网页悬浮效果(对联广告)padding
:0;
CSS简单实现网页悬浮效果(对联广告)margin
:0;
CSS简单实现网页悬浮效果(对联广告)
}

#fixedLayer 
{
CSS简单实现网页悬浮效果(对联广告)width
:100px;
CSS简单实现网页悬浮效果(对联广告)line-height
:50px;
CSS简单实现网页悬浮效果(对联广告)background
: #FC6;
CSS简单实现网页悬浮效果(对联广告)border
:1px solid #F90;
CSS简单实现网页悬浮效果(对联广告)position
:fixed;
CSS简单实现网页悬浮效果(对联广告)left
:10px;
CSS简单实现网页悬浮效果(对联广告)top
:10px;
CSS简单实现网页悬浮效果(对联广告)
}

CSS简单实现网页悬浮效果(对联广告)
</style>
CSS简单实现网页悬浮效果(对联广告)
<!--[if lte IE 6]>
CSS简单实现网页悬浮效果(对联广告)<style type="text/css">
CSS简单实现网页悬浮效果(对联广告)html {
CSS简单实现网页悬浮效果(对联广告)height:100%;
CSS简单实现网页悬浮效果(对联广告)overflow:hidden;
CSS简单实现网页悬浮效果(对联广告)}
CSS简单实现网页悬浮效果(对联广告)body {
CSS简单实现网页悬浮效果(对联广告)height:100%;
CSS简单实现网页悬浮效果(对联广告)overflow:auto;
CSS简单实现网页悬浮效果(对联广告)}
CSS简单实现网页悬浮效果(对联广告)#fixedLayer {
CSS简单实现网页悬浮效果(对联广告)position:absolute;
CSS简单实现网页悬浮效果(对联广告)}
CSS简单实现网页悬浮效果(对联广告)</style>
CSS简单实现网页悬浮效果(对联广告)<![endif]
-->
CSS简单实现网页悬浮效果(对联广告)
</head>
CSS简单实现网页悬浮效果(对联广告)
CSS简单实现网页悬浮效果(对联广告)
<body>
CSS简单实现网页悬浮效果(对联广告)
<div id="fixedLayer">固定不动</div>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
<p>dd</p>
CSS简单实现网页悬浮效果(对联广告)
</body>
CSS简单实现网页悬浮效果(对联广告)
</html>
CSS简单实现网页悬浮效果(对联广告)

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号