经典布局案例（一）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS布局</title>

</head>

<body style="margin: 0">

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

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

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

</body>

</html>

上述代码定义了三个div块，用到了float浮动属性、overflow属性和clear属性；（注意：具有float属性的div块的位置会影响页面显示效果）

页面效果如下：

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

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

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

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

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

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

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

  3. Html 经典布局（三）

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

  4. Html 经典布局（二）

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

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

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

  6. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

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

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

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

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

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

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

随机推荐

  1. Javascript中好用更改时间的方法

    <script type="text/javascript"> //格式化时间格式的字符串 String.prototype.myTimes = function () ...

  2. TimerTask实现定期检查数据库操作

    最近在做一个P2P 的众筹网站,其他的内容还都可以,只是定期检查数库里面的项目是不是到期了,让我费了一些时间,现在写好了,我把它总结下来,以便以后使用.顺便和大家分享一下. Timer可以看成一个定时 ...

  3. 【翻译】LPeg编程指南

    原文:http://www.inf.puc-rio.br/~roberto/lpeg/lpeg.html   译者序: 这个是官方的LPeg的文档.这段时间学习LPeg的时候发现国内关于LPeg的文章 ...

  4. js实现浏览器添加收藏功能

    今天搞项目的时候为了实现浏览者实现添加收藏的功能,特地了解了一下相关的API. 也看到了网上各种版本的代码.整理了一下,代码如下.简单易懂. <script> function _addF ...

  5. [LeetCode]House Robber II (二次dp)

    213. House Robber II     Total Accepted: 24216 Total Submissions: 80632 Difficulty: Medium Note: Thi ...

  6. 【2017-03-10】Tsql语句基础、条件，高级查询

    一.语句基础 1.创建数据库:create database 数据库名(不能汉字,不能数字.符号开头) 2.删除数据库:drop database 数据库名 3.选用数据库:use 数据库名 4.创建 ...

  7. Struts文件下载

    /* 文件下载的先决条件 * 1. 在xml配置文件中必须配置一个type="stream"的result, result中不需要填写任何内容 * 2. 在Action中编写一个接 ...

  8. 清理浏览器网站缓存的几种方法（meta,form表单，ajax）

    1.meta方法   HTML header中加入 <meta http-equiv="pragma" content="no-cache"> 说明 ...

  9. hibernate 三种状态的转换

    一.遇到的神奇的事情 使用jpa操作数据库,当我使用findAll()方法查处一个List的对象后,给对这个list的实体进行了一些操作,并没有调用update 或者 saveOrUpdate方法,更 ...

  10. DBMS

    数据库中的概念 Catalog(分类) Table(表) Column(列)或者Field(字段) Primary(主键):唯一标识数据行的一列 业务主键:有业务意义的字段做主键 逻辑主键:使用没有任 ...