zoukankan      html  css  js  c++  java
  • 简单布局

    <style>
    #container{
    1002px;
    background:gray;
    }
    #header{
    height:120px;
    background:red;
    }
    #main{
    height:600px;
    /*background:green;*/
    }
    #lside{
    700px;
    height::600px;
    background:pink;
    float:left;
    }
    .four{
    330px;
    height:280px;
    background:green;
    margin:10px;
    float:left;
    }
    #rside{
    302px;
    height:580px;
    background:purple;
    float:right;
    margin-top:10px;
    margin-bottom:10px;
    }
    #footer{
    height:120px;
    background:blue;
    }
    </style
    </head>
    <body>
    <div id="container">
    <div id="header"></div>
    <div id="main">
    <div id="lside">
    <div class="four"></div>
    <div class="four"></div>
    <div class="four"></div>
    <div class="four"></div>
    </div>
    <div id="rside"></div>
    </div>
    <div id="footer"></div>
    </div>
    </body>

    用css:利用float,做出四个排列的部分;四个共有相同的性质,添加了一个class类,控制浮在left的四小部分(相同的)#控制id=four,而.four控制四个class就不用麻烦的写四个div了;margin-top:10px;与margin: 10px;一样。

  • 相关阅读:
    Nginx PHP页面找不到总是返回404
    Bing每日一图
    Vue3
    PHP PDO相关
    IIS 搭建FTP
    vue根据环境不同设置不同的入口文件
    Vue生成打包报告
    Vue项目在执行build命令期间中移除所有consol.log
    Nprogress 的使用
    Vue报错处理
  • 原文地址:https://www.cnblogs.com/wangruifang/p/5668482.html
Copyright © 2011-2022 走看看