您现在的位置是：网站首页> 编程资料编程资料
CSS简单实现网页悬浮效果（对联广告）_CSS教程_CSS_网页制作_
2021-09-10
8570人已围观
简介 css固定定位，即悬浮效果（例如对联广告），不用js，css中"position:fixed;"即可。 position:fixed; 以视口为包含块，因此在浏览器窗口内固定。 ie 6.0不支持，因此采用相对于html元素的绝对定位。 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transiti
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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>CSS固定定位title>
<styletype="text/css">...
*{...}{
padding:0;
margin:0;
}
#fixedLayer{...}{
width:100px;
line-height:50px;
background:#FC6;
border:1pxsolid#F90;
position:fixed;
left:10px;
top:10px;
}
style>
head>
<body>
<divid="fixedLayer">固定不动div>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
<p>ddp>
body>
html>
position:fixed; 以视口为包含块，因此在浏览器窗口内固定。
ie 6.0不支持，因此采用相对于html元素的绝对定位。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>CSS固定定位title>
<styletype="text/css">...
*{...}{
padding:0;margin:0;
}#fixedLayer{...}{width:100px;line-height:50px;background:#FC6;border:1pxsolid#F90;position:fixed;left:10px;top:10px;
}style>head><body><divid="fixedLayer">固定不动div><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp><p>ddp>body>html>
相关内容
- CSS教程：行高line-height属性(1)_CSS教程_CSS_网页制作_
- css制作有立体效果的表格_CSS教程_CSS_网页制作_
- HTML验证的好处？_CSS教程_CSS_网页制作_
- 英文教程：鼠标悬停（hover）效果_CSS教程_CSS_网页制作_
- dl,dt,dd标记在网页中要充分利用_CSS教程_CSS_网页制作_
- dl、dt、dd 标记来改造163邮箱的广告条_CSS教程_CSS_网页制作_
- CSS将成为网页设计师必备知识_CSS教程_CSS_网页制作_
- DIV CSS：网页一行两列背景自适应_Div+CSS教程_CSS_网页制作_
- CSS初学：如何修改Zblog中的CSS_CSS教程_CSS_网页制作_
- CSS关于初学者的问题_CSS教程_CSS_网页制作_
