我们通过一个实例来看一下：

本编程题目，完成一个混合布局的编写吧！最终效果如下图：

任务

任务1：完成顶部（top）、底部（foot）宽度自适应

任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应

任务3：要求右侧（right）先加载，左侧（left）后加载

任务4：编写的代码要兼容ie6

css代码：

  1. <title>混合布局编程挑战</title>
  2. <style type="text/css">
  3. body {
  4.     margin:;
  5.     padding:;
  6.     font-size: 30px;
  7.     color: #fff
  8. }
  9. .top {
  10.     height: 100px;
  11.     background: #ccc;
  12. }
  13. .main {
  14.     height: 500px;
  15.     background: red;
  16.     margin: 0 auto;
  17. }
  18. .left {
  19.     position: absolute;
  20.     left:;
  21.     top: 100px;
  22.     width: 200px;
  23.     height: 500px;
  24.     background: blue;
  25. }
  26. .right {
  27.     height: 500px;
  28.     background: green;
  29.     margin-left: 210px;
  30. }
  31. .foot {
  32.     height: 50px;
  33.     background: orange;
  34. }
  35. </style>
  36. </head>

HTML代码：

  1. <body>
  2. <div class="top">top</div>
  3. <div class="main">
  4.   <!--注意此处的right和left顺序-->
  5.   <div class="right">right</div>
  6.   <div class="left">left</div>
  7. </div>
  8. <div class="foot">foot</div>
  9. </body>

代码中的背景颜色，没有按照图中的设置（因为懒哈 没有用ps吸取颜色代码）

做出来的效果图

先说一下怎么完成的任务二，1.先用绝对定位把固定宽度的左栏固定到左侧，然后再用 margin-left值等于左栏的宽度200px(此处为了和题中的效果图一样所以多加了10px，即红色部分)。从而达到了右栏宽度自适应的要求。

下面我们来说一下关于优先加载的问题：

这句话其实就是html结构中的：

  1. <div class="main">
  2. <div class="right">right</div>
  3. <div class="left">left</div>
  4. </div>

上面的带码有没有发现在 先写的right后写的 left，
因为代码是顺序执行的，所以也就是题目要求中的 右栏（right）先加载，左栏（left）后加载。因为实际应用中很明显右栏（一般为网页主要内容）的栏目比左栏（一半为导航内容什么的）的栏目内容重要。

改变html结构可以实现优先加载的更多相关文章

  1. Code Fragment-UI加载策略之-可视者优先加载

    通常情况 通常程序的UI不太复杂,我们会直接加载这些UI信息 复杂的UI 加载的元素就相对多一些. 加载的数据相对多. 因为UI元素和数据元素都比较多,加载的时间相对多. 可视者优先加载 不是默认的加 ...

  2. 解决swfupload改变display属性后flash重新加载的问题(chome,safari内核的所有浏览器)

    最近在做的项目中有要用到上传控件,所有就用到了swfupload flash上传控件 因为在项目中要使用到Tab控件,tab控件通过改变display属性来控制tab页的显 示与隐藏.当swfuplo ...

  3. WPF当属性值改变时利用PropertyChanged事件来加载动画

    在我们的程序中,有时我们需要当绑定到UI界面上的属性值发生变化从而引起数据更新的时候能够加载一些动画,从而使数据更新的效果更佳绚丽,在我们的程序中尽量将动画作为一种资源放在xaml中,而不是在后台中通 ...

  4. WKWebView实现网页静态资源优先从本地加载

    前言:最近微信的小游戏跳一跳特别的火,顺便也让h5小游戏更加的火热.另外微信小程序,以及支付宝的小程序都是用H5写的.无论是小游戏还是小程序,这些都需要加载更多的资源文件,处理更多的业务.这些都对网页 ...

  5. Springboot学习01- 配置文件加载优先顺序和本地配置加载

    Springboot学习01-配置文件加载优先顺序和本地配置加载 1-项目内部配置文件加载优先顺序 spring boot 启动会扫描以下位置的application.properties或者appl ...

  6. mybatis自定义之优先从classes目录加载，加载之后遇到相同的类定义时不再加载

    如果mybatis中包含了两个相同定义的mapper,启动时出现下列异常: Caused by: java.lang.IllegalArgumentException: Result Maps col ...

  7. 探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密

    下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...

  8. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  9. JAVA类的加载、连接与初始化

    JAVA类的加载.连接与初始化 类的声明周期总共分为5个步骤1.加载2.连接3.初始化4.使用5.卸载 当java程序需要某个类的时候,java虚拟机会确保这个类已经被加载.连接和初始化,而连接这个类 ...

随机推荐

  1. Shiro入门 - md5+salt测试

    算法分类 典型的散列算法包括 MD2.MD4.MD5 和 SHA-1 待更新... 代码 /** * md5散列算法测试 */ @Test public void testMD5(){ String ...

  2. oracle存储过程---创建存储过程语句

    一.创建存储过程语句 语法:  CREATE OR REPLACE PROCEDURE testname( argument1 TYPE1, ....  ) AS BEGIN ...... END  ...

  3. Jedis（java操作redis数据库技术）

    Redis有什么命令,Jedis就有什么方法. 客户端无法连接时,需要考虑防火墙配置,比如6379端口是否开放,也可以直接关闭防火墙. Jedis连接池: import org.junit.Test; ...

  4. python答题辅助

    最近直播答题app很热门,由于之前看过跳一跳的python脚本(非常棒),于是也想写一个答题的脚本. https://github.com/huanmsf/cai 思路: 1.截图 2.文字识别,提取 ...

  5. Thymeleaf模板布局

    ⒈定义片段 1.使用th:fragment <div th:fragment="copy"> © 2019 <a href="http://www.co ...

  6. 20165231 2017-2018-2 《Java程序设计》第3周学习总结

    教材学习内容总结 对象(Object):存在的具体实体,具有明确的状态和行为 类(Class):具有相同属性和行为的一组对象的集合,用于组合各个对象所共有操作和属性的一种机制 从类看对象:类定义可以视 ...

  7. R-FCN论文讲解（转载链接）

    总结一下一下R-FCN的思想:由于分类网络具有位置的“不敏感性”和检测网络具有“位置的敏感性”这两者之间的矛盾, 而ResNet论文中为了解决这个问题,做出了一点让步,即将RoI Pooling层不再 ...

  8. eMMC基础技术4：eMMC command

    1.前言 本文主要对eMMC的command进行详细介绍,主要包含如下内容: (1)command类型 (2)command格式 2.command类型 command类型 说明 bc 不带respo ...

  9. Python在线聊天软件(Tkinter)

    1.python2.7下安装 apt-get install python-tk 主要功能是实现客户端与服务器端的双向通信,这个小东西用到的主要知识点: 1.Python Socket:2.Pytho ...

  10. 【转】Leveldb源码分析——1

    先来看看Leveldb的基本框架,几大关键组件,如图1-1所示. Leveldb是一种基于operation log的文件系统,是Log-Structured-Merge Tree的典型实现.LSM源 ...