页面顶部固定漂浮导航栏,漂浮div,div背景透明

最新推荐文章于 2023-12-06 18:09:22 发布

hai7425

最新推荐文章于 2023-12-06 18:09:22 发布

阅读量2.9k

点赞数

分类专栏： javaScript 文章标签： OA js css div 导航

本文链接：https://blog.csdn.net/hai7425/article/details/52126782

版权

javaScript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!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>

hai7425

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面顶部固定漂浮导航栏,漂浮div,div背景透明

顶部漂浮div#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
复制链接

扫一扫