• 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

     

  • 相关阅读:
    C# switch-case
    Python学习日记之中文支持
    C++学习笔记(一)之指针
    python CGI 编程实践
    linux 配置 python3 CGI
    PowerShell入门简介
    资源整合,总有你想要的
    python 爬虫之 urllib库
    一天学一个Linux命令:第一天 ls
    DG磁盘分区提示错误
  • 原文地址:https://www.cnblogs.com/leotsai/p/html-css-classical-layout-design-5.html
Copyright © 2020-2023  润新知