zoukankan      html  css  js  c++  java
  • HTML和CSS经典布局6

    如下图:

    需求:

    1. 如图

    2. 可以从任意div标签开始。

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <style>
     6         #content {
     7             overflow: hidden;
     8         }
     9         .column-left {
    10             float: left;
    11             width: 200px;
    12             min-height: 500px;
    13         }
    14         .column-right {
    15             margin-left: 220px;
    16             min-height: 500px;
    17         }
    18         .columns3 {
    19             overflow: hidden;
    20         }
    21         .columns3 > div {
    22             width: 33.33333%;
    23             float: left;
    24         }
    25             .columns3 .column-content {
    26                 margin-right: 20px;
    27                 min-height: 300px;
    28                 background-color: greenyellow;
    29             }
    30     </style>
    31 </head>
    32 <body>
    33     <div id="header" style="height: 50px; background: blue;">
    34         
    35     </div>
    36     <div id="content">
    37         <div class="column-left" style="background-color: yellow;">
    38             
    39         </div>
    40         <div class="column-right">
    41             <div class="columns3">
    42                 <div>
    43                     <div class="column-content"></div>
    44                 </div>
    45                 <div>
    46                     <div class="column-content"></div>
    47                 </div>
    48                 <div>
    49                     <div class="column-content"></div>
    50                 </div>
    51             </div>
    52         </div>
    53     </div>
    54 </body>
    55 </html>
    View Code

     

  • 相关阅读:
    开发微信App支付
    SAP 数据类型
    SAP RFC函数
    单点登录
    集中式与分布式
    SAP 表类型
    独立软件供应商
    SAP 优缺点
    SAP 使用
    SAP 费用
  • 原文地址:https://www.cnblogs.com/leotsai/p/html-css-classical-layout-design-6.html
Copyright © 2011-2022 走看看