该导航条跟随页面滚动，始终在屏幕上方显示，使用纯CSS代码实现，精简高效。
始终显示在页面顶部的导航条的HTML代码：
<div id="xin126zhijia">
<ul class="jd_menu" id="xin126_nav">
<li><a href='http://www.125jz.com/'>首页</a></li>
<li><a href='http://www.125jz.com/operate' >网站运营</a></li>
<li><a href='http://www.125jz.com/course/webdevelopment' >网页制作</a></li>
<li><a href='http://www.125jz.com/resources' >建站素材</a></li>
<li><a href='#' >jquery特效</a></li>
<li><a href='#' >在线客服</a></li>
<li><a href='#' >图片特效</a></li>
</ul>
</div>
把以上代码复制到<body></body>之间
始终显示在页面顶部的导航条CSS代码：
* {
margin: 0px;
padding: 0px;
}
ul, li {
list-style:none;
}
#xin126zhijia {
width: 980px;
text-align: left;
height: 50px;
margin: 0px auto;
z-index:100;
_position: relative;
_top:0px;
}
#xin126_nav {
width: 980px;
float: left;
display: block;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; /* position fixed for IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");
background:#2571B7;
height: 50px;
}
#xin126_nav li {
width:auto;
height:50px;
line-height:50px;
padding:0px 15px;
float:left;
text-align:center;
}
#xin126_nav li:hover {
background:#C00;
}
#xin126_nav li a {
color:#fff;
font-size:14px;
text-decoration:none;
}
#xin126_nav li a:hover {
text-decoration:none;
color:#fff;
}
以上代码可以保存到单独的CSS文件，然后在导航页面引用：
<link href="css/xin126zhijia.css" type="text/css" rel="stylesheet" />
以上就是《纯CSS实现的始终显示在页面顶部的导航条》全部内容，希望对网页制作的朋友有所帮助。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1234.html
微信扫一扫 
支付宝扫一扫