您现在的位置是:网站首页>列表内容
CSS简单实现网页悬浮效果(对联广告)_CSS教程_CSS_网页制作_
2021-09-10 12:58:08 8732人已围观
简介 css固定定位,即悬浮效果(例如对联广告),不用js,css中"position:fixed;"即可。 position:fixed; 以视口为包含块,因此在浏览器窗口内固定。 ie 6.0不支持,因此采用相对于html元素的绝对定位。
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>
点击排行
- 魔兽世界黄金挑战攻略推荐_魔兽世界黄金挑战恢复萨怎么打_网络游戏_游戏攻略_
- 炉石传说龙德鲁伊怎么玩_炉石传说龙德鲁伊玩法攻略推荐_网络游戏_游戏攻略_
- 怪物猎人ol砦蟹打法_怪物猎人ol砦蟹白金攻略推荐_网络游戏_游戏攻略_
- 魔兽世界7.0守护德鲁伊天赋加点攻略_魔兽世界德鲁伊天赋_网络游戏_游戏攻略_
- 洛克王国齐天大圣怎么获得_齐天大圣去哪捕抓_网络游戏_游戏攻略_
- 洛克王国猴年企鹅怎么获得_猴年企鹅去哪捕抓_网络游戏_游戏攻略_
- 洛克王国如意金箍棒是什么_如意金箍棒有哪些用途_网络游戏_游戏攻略_
- 洛克王国新春快问快答怎么回答_新春快问快答问题答案一览_网络游戏_游戏攻略_
- 剑网3剑胆琴心PVP33对战攻略_网络游戏_游戏攻略_
本栏推荐
-
魔兽世界黄金挑战攻略推荐_魔兽世界黄金挑战恢复萨怎么打_网络游戏_游戏攻略_
-
炉石传说龙德鲁伊怎么玩_炉石传说龙德鲁伊玩法攻略推荐_网络游戏_游戏攻略_
-
怪物猎人ol砦蟹打法_怪物猎人ol砦蟹白金攻略推荐_网络游戏_游戏攻略_
-
魔兽世界7.0守护德鲁伊天赋加点攻略_魔兽世界德鲁伊天赋_网络游戏_游戏攻略_
-
洛克王国齐天大圣怎么获得_齐天大圣去哪捕抓_网络游戏_游戏攻略_
-
洛克王国猴年企鹅怎么获得_猴年企鹅去哪捕抓_网络游戏_游戏攻略_
-
洛克王国如意金箍棒是什么_如意金箍棒有哪些用途_网络游戏_游戏攻略_
-
洛克王国新春快问快答怎么回答_新春快问快答问题答案一览_网络游戏_游戏攻略_
-
剑网3剑胆琴心PVP33对战攻略_网络游戏_游戏攻略_