<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
height: 150px;
background: yellow;
}
nav{
height: 30px;
background: green;
}
.main{
width: 1000px;
background: red;
/*height: 500px;*/
margin: 0 auto;
overflow: hidden;
}
/*两列/三列布局*/
.left{
width: 200px;
height: 300px;
background: blue;
/*display: inline-block;*/
float:left; /*脱离文档流 的布局方式*/
}
.right{
width: 800px;
height: 500px;
background: pink;
float: left;
/*display: inline-block;
vertical-align: top;*/
}
footer{
height: 100px;
background: gold;
}
/*多行多列布局*/
.box{
width: 240px;
height: 100px;
border: 1px black solid;
float: left;
margin: 10px;
/*box-sizing: border-box;*/
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<footer></footer>
</body>
</html>

浮动布局demo的更多相关文章

  1. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  2. jQuery-瀑布流-浮动布局(一

    jQuery-瀑布流-浮动布局(一)(延迟AJAX加载图片)   瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部 ...

  3. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  4. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  6. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  7. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  8. css浮动布局,浮动原理,清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  9. CSS---光标cursor设置、浮动布局与clear的关系

    光标设置 {cursor:auto;}--光标根据需要自动变化. {cursor:crosshair;}--光标变成“+”. {cursor:pointer;}--光标变成手指模式. {cursor: ...

随机推荐

  1. Centos系统备份

    使用root用户切换到根目录 然后,使用下面的命令备份完整的系统: tar cvpzf backup.tgz / --exclude=/proc --exclude=/lost+found --exc ...

  2. Lua中..和#运算符的用法

    Lua中..和#运算符的用法 样例 试试以下的样例就明确了在Lua编程语言提供的其它运算符: a = "Hello " b = "World" print(&q ...

  3. HDU 1542 Atlantis (线段树 + 扫描线 + 离散化)

    Atlantis Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  4. Velocity高速新手教程

    变量 (1)变量的定义: #set($name = "hello")      说明:velocity中变量是弱类型的. 当使用#set 指令时,括在双引號中的字面字符串将解析和又 ...

  5. C++入门学习——模板

    为什么须要模板? 我们已经学过重载(Overloading),对重载函数而言,C++ 通过函数參数(參数个数.參数类型)的正确匹配来调用重载函数.比如.为求两个数的最大值,我们定义 max () 函数 ...

  6. Mysql-SQL优化-统计某种类型的个数

    有时我们想统计某种类型有多少个,会用这个SQL. 全表扫描之余,还要filesort.耗时1.34秒. mysql> select country,count(*) from t1 group ...

  7. Android 获取手机SIM卡运营商

    直接上代码: /** * 获取SIM卡运营商 * * @param context * @return */ public static String getOperators(Context con ...

  8. HDU 5308 I Wanna Become A 24-Point Master(2015多校第二场)

    I Wanna Become A 24-Point Master Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 ...

  9. bzoj3884

    http://www.lydsy.com/JudgeOnline/problem.php?id=3884 拓展欧拉定理 http://blog.csdn.net/Pedro_Lee/article/d ...

  10. 7章 Admin

    Admin这个东西本身就已经存在于我们的项目中,是Django自己创建的.admin是Django自带的一个APP. # Application definition INSTALLED_APPS = ...