德艺博客关注设计,提升认知、升级思维和记录生活的博客。

始终在网页顶部的导航条,仿天涯顶部固定层菜单

 <!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>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
#topNavWrapper {
width: 980px;
text-align: left;
height: 31px;
margin: 0px auto;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
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-image: url(/uploads/allimg/1106/top_r.gif);
background-repeat: no-repeat;
background-position: right;
height: 31px;
}
</style>
</head>
<body>
<div id="topNavWrapper">
<ul class="jd_menu" id="topNav">
<li></li>
</ul>
</div>
<p>请拖动右侧滚动条看效果</p>
<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><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
2014年11月26日 | 发布:zoudecao

发表留言:

相关推荐:

  • 我为什么不推荐找网络公司建站
  • 教你打造自动识别PC端与移动端的响应式网站
  • 长滚动网页设计的四个技巧
  • 网页挂马详细步骤教程
  • 优秀的个人网站设计欣赏
  • CSS下拉菜单代码2
  • CSS下拉菜单代码1
  • CSS透明导航菜单代码
  • SiteWeaver6.8后台编辑器支持IE9/IE10/IE11浏览器的方法
  • 网页设计最常见可用性错误?
  • SiteWeaver如何调整友情链接logo尺寸的方法
  • 邹公:百度628地震 你的站真被K了吗?
  • 分享25个圆形元素在网页设计中的应用案例
  • 邹公:以网站建设为生的站长在新的一年该怎样生存?
  • 40种网页常用小技巧(javascript)