论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

天涯顶部固定横条教程

文章类别:div+css | 发表日期:2010-3-21 10:07:52

天涯顶部固定横条教程

21视频教程网3月21日整理

      今天逛天涯的时候看到他们的顶部有一个固定的横条,往下拖动的时候一点闪烁都没有
于是研究了一下代码,终于弄出来了给大家看一下

<!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;
}
body {
 background-image: url(http://global.tianya.cn/global/gnav/css/nothing.txt);
 background-attachment: fixed; /* prevent screen flash in IE6 */
}
#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(http://global.tianya.cn/global/gnav/images/top_r.gif);
 background-repeat: no-repeat;
 background-position: right;
 height: 31px;
}
</style>
</head>
<body>
<div id="topNavWrapper">
  <ul class="jd_menu" id="topNav">
   
  </ul>
</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 />
</body>
</html>

    提示:您可以先修改部分代码再运行
上一篇:{教程}CSS不透明介绍 人气:5008
下一篇:{教程}css3的box-shadow注意事项 人气:2109
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058