CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏

a19905522

浏览: 99185 次
性别:
来自: 郑州

最近访客更多访客>>

interdealsoft

cpongo1

hai5618

liuhhs

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

固定顶部导航不跟随滚动固定页面顶部

固定顶部导航，不跟随滚动，固定页面顶部纯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;}

固定顶部导航代码-不跟随滚动.zip (554.4 KB)
下载次数: 124

1
顶

3
踩

分享到：

js对联广告代码，带关闭按钮 | css ie下定义高度1px的div

2012-08-13 17:28
浏览 4923
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏

评论

发表评论

相关推荐

百度地图坐标拾取器vue组件

使用AST快速解决css代码重构问题

关于720全景视频在移动端播放的兼容问题汇总，截止2017年11月29日

nodejs下的图形处理库gm在windows环境的安装

jQuery ajax - load() 方法 回调函数

jQuery 获取屏幕高度、宽度

javascript变量类型

javascript基本类型和引用类型

javascript引用类型和值类型

JQ幻灯

javascript exec match 区别

javascript,js闭包实例讲解

JQ选择器-知识总结

javascript call 方法的继承,用于调用一个对象的一个方法，以另一个对象替换当前对象

使用navigator.userAgent来判断浏览器类型

javascript(js)中的 substring和substr方法

固定页面右下角DIV CSS代码，不跟随页面滚动，返回顶部代码，兼容ie6

css ie下定义高度1px的div

js固定页面底部悬浮框特效代码

网页浮动元素被flash遮住，flash下拉框被div层挡住|遮住，flash在网页最顶层，解决办法

最近访客更多访客>>

jQuery ajax - load() 方法回调函数