溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html將導航固定在頂端

發(fā)布時間：2020-07-08 20:31:21 來源：網絡 閱讀：1147 作者：_Happy_Pang_ 欄目：開發(fā)技術

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2. "http://www.w3.org/TR/html4/loose.dtd"> 
  3. <html> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  6.  <title>導航條固定</title> 
  7.   
  8.  <style type="text/css"> 
  9.  
  10. body 
  11. { 
  12.  background-p_w_upload:fixed; 
  13.  background-color: #ffffff; 
  14.  text-align: center; 
  15.  width: 960px; 
  16.  height:100%; 
  17.  margin-top: 0px; 
  18.  margin-right: auto; 
  19.  margin-bottom: 0px; 
  20.  margin-left: auto; 
  21.  
  22. } 
  23. #nav 
  24. { 
  25.  width: 960px; 
  26.  overflow:visible; 
  27.  position: fixed;/*固定作用*/ 
  28.  top: 0px; 
  29.   
  30.  /*ie6下樣式，加下劃線表示只針對ie6 的hack */ 
  31.  _position:absolute;/* 把導航欄位置定義為絕對位置  關鍵*/ 
  32.  _top: expression(documentElement.scrollTop + "px"); /* 把導航欄位置放在瀏覽器垂直滾動條的頂端  關鍵 */ 
  33.   
  34.  z-index:9999; /* 讓導航欄浮在網頁的高層位置，遇到flash和圖片時候也能始終保持最外層 */ 
  35.  text-align:left; 
  36.  height:40px; 
  37.  background-color:#6666ff; 
  38.  color:#ffffff; 
  39.  padding-left:0px; 
  40. } 
  41. #nav a 
  42. { 
  43.  color:#ffffff; 
  44.  font-size:20px; 
  45.  text-decoration:none; 
  46. } 
  47. #nav a:hover 
  48. { 
  49.  text-decoration:underline 
  50. } 
  51. #main 
  52. { 
  53.  text-align: center; 
  54.  width:960px; 
  55.  height:auto; 
  56.  text-align:left; 
  57.  padding-top:45px; 
  58. } 
  59. #bottom 
  60. { 
  61.  text-align: center; 
  62.  height: 50px; 
  63.  width: 960px; 
  64.  border-top-width: 2px; 
  65.  border-top-style: solid; 
  66.  border-top-color: #252525; 
  67.  margin-top:10px; 
  68. } 
  69.  </style> 
  70. </head> 
  71. <body> 
  72.  
  73.  
  74.  <div id="nav"> 
  75.   <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%"> 
  76.    <tr> 
  77.     <td valign="middle" style="width:25%;"> 
  78.   <a href="#" target="_blank">tst1</a> 
  79.     </td> 
  80.     <td valign="middle" style="width:25%;"> 
  81.   <a href="#" target="_blank">tst2</a> 
  82.     </td> 
  83.  <td valign="middle" style="width:25%;"> 
  84.   <a href="#" target="_blank">tst3</a> 
  85.     </td> 
  86.  <td valign="middle" style="width:25%;"> 
  87.   <a href="#" target="_blank">tst4</a> 
  88.     </td> 
  89.    </tr> 
  90.   </table> 
  91.  </div> 
  92.  <div id="main"> 
  93.   <br /> 
     <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    

    94. 

  94.   
    95. 

  95.  </div> 
    96. 

  96.  <div id="bottom">Copyright &copy;   All Rights Reserved </div> 
    97. 

  97. </body> 
    98. 

  98. </html> 
    99.

 

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手