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>

  • 相关阅读:
    ds
    使用js做的贪吃蛇游戏的知识总结
    使用js实现的关联表单
    使用jquery实现的计算器功能
    vue学习(2)关于过渡状态
    vue学习(1)生命周期
    vue学习(0)写在前面的一句话
    bootstrap(7)关于进度条,列表,面板
    bootstrap(6)分页,翻页,徽章效果
    异常捕获
  • 原文地址:https://www.cnblogs.com/zouyun/p/7127258.html
Copyright © 2011-2022 走看看