导航条固定在顶端

最新推荐文章于 2022-08-29 17:41:49 发布

angierHu

最新推荐文章于 2022-08-29 17:41:49 发布

阅读量5.9k

点赞数

分类专栏： javascript html 文章标签： html border 浏览器 flash table ie

本文链接：https://blog.csdn.net/hulijie0123/article/details/7901612

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

类似于人人网、QQ空间的导航条，主要是顶端的导航条不随滚动条的滚动而滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>导航条固定</title>

<style type="text/css">

body
{
background-attachment:fixed;
background-color: #ffffff;
text-align: center;
width: 960px;
height:100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}
#nav
{
width: 960px;
overflow:visible;
position: fixed;/*固定作用*/
top: 0px;

/*ie6下样式，加下划线表示只针对ie6 的hack */
_position:absolute;/* 把导航栏位置定义为绝对位置关键*/
_top: expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端关键 */

z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
text-align:left;
height:40px;
background-color:#6666ff;
color:#ffffff;
padding-left:0px;
}
#nav a
{
color:#ffffff;
font-size:20px;
text-decoration:none;
}
#nav a:hover
{
text-decoration:underline
}
#main
{
text-align: center;
width:960px;
height:auto;
text-align:left;
padding-top:45px;
}
#bottom
{
text-align: center;
height: 50px;
width: 960px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #252525;
margin-top:10px;
}
</style>
</head>
<body>

<div id="nav">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
   <tr>
    <td valign="middle" style="width:25%;">
  <a href="#" target="_blank">分类1</a>
    </td>
    <td valign="middle" style="width:25%;">
  <a href="#" target="_blank">分类2</a>
    </td>
<td valign="middle" style="width:25%;">
  <a href="#" target="_blank">分类3</a>
    </td>
<td valign="middle" style="width:25%;">
  <a href="#" target="_blank">分类4</a>
    </td>
   </tr>
</table>
</div>
<div id="main">
<p>导</p>
<p>航</p>
<p>条</p>
<p>固</p>
<p>定</p>
<p>!</p>
<p>导</p>
<p>航</p>
<p>条</p>
<p>固</p>
<p>定</p>
<p>!</p>
<p>导</p>
<p>航</p>
<p>条</p>
<p>固</p>
<p>定</p>
<p>!</p>
<p>!</p>
<p>!</p>
<p>!</p>
<p>!</p>

</div>
<div id="bottom">Copyright ©   All Rights Reserved </div>
</body>
</html>

angierHu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
导航条固定在顶端

类似于人人网、QQ空间的导航条，主要是顶端的导航条不随滚动条的滚动而滚动 "http://www.w3.org/TR/html4/loose.dtd"> 导航条固定 body { background-attachment:fixed; background-color: #ffffff; text-align: center;
复制链接

扫一扫

专栏目录