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>

  • 相关阅读:
    alloffthelights使用方法
    tweenMax学习笔记
    移动端获取手机摄像头和相册
    livereload使用方法
    Bower使用笔记
    github 远程仓库
    git for windows 本地仓库
    python 对文件操作
    Python 装饰器
    JavaScript 做的网页版扫雷小游戏
  • 原文地址:https://www.cnblogs.com/zouyun/p/7127258.html
Copyright © 2011-2022 走看看