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

    如下图:

    需求:

    1. 如图

    2. 可以从body标签开始。

    3. 页面内容高度设置高点,把窗口的滚动条显示出来,但是busy indicator不滚动。

     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             float: right;
    16             width: 200px;
    17             min-height: 500px;
    18         }
    19         .column-middle {
    20             margin: 25px 225px;
    21             min-height: 500px;
    22         }
    23         .busy {
    24             position: fixed;
    25             z-index: 1;
    26             width: 100%;
    27             height: 100%;
    28             background-color: rgba(100, 100, 100, 0.5);
    29             top: 0px;
    30             left: 0px;
    31         }
    32             .busy span {
    33                 display: block;
    34                 position: absolute;
    35                 top: 50%;
    36                 left: 50%;
    37                 width: 100px;
    38                 height: 60px;
    39                 margin-left: -50px;
    40                 margin-top: -30px;
    41                 background-color: #ffffff;
    42                 border: 2px solid #444444;
    43                 text-align: center;
    44                 line-height: 60px;
    45                 border-radius: 50px;
    46             }
    47     </style>
    48 </head>
    49 <body>
    50     <div id="header" style="height: 50px; background: blue;">
    51         
    52     </div>
    53     <div id="content">
    54         <div class="column-left" style="background-color: purple;">
    55             
    56         </div>
    57         <div class="column-right" style="background-color: yellow;">
    58             
    59         </div>
    60         <div class="column-middle" style="background-color: pink;">
    61             
    62         </div>
    63     </div>
    64     <div class="busy">
    65         <span>
    66             Loading...
    67         </span>
    68     </div>
    69 </body>
    70 </html>
    View Code

     

  • 相关阅读:
    提交按钮变灰
    解析spring启动加载dubbo过程
    shiro的SecurityUtis
    spring集成shiro登陆流程(下)
    spring集成shiro登陆流程(上)
    shiro的DelegatingFilterProxy怎么找到ShiroFilterFactoryBean
    sql多表关联
    android常用控件
    android控件之EditText
    浅议iOS网络数据解析
  • 原文地址:https://www.cnblogs.com/leotsai/p/html-css-classical-layout-design-5.html
Copyright © 2011-2022 走看看