经典布局案例（一）：

<!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. 如何快速的学习selenium工具

    分享即快乐. 最近几年,软件测试工程师一度成为热门职业,作为测试员也是倍感压力.作为测试员来说,仅仅会手工测试让职业生涯陷入瓶颈.于是工作之余充电,学习了自动化测试工具selenium,打算进阶中高级 ...

  2. Visual Studio 2017正式版发布全纪录

    又是一年发布季,微软借着Visual Studio品牌20周年之际,于美国太平洋时间2017年3月7日9点召开发布会议,宣布正式发布新一代开发利器Visual Studio 2017.同时发布的还有 ...

  3. 设置debian的静态IP

    欲设置的信息: IP地址:198.9.146.131 子网掩码:255.255.255.0 网关:198.9.146.254 DNS:198.9.9.1 198.9.9.2 首先编辑/etc/netw ...

  4. Selenium 运行时出现错误（java.lang.NoClassDefFoundError: com/google/common/base/Function）

    已经写好了java脚本,点击运行的过程中如果出现如下的错误提示时: java.lang.NoClassDefFoundError: com/google/common/base/Function 问题 ...

  5. 可扩展标记语言XML

    XML简述 XML用于描述数据,是当前处理结构化文档信息的有力工具.与操作系统编程语言的开发平台无关,可以实现不同系统之间的数据交互. 结构 <?xml version="1.0&qu ...

  6. css秘密花园

    picture元素 http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.htmlCHAPTER ...

  7. Uri API

    四中LaunchMode:http://blog.csdn.net/liuhe688/article/details/6754323 onNewIntent:http://www.cnblogs.co ...

  8. android studio 中的 gradle version

    刚开始接触AS,从geithub上download了好多项目,每一个都需要改动,对我这种新手来说,慢慢琢磨吧 问题一: 解决办法: 在build.gradle中,将gradle的版本改正如上图所示即可 ...

  9. 如何在appconfig中配置服务的ip

    开发了一个WindowsService消息服务器,刚开始一直都是在代码中把IP地址写死,所以每次只要是更换了新的IP地址后,都需要重新编译项目.所以考虑把ip配置到config文件中, 这样做的好处是 ...

  10. Unity中溶解shader的总结

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