固定顶部导航,不跟随滚动,固定页面顶部纯div+css;
以下代码经测试兼容IE6 7 8 9 google firefox
HTML代码:
<!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>固定顶部导航代码-不跟随滚动</title>
<link href="styles/global.css" rel="stylesheet" type="text/css" />
<base target="_blank" />
</head>
<body>
<div class="topdiv">
<div class="top">
<div class="top-logo"> <a href="http://henan.china.com.cn/"></a></div>
<div class="topnav"> <span><a href="http://henan.china.com.cn/">首页</a> -<a href="http://henan.china.com.cn/news/">新闻</a>-<a href="http://henan.china.com.cn/special/">专栏</a>-<a href="http://henan.china.com.cn/finance/">财经</a>-<a href="http://henan.china.com.cn/health/">健康</a>-<a href="http://henan.china.com.cn/edu/">教育</a>-<a href="http://henan.china.com.cn/culture/">文化</a>-<a href="http://henan.china.com.cn/travel/">旅游</a>-<a href="http://henan.china.com.cn/home/">家居</a>-<a href="http://henan.china.com.cn/tech/">科技</a>-<a href="http://henan.china.com.cn/life/">生活</a>-<a href="http://henan.china.com.cn/pic.php">图片</a>-<a href="http://henan.china.com.cn/video.php">视频</a>-<a href="http://henan.china.com.cn/top.php">排行</a>-<a href="http://henan.china.com.cn/digg.php">关注</a>-<a href="http://henan.china.com.cn/comment.php">评论</a> </span></div>
<div class="zhuce"> <span class="account-link" id="page_loginForm"> <a href="http://henan.china.com.cn/account/login.php" target="_blank">登录</a>|<a href="http://henan.china.com.cn/account/register.php" target="_blank">注册</a>|<a href="http://henan.china.com.cn/account/index.php" target="_blank">帐户中心</a> </span></div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
CSS代码:
/* @Description:中国网河南频道 @Author: liujinghao @Update: */ /*CSS重构*/ body{ font-size:12px; color:#656565; background:#FFF;} body {background: url(about:blank); background-attachment: fixed;} *{ margin:0; padding:0; border:0} .clear{ clear:both; font-size:1px; line-height:1px;} input,select{font-size:12px;line-height:16px;} input{ border:#006 1px solid; height:18px;} ul,li{list-style-type:none; list-style:none;} a{ text-decoration:none; font-size:14px; font-family:"宋体"; color:#004276} a:hover{ color:#F00; text-decoration:underline} span{ color:#004276} .red{ color:#F00} .red a{ color:#F00} em{ font-style:normal} .topdiv{ width:100%; height:40px; overflow:hidden; background:url(../images/top-bg.png) repeat-x ; filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90;} .top{ width:1000px; height:42px; margin:auto;} .topdiv { top:0; position:fixed; background-color: #C30; _position:absolute;z-index:999; _top:expression(documentElement.scrollTop);} b{ font-weight:normal; } .top-logo{ height:30px; width:63px; float:left; background:url(../images/top-logo.png) left center no-repeat; margin-top:1px; } .top-logo a{ height:30px; width:63px; float:left; display:block;} .topnav{ height:34px; float:left;} .topnav span a{ font-size:14px; color:#666; line-height:34px;} .topnav span a:hover{ color:#F00} .zhuce{ width:130px; height:30px;float:right; } .zhuce span{ float:right} .zhuce span a{font-size:14px; color:#666; line-height:34px;} .zhuce span a:hover{ color:#F00;}