经典布局案例（二）：

<!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. sql server中部分函数功能详解

    1.TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. SQL Server 的语法: SELECT TOP number|percen ...

  2. Hibernate一对多双向关联映射

    建立多对一的单向关联关系    Emp.java            private Integer empNo //员工编号            private String empName / ...

  3. Unity Shader 知识点总结（一）

    在学习了一段时间的Unity Shader后,打算写一些知识总结,便于今后的查找.如有错误,希望大家指出更改. 本文参照的unity入门精要一书,做一个知识归纳,如有兴趣可以看看其开源的部分,是一本比 ...

  4. oracle lag与lead分析函数简介

    lag与lead函数是跟偏移量相关的两个分析函数,通过这两个函数我们可以取到当前行列的偏移N行列的值 lag可以看着是正的向上的偏移 lead可以认为负的向下的偏移 具体我们来看几个例子: 我们先看下 ...

  5. （七）javascript中的数组

    一. 一维数组 1.1 声明数组 var 数组名=new Array(数组大小); 1.2  添加元素 <script> var a=new Array(3); a[0]="张三 ...

  6. 1083: [SCOI2005]繁忙的都市

    1083: [SCOI2005]繁忙的都市 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1319  Solved: 878[Submit][Stat ...

  7. React 入门之路(1)

    React React简介 是由Facebook公司推广的一套框架,已经应用instagram等产品 React就是为了提供应用程序性能而设计的一套框架 在angular中,对dom提供了一些指令,让 ...

  8. Dollar Dayz poj3181

    http://poj.org/problem?id=3181 这个题目一开始就能看出来是个dp问题,但是我并没有一开始就看出来是一个完全背包为题,只是想着根据以前的方法,这个问题应该是可以找到规律的, ...

  9. TCP/IP笔记(二)TCP/IP简介

    上回,主要介绍了下协议和OSI参考模型,并简单了解下网络构成要素,这回该说说TCP/IP了 互联网与TCP/IP的关系   互联网进行通信时,需要相应的网络协议,TCP/IP原本就是为使用互联网而开发 ...

  10. React开发的一些注意点

    react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列.建议初学的朋友还是先过一遍这篇 ...