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>
    

      

  • 相关阅读:
    Agile software architecture design document style..( sketches and no UMLs)
    spring mvc 使用Optional
    API reference for many languages..
    Java 8: Lambdas和新的集合Stream API
    Java 8 Stream API Example Tutorial
    小团队开发管理工具:gitlab+redmine+testlink+jenkins
    达到一定高度,回到头部的代码
    一款非常简单的android音乐播放器源码分享给大家
    高仿精仿开心网应用android源码
    很不错的安卓FadingActionBar控件源码
  • 原文地址:https://www.cnblogs.com/qiangayz/p/8725778.html
Copyright © 2011-2022 走看看