html将导航固定在顶端

发布时间：2020-07-08 20:31:21 来源：网络阅读：1148 作者：_Happy_Pang_ 栏目：开发技术
<!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-p_w_upload: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">tst1</a> 
    </td> 
    <td valign="middle" style="width:25%;"> 
  <a href="#" target="_blank">tst2</a> 
    </td> 
 <td valign="middle" style="width:25%;"> 
  <a href="#" target="_blank">tst3</a> 
    </td> 
 <td valign="middle" style="width:25%;"> 
  <a href="#" target="_blank">tst4</a> 
    </td> 
   </tr> 
  </table> 
 </div> 
 <div id="main"> 
  <br />  <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

  
 </div> 
 <div id="bottom">Copyright &copy;   All Rights Reserved </div> 
</body> 
</html>
向AI问一下细节
html将导航固定在顶端

猜你喜欢

最新资讯

相关推荐

相关标签
