CSS实现网页顶端或底部固定层

作者: 只为伴你行
来源: 51数据库
2022-08-15
    <!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=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>