经典布局案例（二）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS布局</title>

</head>

<body>

<div style=" height: 150px"></div>

<div style=" width: 200px;height: 400px;float: left"></div>

<div style="height: 300px;overflow: hidden">

    <div style="height: 300px;width: 200px;float: right"></div>

</div>

<div style="height: 150px;clear: both"></div>

</body>

</html>

上述代码定义了五个div块，用到了float浮动属性、overflow属性和clear属性；其中用到了div块的嵌套。

页面效果如下：

其中红色和蓝色div块为定宽绿色、黄色和灰色不定宽。

转载自本人ITeye链接：http://xiaozhuang0706.iteye.com/blog/2262451

Html 经典布局（二）的更多相关文章

  1. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

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

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

  3. div+css实现几种经典布局的详解

    一.左右两侧,左侧固定宽度200px,右侧自适应占满 <div class="divBox"> <div class="left">&l ...

  4. ccs之经典布局（三）（等分，等高布局）

    接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...

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

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

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

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

  7. Html 经典布局（三）

    经典布局案例(三): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. Html 经典布局（一）

    经典布局案例(一): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. vue命名视图实现经典布局

    vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. 《深入理解Java虚拟机》学习笔记之类加载

    之前在学习ASM时做了一篇笔记<Java字节码操纵框架ASM小试>,笔记里对类文件结构做了简介,这里我们来回顾一下. Class类文件结构 在Java发展之初设计者们发布规范文档时就刻意把 ...

  2. 【2017-03-12】SQL Sever 子查询、聚合函数

    一.子查询 子查询:把一条查询语句,当做值来使用子句的查询结果必须是一列子句可以返回多行数据,但必须是一列 子句返回的值为一个值的时候: 例如: 我只知道c026这个编号,我要查询比这个车价格低的全部 ...

  3. 1131: [POI2008]Sta

    1131: [POI2008]Sta Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 783  Solved: 235[Submit][Status] ...

  4. arcgisserver成功发布服务后，浏览服务，无地图显示

    软件:ArcMap10.2,ArcgisCatalog10.2 方法:ArcMap10.2添加数据库连接,成功登陆数据库后,拖拽目标图层至Map窗口,对各个图层进行符号化设置 ArcCatalog中找 ...

  5. SQL一次查出相关类容避免长时间占用表(下)

    /* server: db: EDI */ -- 以下案例多次查询同一张表,仅有Name条件不同 --可以使用一次查出相关类容避免长时间占用表 USE EDI GO DECLARE @FileType ...

  6. fopen参数

    此文用于学习交流 原作:http://www.cnblogs.com/ai616818/archive/2012/04/26/2470918.html FILE * fopen(const char ...

  7. Redis的发布订阅及.NET客户端实现

    序言 发布订阅在设计模式中也可以说是观察者模式,针对这个模式是处理对象间一对多的依赖关系的,当一个对象发生变化,其它依赖他的对象都要得到通知并更新. 然而它也有自己的缺点,就是当主题发生一系列的变化时 ...

  8. Win7下Nginx的安装与配置，win7nginx配置

    环境介绍:Win7 64位SP1 Nginx版本:nginx/1.8.0 参考链接http://nginx.org/en/docs/windows.html 1.  下载nginx1.8.0版本: h ...

  9. Office 365开发概述及生态环境介绍（二）

    本文于2017年3月19日首发于LinkedIn,原文链接在这里 在上一篇 文章,我给大家回顾了Office发展过来的一些主要的版本(XP,2003,2007,2013等),以及在Office客户端中 ...

  10. 图解Javascript——作用域、作用域链、闭包

    什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...