zoukankan      html  css  js  c++  java
  • 网页布局//上左不动,其他滑动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
        /*上左不动,其他的可以滑动*/
        *{
            margin: 0px;
            padding:0px;
        }
        #one{
            background:#1DC9D8;
            z-index:1;
            100%;
            height: 100px;
            position: fixed;
            margin-top: -100px;
        }
        #content{
            margin-top: 100px;
            position:relative;
            100%;
            height:2000px;
        }
        #right{
            background:yellow;
            20%;
            height:400px;
            position: fixed;
            z-index: 1;
            
        }
        
        #left{
            background:pink;
            80%;
            float:right;
            height:1800px;
        
        }
        #foot{
            background:#37E519;
            100%;
            height:150px;
            position:relative;
        }
    </style>
    <body>
        <div>
            <div id="one">首页</div>
            <div id="content">
                <div id="right">列表</div>
                <div id="left">内容</div>
            </div>
            <div id="foot">底部</div>
        </div>
    </body>
    </html>

  • 相关阅读:
    JDK内置工具使用
    awk 数组
    c++面试题
    C++内存分配
    awk 数字比较
    awk脚本 排序
    awk 读取 shell 变量的方法
    NVelocity系列:Getting Start With NVelocity
    Castle.ActiveRecord分页示例
    NVelocity系列:NVelocity配置详解
  • 原文地址:https://www.cnblogs.com/zouyun/p/7127258.html
Copyright © 2011-2022 走看看