经典布局案例（一）：

<!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. 点击Robot Framework的桌面快捷图标后，没有反应（没有打开应用程序）

    http://www.cnblogs.com/zhengyihan1216/p/6397478.html  这篇文章中介绍了如何安装Robot Framework以及如何在桌面上创建快捷方式. 但是有 ...

  2. 文件系统：ext4,zfs测评结果

    测试环境 操作系统:ubuntu16.04 内核版本: 磁盘: 本人使用的是青云的云主机,磁盘使用的其性能型: Cpu信息: 4核 2399MHz 内存:8G 文件系统: 本人使用的是ubuntu16 ...

  3. 【WCF】错误处理（一）：FaultException 与 FaultReason 的搭配

    这里所说的错误处理主要是指服务代码中抛出的异常,即开发人员主动抛出的错误当然,由于网络问题或者配置不正确,会引发连接超时的错误,但这里老周要说的是,我们在实现服务逻辑时主动抛出的异常,尤其是对客户端传 ...

  4. IOS自定义UIView

    IOS中一般会用到几种方式自定义UIView 1.继承之UIView的存代码的自定义View 2.使用xib和代码一起使用的自定义View 3.存xib的自定义View(不需要业务处理的那种) 本文主 ...

  5. perl 正则表达式之漫游

    废话不多说了,直奔主题~ 一.简单模式进行匹配 将模式写在一对//中即可,匹配对象是$_ 元字符:圆括号()      进行模式分组 点号   .        能匹配任意一个字符,除换行符(\n)以 ...

  6. java线程学习(二)

    多个线程并发抢占资源是,就会存在线程并发问题,造成实际资源与预期不符合的情况.这个时候需要设置"资源互斥". 1.创建资源,这个地方我创建了一个资源对象threadResource ...

  7. Eclipse：The selection cannot be launched，and there are no recent launches

    刚刚装上eclipse,于是就想写个Java程序来试试.结果写好之后不管是点击 run  还是  debug 结果都会弹出一个窗口,内容为: The selection cannot be launc ...

  8. 修改mysql方法

    我已验证: 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('n ...

  9. 【iOS】7.4 定位服务->2.1.2 定位 - 官方框架CoreLocation: CLLocationManager（位置管理器）

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  10. ASP.NET MVC 创建控制器类过程

    MvcHandler.ProcessRequestInit()方法: 1.1获取控制器的名称string requiredString = this.RequestContext.RouteData. ...