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>
    

      

  • 相关阅读:
    继承(JAVA)
    第一个Java应用
    Java面向对象编程
    学生管理系统(分层开发)
    ComboBox的数据联动
    二进制、八进制、十进制、十六进制之间的转换
    C# using的一些事
    JVM最多支持多少个线程?
    Java日志体系居然这么复杂?——架构篇
    java 架构之路(队列)kafka
  • 原文地址:https://www.cnblogs.com/qiangayz/p/8725778.html
Copyright © 2011-2022 走看看