<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>顶部漂浮div</title>
<style type="text/css">
#div1{
border:#06C 1px solid;
position:fixed;
width:100%;
height:115px;
z-index:100;
top: 0px;
left:0px;
text-align:center;
background-color:#FFF;
}
#div2{
padding: 25px;
background-color: rgba(0,0,0,0.4);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
#div2 p{
color: #FFFFFF;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
#div2{
background-color:#000000;
filter:Alpha(opacity=40);
position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
#div2 p{
position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
}
</style>
</head>
<body>
<div id="div1">
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
</div>
<div style="height:115px">33333333</div>
<div style="background-color:#F00">
<div id="div2"><p>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
</p>
</div><div id="div3">
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
222222222222222222222222222222222222<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
中国|韩国|日本|美国|印度|泰国|新加坡<br/>
</div>
</div>
</body>
</html>
页面顶部固定漂浮导航栏,漂浮div,div背景透明
最新推荐文章于 2023-12-06 18:09:22 发布