经典布局案例（一）：
<!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 经典布局（一）的更多相关文章
-
css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
-
css经典布局之左侧固定大小右侧自动适应
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...
-
Html 经典布局（三）
经典布局案例(三): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
-
Html 经典布局（二）
经典布局案例(二): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
-
vue命名视图实现经典布局
vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
-
Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...
-
div+css实现几种经典布局的详解
一.左右两侧,左侧固定宽度200px,右侧自适应占满 <div class="divBox"> <div class="left">&l ...
-
ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
-
ccs之经典布局（三）（等分，等高布局）
接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...
随机推荐
-
sublime Text-Theme
一.Spacegray主题 1>安装Spacegray主题按下Ctrl+Shift+P,输入install,选择Package Control: Install Package,然后输入Spac ...
-
c#.net WinForm 线程内 调用窗体控件
richTextBox1.BeginInvoke(new EventHandler(delegate { richTextBox1.AppendText("正在提交服务器..\r\n&quo ...
-
工匠若水 Android应用开发编译框架流程与IDE及Gradle概要
http://blog.csdn.net/yanbober/article/details/45306483 http://blog.csdn.net/yanbober/article/details ...
-
BZOJ2818: Gcd 欧拉函数求前缀和
给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 如果两个数的x,y最大公约数是z,那么x/z,y/z一定是互质的 然后找到所有的素数,然后用欧拉函数求一 ...
-
.net设计模式 - 单例模式
DoNet设计模式实例之单例模式( Singleton Pattern) 一 : 单例模式的简介:(Brief Introduction) 单例模式(Singleton Pattern),保证一个类只 ...
-
互联网寒冬，阿里Ant Design还开坑，程序员该何去何从？
金山都成立三十年了,不得不感叹中国在这三十年中,互联网确实是一步一步的在改变人们生活的方方面面,随着国家的发展,一大批企业搭上了互联网这趟高速列车走过了这几十年的风风雨雨,当然也造就了一批批传统行业无 ...
-
在浏览器中输入www.baidu.com后执行的全部过程
1.客户端浏览器通过DNS解析到www.baidu.com 的IP地址220.181.27.48,通过这个IP地址找到客户端到服务器的路径.客户端浏览器发起一个HTTP会话到220.181.27.48 ...
-
HighStock如何动态添加数据组
var charts = null; $(function () { var seriesIds = [830]; // Create the ...
-
简单地为DBNavigator填加Caption
http://bbs.2ccc.com/topic.asp?topicid=346735 http://www.cnblogs.com/GarfieldTom/archive/2010/01/18/1 ...
-
[翻译] KVNProgress
KVNProgress KVNProgress is a fully customizable progress HUD that can be full screen or not. KVNProg ...