CSS實現網頁頂端或底部固定層

xpkdi 9年前發布 | 6K 次閱讀 CSS 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>無標題文檔</title>



<style type="text/css">  
body  
{  
    margin:0px;  
    padding:0px;  
    margin-top:60px;  
    margin-bottom:60px;  
}  
#div_nav_zone_top  
{  
    position:absolute;  
    margin-top:0px;  
    z-index:3;  
    width:100%;  
    height:60px;  
    margin: 0px auto 0px auto;   
    top: 0px;   
}  
#div_nav  
{   
    position:fixed;   
    width:100%;   
    background-color:#CCC;  
    padding:10px;   
    filter: alpha(opacity=45); opacity:0.45;   
    color:black;   
}  


#div_nav_zone_bottom  
{  
    position:absolute;   
    z-index:3;  
    width:100%;  
    height:60px;  
    margin: 0px auto 0px auto;   
    bottom: 0px;  
}  

#div_nav_zone_right  
{  
    position:absolute;   
    z-index:5;  
    heigth:1000px;  
    width:120px;   
    right:0px;   
    background-color:#333;  
}  
#div_ul  
{   
    position:fixed;   
    height:50px;  
}  

ul,li  
{  
    margin:0px;  
}  
li  
{  
    list-style:none;  
}  
</style>   
</head>  

<body>   
1  <br/>2  <br/>3  <br/>4  <br/>5  <br/>6  <br/>7  <br/>8  <br/>9  <br/>10  <br/>  
<p>sd</p>  
<p>f</p>  
<p>as</p>  
<p>df</p>  
<p>a</p>  
<p>sdf</p>  
<p>a</p>  
<p>dsf</p>  
<p> </p>  
<p>ads</p>  
<p>f</p>  
<p>ads</p>  
<p> </p>  
<p>ad</p>  
<p>sf AS  
  D  
  as  
  d  
  SA  
  D  

  sad  
  SA  
  D  
  a  
  d  
  A  
  D  

  a </p>  
<div id="div_nav_zone_top" >   
    <div id="div_nav">    
      該塊DIV頂部固定，1.配置文件寫到xml里，并添加注釋屬性。全局變量放到一個專用類里，應用初始化時讀取xml，賦值。<br />  
      1.配置文件寫到xml里，并添加注釋屬性。全局變量放到一個專用類里，應用初始化時讀取xml，賦值</div>   
</div>  


<div id="div_nav_zone_bottom" >   
    <div id="div_nav">    
      該塊DIV頂部固定，1.配置文件寫到xml里，并添加注釋屬性。全局變量放到一個專用類里，應用初始化時讀取xml，賦值。<br />  
1.配置文件寫到xml里，并添加注釋屬性。全局變量放到一個專用類里，應用初始化時讀取xml，賦值</div>   
</div>  

<div id="div_nav_zone_right" >   
    <div id="div_ul">    
        <ul>  
            <li>邊欄菜單1  </li>  
            <li>邊欄菜單2 </li>  
            <li>邊欄菜單3  </li>  
            <li>邊欄菜單4  </li>  
        </ul>  
     </div>   
</div>  


</body>  
</html>  </pre>
 本文由用戶 xpkdi 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！