经典布局案例（三）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS布局</title>

</head>

<body>

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

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

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

</body>

</html>

上述代码定义了三个div块，用到了float浮动属性、overflow属性和clear属性。

页面效果如下：

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

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

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

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

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

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

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

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

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

  4. Html 经典布局（一）

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

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

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

  6. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

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

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

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

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

  9. Html 经典布局（二）

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

随机推荐

  1. 小白能学好UI设计吗

    许多童鞋在接触UI培训前会有很多疑问,我是干快递的,我能学好UI设计吗,UI培训要学些什么,电脑操作我好像什么都不会,除了打游戏,我适合学UI设计吗--有这些想法呢是人之常情,但是我们反过来想一想,有 ...

  2. VMware下ubuntu与Windows实现文件共享的方法

    最近安装caffe需要将Windows下文件拷贝到ubuntu16.04下,就进行了共享文件夹的设置,期间遇到一些困难,记录下来,方便以后遇到此类问题不再困惑. (记录只为更好的分享) 言归正传: 1 ...

  3. 每天一个Linux命令 4

    Linux系统关机命令 shutdown -h 时间 init 0 poweroff Linux系统注销命令 logout 或者是快捷键 Ctrl+d Linux系统重启命令 reboot Linux ...

  4. Unity中溶解shader的总结

    在实际的游戏工程中,经常美术和策划会提出溶解的表现要求.比如子弹在飞行的时候,弹道不断的消融:角色受到大型炮弹的攻击,在击飞的时候不断的消融等等诸如此类的表现.一般的消融都是结合粒子系统来实现,通过给 ...

  5. pom.xml配置文件配置jar(不用记，快速配置)

    1:网址:http://mvnrepository.com/ 2:在搜索栏搜索要用的框架;例如spring *以下为示例

  6. [复习]java中hashCode的作用

    1.HashCode的官方文档定义 (1)hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如java.util.HashTable提供的哈希表. (2)hashCode的 ...

  7. 浅谈HashMap的内部实现

    权衡时空 HashMap是以键值对的方式存储数据的. 如果没有内存限制,那我直接用哈希Map的键作为数组的索引,取的时候直接按索引get就行了,可是地价那么贵,哪里有无限制的地盘呢. 如果没有时间限制 ...

  8. NodeJs中process.cwd()与__dirname的区别

    process.cwd() 是当前执行node命令时候的文件夹地址 ——工作目录,保证了文件在不同的目录下执行时,路径始终不变__dirname 是被执行的js 文件的地址 ——文件所在目录 Node ...

  9. 【Python系列】Python自动发邮件脚本-html邮件内容

    缘起 这段时间给朋友搞了个群发邮件的脚本,为了防止进入垃圾邮件,做了很多工作,刚搞完,垃圾邮件进入率50%,觉得还不错,如果要将垃圾邮件的进入率再调低,估计就要花钱买主机了,想想也就算了,先发一个月, ...

  10. Linux块设备IO子系统(二) _页高速缓存

    磁盘驱动就是实现磁盘空间和内存空间数据上的交互,在上一篇中我们讨论了内存端的Page Segment Block Sector相关的概念,本文以3.14内核为例,讨论这部分内存是如何被组织管理的.我们 ...