浮动布局demo
<!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的更多相关文章
- IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世
https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...
- jQuery-瀑布流-浮动布局（一
jQuery-瀑布流-浮动布局(一)(延迟AJAX加载图片) 瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部 ...
- 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭
一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS浮动布局与菜单栏设计
公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- css浮动布局，浮动原理，清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
- CSS---光标cursor设置、浮动布局与clear的关系
光标设置 {cursor:auto;}--光标根据需要自动变化. {cursor:crosshair;}--光标变成“+”. {cursor:pointer;}--光标变成手指模式. {cursor: ...
随机推荐
- Centos系统备份
使用root用户切换到根目录 然后,使用下面的命令备份完整的系统: tar cvpzf backup.tgz / --exclude=/proc --exclude=/lost+found --exc ...
- Lua中..和#运算符的用法
Lua中..和#运算符的用法 样例 试试以下的样例就明确了在Lua编程语言提供的其它运算符: a = "Hello " b = "World" print(&q ...
- HDU 1542 Atlantis (线段树 + 扫描线 + 离散化)
Atlantis Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- Velocity高速新手教程
变量 (1)变量的定义: #set($name = "hello") 说明:velocity中变量是弱类型的. 当使用#set 指令时,括在双引號中的字面字符串将解析和又 ...
- C++入门学习——模板
为什么须要模板? 我们已经学过重载(Overloading),对重载函数而言,C++ 通过函数參数(參数个数.參数类型)的正确匹配来调用重载函数.比如.为求两个数的最大值,我们定义 max () 函数 ...
- Mysql-SQL优化-统计某种类型的个数
有时我们想统计某种类型有多少个,会用这个SQL. 全表扫描之余,还要filesort.耗时1.34秒. mysql> select country,count(*) from t1 group ...
- Android 获取手机SIM卡运营商
直接上代码: /** * 获取SIM卡运营商 * * @param context * @return */ public static String getOperators(Context con ...
- 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 ...
- bzoj3884
http://www.lydsy.com/JudgeOnline/problem.php?id=3884 拓展欧拉定理 http://blog.csdn.net/Pedro_Lee/article/d ...
- 7章 Admin
Admin这个东西本身就已经存在于我们的项目中,是Django自己创建的.admin是Django自带的一个APP. # Application definition INSTALLED_APPS = ...