改变html结构可以实现优先加载
我们通过一个实例来看一下：
本编程题目，完成一个混合布局的编写吧！最终效果如下图：
任务
任务1：完成顶部（top）、底部（foot）宽度自适应
任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应
任务3：要求右侧（right）先加载，左侧（left）后加载
任务4：编写的代码要兼容ie6
css代码：
<title>混合布局编程挑战</title>
<style type="text/css">
body {
margin:;
padding:;
font-size: 30px;
color: #fff
}
.top {
height: 100px;
background: #ccc;
}
.main {
height: 500px;
background: red;
margin: 0 auto;
}
.left {
position: absolute;
left:;
top: 100px;
width: 200px;
height: 500px;
background: blue;
}
.right {
height: 500px;
background: green;
margin-left: 210px;
}
.foot {
height: 50px;
background: orange;
}
</style>
</head>
HTML代码：
<body>
<div class="top">top</div>
<div class="main">
<!--注意此处的right和left顺序-->
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
代码中的背景颜色，没有按照图中的设置（因为懒哈 没有用ps吸取颜色代码）
做出来的效果图
先说一下怎么完成的任务二，1.先用绝对定位把固定宽度的左栏固定到左侧，然后再用 margin-left值等于左栏的宽度200px(此处为了和题中的效果图一样所以多加了10px，即红色部分)。从而达到了右栏宽度自适应的要求。
下面我们来说一下关于优先加载的问题：
这句话其实就是html结构中的：
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
上面的带码有没有发现在 先写的right后写的 left，
因为代码是顺序执行的，所以也就是题目要求中的 右栏（right）先加载，左栏（left）后加载。因为实际应用中很明显右栏（一般为网页主要内容）的栏目比左栏（一半为导航内容什么的）的栏目内容重要。
改变html结构可以实现优先加载的更多相关文章
- Code Fragment-UI加载策略之-可视者优先加载
通常情况 通常程序的UI不太复杂,我们会直接加载这些UI信息 复杂的UI 加载的元素就相对多一些. 加载的数据相对多. 因为UI元素和数据元素都比较多,加载的时间相对多. 可视者优先加载 不是默认的加 ...
- 解决swfupload改变display属性后flash重新加载的问题(chome,safari内核的所有浏览器)
最近在做的项目中有要用到上传控件,所有就用到了swfupload flash上传控件 因为在项目中要使用到Tab控件,tab控件通过改变display属性来控制tab页的显 示与隐藏.当swfuplo ...
- WPF当属性值改变时利用PropertyChanged事件来加载动画
在我们的程序中,有时我们需要当绑定到UI界面上的属性值发生变化从而引起数据更新的时候能够加载一些动画,从而使数据更新的效果更佳绚丽,在我们的程序中尽量将动画作为一种资源放在xaml中,而不是在后台中通 ...
- WKWebView实现网页静态资源优先从本地加载
前言:最近微信的小游戏跳一跳特别的火,顺便也让h5小游戏更加的火热.另外微信小程序,以及支付宝的小程序都是用H5写的.无论是小游戏还是小程序,这些都需要加载更多的资源文件,处理更多的业务.这些都对网页 ...
- Springboot学习01- 配置文件加载优先顺序和本地配置加载
Springboot学习01-配置文件加载优先顺序和本地配置加载 1-项目内部配置文件加载优先顺序 spring boot 启动会扫描以下位置的application.properties或者appl ...
- mybatis自定义之优先从classes目录加载，加载之后遇到相同的类定义时不再加载
如果mybatis中包含了两个相同定义的mapper,启动时出现下列异常: Caused by: java.lang.IllegalArgumentException: Result Maps col ...
- 探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
- JAVA类的加载、连接与初始化
JAVA类的加载.连接与初始化 类的声明周期总共分为5个步骤1.加载2.连接3.初始化4.使用5.卸载 当java程序需要某个类的时候,java虚拟机会确保这个类已经被加载.连接和初始化,而连接这个类 ...
随机推荐
- response的字节流和字符流输入的区别和问题--02-response的outputStream输出数据的问题.avi
02-response的outputStream输出数据的问题.avi; [字节流] 用meta标签 第一段原始代码:写错: 03-response的Writer输出数据的问题.avi;[字符流输出] ...
- 黑马程序员_Java基础视频-深入浅出精华版--PPT 文件列表
\day01\code\第一章_Java概述.ppt;\day01\resource\资料\50道编程题(有精力的同学看看).doc;\day01\resource\资料\Sun_Java程序员认证考 ...
- MySql cmd下的学习笔记 —— 有关select的操作（in， and, where, like等等）
为方便本节学习, 请先自行建立本表: 建一个商品表: create table goods ( -> goods_id mediumint(8) unsigned not null auto_i ...
- ASP.NET MVC 4 从示例代码展开，连接默认SQL Server数据库
VS2013里面,点击菜单[视图]-[SQL server对象资源管理器],右键点击[SQL Server]节点,选择[添加SQL Server]自动生成. 这只是开始,可以让网上下载下来的例子运行出 ...
- JavaWeb - Servlet教程
http://www.runoob.com/servlet/servlet-tutorial.html
- 20165231 2017-2018-2 《Java程序设计》第5周学习总结
教材学习内容总结 第七章 内部类 在一个类中声明另一个类,这样的类称作内部类,而包含内部类的类成为内部类的外嵌类. 内部类的类体中不可以声明类变量和类方法.外嵌类的类体中可以用内部类声明对象,作为外嵌 ...
- MFC修改对话框标题
对话框标题栏内容为静态 直接在对话框属性"常规"的"Caption"中修改. 动态生成对话框标题栏内容 SetWindowText()函数就可以 CString ...
- requests库入门13-会话对象
会话对象可以在跨请求保持某些参数,会话对象有requests api的大部分方法,我理解会话对象就是一个资源共享池 使用requests.Session()可以创建会话对象的实例 还是以之前GitHu ...
- Python3学习笔记05-数字
Python 数字数据类型用于存储数值 数字类型不能修改,如果改变数字数据类型的值,将重新分配内存空间 以下实例在变量赋值时 Number 对象将被创建: var1 = 10 var2 = 20 也可 ...
- hibernate学习笔记第七天：二级缓存和session管理
二级缓存配置 1.导入ehcache对应的三个jar包 ehcache/*.jar 2.配置hibernate使用二级缓存 2.1设置当前环境开始二级缓存的使用 <property name=& ...