经典布局案例（二）：

<!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. 五金配件行业ERP解决方案

    五金行业信息化需求分析 “国内竞争国际化,国际竞争国内化”将是近几年我国五金行业发展的特点,中国作为全球五金制造中心的地位将进一步稳固.随着中国融入全球经济环境进程的加快以及经济实力的快速崛起,中国已 ...

  2. J2ee技术难点

    J2ee技术难点 session/cookie区别联系 jsp/servlet区别联系 filter执行流程 openSessionInView原理 clone与servilizable区别联系 eq ...

  3. Java面试12|Linux及Shell脚本

    1. 随便写一个awk的命令.用awk统计文本行数 (1)最近登录的5个帐号 last -n 5 | awk -F ':'(指定域分割符号) '{print $1}' 读入有'\n'换行符分割的一条记 ...

  4. Java设计模式之《享元模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6542449.html 享元模式:"享"就是分享之意,指一物被众人共享, ...

  5. 1212: [HNOI2004]L语言

    1212: [HNOI2004]L语言 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 643  Solved: 252[Submit][Status] ...

  6. ajax上传图片

    选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...

  7. 开源免费的.NET图像即时处理的组件ImageProcessor

    承接以前的组件系列,这个组件系列旨在介绍.NET相关的组件,让大家可以在项目中有一个更好的选择,社区对于第三方插件的介绍还是比较少的,很多博文的内容主要还是介绍一些简单的操作(很多人都说博客园现在是“ ...

  8. maven 的 snapshot 和 release 的区别

    release 是发行版,通常正式发布使用. snapshot 快照版本.在开发过程中,每提交一次修改,编译好响应的jar包,都会更新到仓库中,所有添加了这个jar包的依赖都会把远程仓库里的jar包更 ...

  9. Python中类的方法属性与方法属性的动态绑定

    最近在学习python,纯粹是自己的兴趣爱好,然而并没有系统地看python编程书籍,觉得上面描述过于繁琐,在网站找了一些学习的网站,发现廖雪峰老师的网站上面的学习资源很不错,而且言简意赅,提取了一些 ...

  10. yii2.0使用之缓存

    1.片段缓存(针对于视图中的某部分进行缓存): <?php 设置有效时间 $time=15; 缓存依赖,存入文件.当文件内容发生改变是才会刷新新内容 $dependecy=[ 'class'=& ...