如下图：

需求：

1. 如图

2. 可以从body标签开始。

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style>

         #content {

             overflow: hidden;

         }

         .column-left {

             float: left;

             width: 200px;

             min-height: 500px;

         }

         .column-right {

             float: right;

             width: 200px;

             min-height: 500px;

         }

         .column-middle {

             margin: 25px 225px;

             min-height: 500px;

         }

         .busy {

             position: fixed;

             z-index: 1;

             width: 100%;

             height: 100%;

             background-color: rgba(100, 100, 100, 0.5);

             top: 0px;

             left: 0px;

         }

             .busy span {

                 display: block;

                 position: absolute;

                 top: 50%;

                 left: 50%;

                 width: 100px;

                 height: 60px;

                 margin-left: -50px;

                 margin-top: -30px;

                 background-color: #ffffff;

                 border: 2px solid #444444;

                 text-align: center;

                 line-height: 60px;

                 border-radius: 50px;

             }

     </style>

 </head>

 <body>

     <div id="header" style="height: 50px; background: blue;">

     </div>

     <div id="content">

         <div class="column-left" style="background-color: purple;">

         </div>

         <div class="column-right" style="background-color: yellow;">

         </div>

         <div class="column-middle" style="background-color: pink;">

         </div>

     </div>

     <div class="busy">

         <span>

             Loading...

         </span>

     </div>

 </body>

 </html>

HTML和CSS经典布局5的更多相关文章

  1. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  2. css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...

  3. 只要一行代码，实现五种 CSS 经典布局

    常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...

  4. css经典布局学习

    ． 布局 布局是css的重头戏,每个系统的布局都有其各自的特点.无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下.例如: 经典三列布局 Bootstrap栅格布局 百度首页布局 微 ...

  5. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  6. css经典布局—Sticky footers布局

    参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...

  7. css经典布局之双飞翼

    经典的两个布局方式有圣杯布局和双飞翼布局,圣杯布局主要用在国外,双飞翼布局是淘宝的UED团队开发的,优化了圣杯布局.   主要解决页面分不同列显示的问题,   一般只做页面的时候,我们分三部分,左边, ...

  8. CSS经典布局之弹性布局

    当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上.所处的分辨率也不尽同样. 因此.我们须要学习一个新的知识:弹性盒模型. 弹性盒模型 实现项目对齐,方向,排序(即使项目大 ...

  9. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

  10. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

随机推荐

  1. 配置Visual Studio Code在Mac上作为.NET Core的IDE

    通过邮件发一文档测试一下. 关于Visual Studio Core 官网:https://www.visualstudio.com/en-us/products/code-vs.aspx 安装 也是 ...

  2. RANSAC算法笔记

    最近在做平面拟合,待处理的数据中有部分噪点需要去除,很多论文中提到可以使用Ransac方法来去除噪点. 之前在做图像配准时,用到了Ransac算法,但是没有去仔细研究,现在好好研究一番. 参考: ht ...

  3. ring3硬件断点

    4个断点寄存器DR0~DR3用来设置断点的线性地址. DR6为状态寄存器,DR7为控制寄存器. DR4和DR5保留.当CR4.DE==1时,访问DR4和DR5产生#UD异常:IF CR4.DE==0, ...

  4. WebAPI图片上传

    public Task<HttpResponseMessage> PostFormData() { // Check if the request contains multipart/f ...

  5. HDU 3535 AreYouBusy （混合背包）

    题意:给你n组物品和自己有的价值s,每组有l个物品和有一种类型: 0:此组中最少选择一个 1:此组中最多选择一个 2:此组随便选 每种物品有两个值:是需要价值ci,可获得乐趣gi 问在满足条件的情况下 ...

  6. C# 4.0四大新特性代码示例与解读

    摘要:今天我们结合代码实例来具体看一下C#4.0中的四个比较重要的特性. 之前的文章中,我们曾介绍过C#的历史及C# 4.0新增特性,包括:dynamic. 命名和可选参数.动态导入以及协变和逆变等. ...

  7. 图解HTTP

    1.返回结果的HTTP状态码 a. 2xx 成功: 200 ok 204 No Content  206 Partial Content b. 3XX重定向:301 Moved Permanently ...

  8. 【转载】Java集合类Array、List、Map区别和联系

    Java集合类主要分为以下三类: 第一类:Array.Arrays第二类:Collection :List.Set第三类:Map :HashMap.HashTable 一.Array , Arrays ...

  9. 【转】iOS学习之translucent属性

    原文地址:http://www.jianshu.com/p/930643270455 总所周知,苹果从iOS7开始采用扁平化的界面风格,颠覆了果粉们"迷恋"的拟物化风格.对于开发者 ...

  10. Python for Infomatics 第14章 数据库和SQL应用二（译）

    14.4 创建数据库和表 相比Python的列表和字典,数据库需要更多的已定义结构. 在我们创建数据库表之前,我们必须预先告诉数据库表和列的命名,以及计划保存到列中和数据类型.当数据库软件预先知道每列 ...