经典布局案例（一）：

<!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. java 完全二叉树的构建与四种遍历方法

    本来就是基础知识,不能丢的太干净,今天竟然花了那么长的时间才写出来,记一下. 有如下的一颗完全二叉树: 先序遍历结果应该为:1  2  4  5  3  6  7 中序遍历结果应该为:4  2  5 ...

  2. hashMap4种遍历方式

    package collection; import java.util.Collection; import java.util.HashMap; import java.util.Hashtabl ...

  3. SQL SERVER - 谈死锁的监控分析解决思路

    1 背景 1.1 报警情况 最近整理笔记,打算全部迁移到EVERNOTE.整理到锁这一部分,里边刚好有个自己记录下来的案例,重新整理分享下给大家. 某日中午,收到报警短信,DB死锁异常,单分钟死锁12 ...

  4. node c++多线程插件构想

    最近想写一个node的c++插件实现线程.提供的api使用回调并进行二次包装使其返回一个promise,并且要求需要在工作线程里执行的函数为async函数.如果是node7.0以下的版本,函数必须返回 ...

  5. 1630/2023: [Usaco2005 Nov]Ant Counting 数蚂蚁

    2023: [Usaco2005 Nov]Ant Counting 数蚂蚁 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 85  Solved: 40[S ...

  6. 道路修建 2（自创题+题解）（From NOI2011）

    道路修建这道题想来各位不陌生(传送门在此——Bzoj2435),看了此题,一开始以为是最初各个点处于分散状态,然后做了一下,直到发现标程都有点问题,才发现原题是说本来各点已经处于连接完毕的状态(phi ...

  7. 1297: [SCOI2009]迷路

    1297: [SCOI2009]迷路 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 652  Solved: 442[Submit][Status] ...

  8. 基于Spring Cloud和Netflix OSS构建微服务，Part 2

    在上一篇文章中,我们已使用Spring Cloud和Netflix OSS中的核心组件,如Eureka.Ribbon和Zuul,部分实现了操作模型(operations model),允许单独部署的微 ...

  9. MyBatis极速入门开发手册(2017-2-6更新)

    前言: 本篇文章对我的学习内容做一个归纳梳理,同时也记录一些学习过程中遇上的问题及注意事项等等,可以帮助新入门的朋友们消除一些误区与盲区,希望能帮上一些正在学习的朋友们.在编写时会引用一些mybati ...

  10. extern “ C”的含义

    见博客:http://www.cnblogs.com/xulei/archive/2006/11/12/558139.html