html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
CSS简单实现网页悬浮效果(对联广告)
时间:2016-03-28
css固定定位,即悬浮效果(例如对联广告),不用js,css中"position:fixed;"即可。
position:fixed; 以视口为包含块,因此在浏览器窗口内固定。
ie 6.0不支持,因此采用相对于html元素的绝对定位。
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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
:
1pxsolid#F90
;
position
:
fixed
;
left
:
10px
;
top
:
10px
;
}
</
style
>
<!--
[iflteIE6]>
<styletype="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
>
上一条:CSS教程:行高line-height属性(1)
下一条:CSS网页布局:关于定位(position)
相关文章
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w
JQuery获取文章内容页自适应高度,优化界面外观
如何用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径。alert(window.location.pathname
分享js跳转页面方法
spanid=tiao"
jquery对单位进行换算的“笨”方法
DEDE项目上 编辑软件大小(单位换算):$(doc
JS简单页面倒计时转跳
script language="javascript"&g
最新文章
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 p 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了
何为百度移动网站MIP?MIP对网站有什么帮助?
随着移动互联网的发展,网友们对于移动产品服务体验要求也越来越高,当然了像移动网站体验也包括在内,随着互联网技术的发展,现在移动网站页面技术也一直在提升和创新,今
js实现点击按钮复制文本功能
如何去掉html中input的边框
js 判断字符串中是否包含某个字符串
织梦DedeCms做SEO优化必做的步骤
video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
怎么拿到input file上传的文件名字显示到页面中
何为百度移动网站MIP?MIP对网站有什么帮助?
swiper无法自动播放的解决办法
bootstrap在移动浏览器下响应式不起作用的解决方法