html/css 布局练习3
效果图：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAAJwCAIAAAC1Zha4AAAYB0lEQVR4nO3VUa1Y2RJDwXB6nIZTOIXTfRRG2xr5uFNLBaC/2r9+JEnSSL/aB0iSpH+b2ZYkaSazLUnSTGZbkqSZzLYkSTOZbUmSZjLbkiTNZLYlSZrJbEuSNJPZliRpJrMtSdJMZluSpJnMtiRJM5ltSZJmMtuSJM1ktiVJmslsS5I0k9mWJGkmsy1J0kxmW5Kkmcy2JEkzmW1JkmYy25IkzWS2JUmayWxLkjST2ZYkaSazLUnSTGZbkqSZzLYkSTOZbUmSZjLbkiTNZLYlSZrpyGz/kSSdq70tX8xsS5I+WntbvpjZliR9tPa2fDGzLUn6aO1t+WJmW5L00drb8sXMtiTpo7W35YuZbUnSR2tvyxcz25Kkj9beli9mtiVJH629LV/MbEuSPlp7W76Y2ZYkfbT2tnwxsy1J+mjtbfliZluS9NHa2/LFzLYk6aO1t+WLmW1J0kdrb8sXM9uSpI/W3pYv9jfO9v/+/IZdP3/+gVFmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvPbMOY+ueFZ2Y7z2zDmPrnhWdmO89sw5j654VnZjvP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mW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGznmW0YU/+88Mxs55ltGFP/vPDMbOeZbRhT/7zwzGzn/Y2zLUmaqL0tX8xsS5I+WntbvpjZliR9tPa2fDGzLUn6aO1t+WJmW5L00drb8sXMtiTpo7W35YuZbUnSR2tvyxcz25Kkj9beli9mtiVJH629LV/MbEuSPlp7W76Y2ZYkfbT2tnwxsy1J+mjtbfliZluS9NHa2/LFzLYk6aO1t+WLmW1J0kdrb8sXOzLbkiT9DZltSZJmMtuSJM1ktiVJmslsS5I0k9mWJGkmsy1J0kxmW5Kkmcy2JEkzmW1JkmYy25IkzWS2JUmayWxLkjST2ZYkaSazLUnSTGZbkqSZzLYkSTOZbUmSZjLbkiTNZLYlSZrJbEuSNJPZliRpJrMtSdJMZluSpJnMtiRJM5ltSZJmMtuSJM1ktiVJmslsS5I0k9mWJGkmsy1J0kxmW5Kkmcy2JEkzmW1JkmYy25IkzWS2JUmayWxLkjST2ZYkaSazLUnSTGZbkqSZzLYkSTOZbUmSZjLbkiTNZLYlSZrJbEuSNJPZliRpJrMtSdJMZluSpJnMtiRJM5ltSZJmMtuSJM1ktiVJmslsS5I0k9mWJGkmsy1J0kxmW5Kkmcy2JEkzmW1JkmYy25IkzWS2JUmayWxLkjST2ZYkaSazLUnSTGZbkqSZzLYkSTOZbUmSZjLbkiTNZLYlSZrJbEuSNJPZliRpJrMtSdJMZluSpJnMtiRJM5ltSZJmMtuSJM1ktiVJmslsS5I0k9mWJGkmsy1J0kxmW5Kkmcy2JEkzmW1JkmYy25IkzWS2JUmayWxLkjST2ZYkaSazLUnSTGZbkqSZzLYkSTOZbUmSZjLbkiTN9H9Y5MNDrzgq5wAAAABJRU5ErkJggg==" alt="" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.body{width:300px;height:300px; margin:100px; border:10px solid #CCC;}
.left{width:150px; height:300px; background-color:#3C9; float:left;}
.top{width:150px; height:100px; background-color:#FC6; float:left;}
.center{width:150px; height:100px;}
.centerleft{width:75px; height:100px; background-color:#F09; float:left;}
.centerright{width:75px; height:100px; background-color:#9FF; float:left;}
.bottom{width:150px; height:100px; background-color:#69F; float:left;
</style>
</head> <body>
<div class="body">
<div class="left"></div>
<div class="top"></div>
<div class="centerleft"></div>
<div class="centerright"></div>
<div class="bottom"></div> </div>
</body>
自己过了几天利用after伪类+zoom的另一种写法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.clear{zoom:1;}
.clear:after{content:""; display:block; clear:both;}
.wrap{width:500px;margin:0 auto;border:10px solid #ccc;}
.left{width:200px;height:400px;background:#7a1;float:left;}
.right{width:300px; float:right;}
.right_top{height:80px; background-color:#F90;} .right_center_left{width:150px;height:160px;background:#f69; float:left;}
.right_center_right{width:150px;height:160px;background-color:#FCC; float:left;}
.bottom{height:160px;background:#369;}
</style>
</head> <body>
<div class="wrap clear">
<div class="left">
</div>
<div class="right">
<div class="right_top"></div>
<div class="right_center clear">
<div class="right_center_left"></div>
<div class="right_center_right"></div>
</div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
效果图：
aaarticlea/png;base64,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" alt="" />
html/css 布局练习3的更多相关文章
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
随机推荐
- Metro-Ural119递推
Time limit: 0.5 second Memory limit: 64 MB Many of SKB Kontur programmers like to get to work by Met ...
- react-native 调用 TouchableOpacity (触摸透明) 时报了一个警告
`useNativeDriver` is not supported because the native animated module is missing. Falling back to JS ...
- #听云博客大赛#如何在自己的App嵌入听云产品监控App性能
近日浏览园子文章的时候,发现博客园与听云正在举办“听云原创博文”大赛.最近手上正好正在开发一款iOS的应用,所以就用听云App来监测一下我的App各个指标,为我的应用保驾护航.下面,我就从头到尾演示下 ...
- ExecutorService线程池应用
//线程数量 int threadNum = lists.size(); //创建一个线程池 ExecutorService pool = Executors.newFixedThreadPool(t ...
- android 命令行
android create avd --target --name cupcake 建立模拟器: $ android create avd --target 2 --name c ...
- 初识CEF
介绍 CEF全称Chromium Embedded Framework,是一个基于Google Chromium 的开源项目.Google Chromium项目主要是为Google Chrome应用开 ...
- 解决小米、红米及其他 Android 手机无法在 Mac 下进行真机调试的问题(转)
转自:http://ju.outofmemory.cn/entry/103522 Begin iOS 2014-08-19 271 阅读 手机 Android 小米 mac 调试 在 Mac OSX ...
- Bootstrap_面板
一.基础面板 基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块. 由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“pan ...
- hibernate联合主键 注解方式
转载自https://my.oschina.net/yotoo/blog/265571 方法一:主键类用@Embeddable,pojo类仍然用@Entity但是引用主键类的对象用@Id 主键pojo ...
- android应用内存使用情况
单个应用程序最大内存限制,超过这个值会产生OOM(内存溢出) 命令:adb shell ->dalvik.vm.heapgrowthlimit 应用启动后分配的初始内存 命令:adb shell ...