zoukankan      html  css  js  c++  java
  • 后台布局之反例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
                height: 48px;
                background-color: #1d9ad6;
                color: white;
            }
            .pg-content{}
            .pg-footer{}
            .pg-content .menu{
                20%;
                background-color: red;
                min- 200px;
                height: 700px;
            }
            .pg-content .content{
                80%;
                background-color: green;
                min- 200px;
    
            }
            .left{
                float:left;
            }
            .right{
                float: right;
            }
        </style>
    </head>
    <body style="margin: 0">
            <div class="pg-header"></div>
            <div class="pg-content">
                <div class="menu left">asd</div>
                <div class="content left">
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                    <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
                </div>
            </div>
            <div class="pg-footer"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    apiClould微信三方登录,qq三方登录
    微信小程序 使用环信聊天工具
    某些控件的应用
    记事本(查找与替换)
    记事本部分功能
    Winform——计算器进制转换
    Winform——计算器
    汉企C#面向对象——继承Practice
    汉企C#面向对象——继承
    二分法
  • 原文地址:https://www.cnblogs.com/qiangayz/p/8725778.html
Copyright © 2011-2022 走看看