在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
padding:0px
margin:0px
}
body, ul, li{
background-color:white
font-size:12px
font-family:Arial, Helvetica, sans-serif
text-align:center
}
#main{
width:20px
height:1000px
margin:0px auto
background-color:#CCC
}
#nav{
width:500px
margin:0px auto
position:fixed/*固定作用*/
top:0px
left:490px
/*ie6下样式，加下划线表示只针对ie6 的hack */
_position:absolute/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px")/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index:9999/* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
text-align:left
}
a{
color:#000000
text-decoration:none
}
.menu{
width:120px
height:18px
margin:0px 4px 0px 0px
background-color:#F5F5F5
color:#999999
border:1px solid #EEE8DD
padding:6px 0px 0px 0px
overflow-y:hidden
cursor:hand
display:inline
list-style:none
font-weight:bold
float:left
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu"><a href="#">前台专区</a></li>
<li class="menu"><a href="#">后台专区</a></li>
<li class="menu"><a href="#">交流专区</a></li>
</ul>
</div>
<div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
</body>
</html>
上面的代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，然后将top值设置为0即可，但是仅仅使用position:fixed还是不够，因为IE6浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可:
_position:absolute/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px")/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
如何设置div的透明度但是其中的文字不透明:设置div透明度的时候可能很多朋友会遇到这样一个问题，那就是对象中的文字也被产生了透明现象，也不能说事缺陷，也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果，但是文字不透。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>蚂蚁部落</title>
<style type="text/CSS">
*{
margin:0px
padding:0px
}
.opacity{
width:150px
height:150px
background-color:green
filter:alpha(opacity=50)
-moz-opacity:0.5
opacity:0.5
margin-left:20px
margin-top:20px
}
span{
display:block
width:80px
height:80px
}
</style>
</head>
<body>
<div class="opacity">
<span>蚂蚁部落</span>
</div>
</body>
</html>
上面的代码将第二个div设置为半透明，但是文字也出现了透明现象。那么这里改造一下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
margin:0px
padding:0px
}
.opacity{
width:150px
height:150px
background-color:green
filter:alpha(opacity=50)
-moz-opacity:0.5
opacity:0.5
margin-left:20px
margin-top:20px
}
span{
display:block
width:80px
height:80px
position:absolute
top:20px
left:20px
}
</style>
</head>
<body>
<div class="opacity"></div>
<span>蚂蚁部落</span>
</body>
</html>
以上代码实现了需要的效果。方法就是讲span元素从div取出来，使用绝对定位的方式，再将span元素定位到原来在div元素的位置。
