AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > css教程

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

51自学网 http://www.wanshiok.com
网页,教程,网页制作,广告,效果,简单,实现,对联,<,/p>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>
<!--[iflteIE6]>
<styletype="text/css">
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:auto;
}
#fixedLayer{
position:absolute;
}
</style>
<![endif]
-->
</head>

<body>
<divid="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>

网页,教程,网页制作,广告,效果,简单,实现,对联,<,/p>  
上一篇:CSS网页布局:关于定位(position)  下一篇:CSS教程:行高line-height属性(1)