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最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
随机推荐
- CSS3中毛玻璃效果的使用方法
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...
- js实现图片预加载
通过 image标签的onload来实现: 实现原理是用过浏览器的缓存来进行 首先进行循环 for(var i=0;i<10;i++){ //每次进行一个new; var oImg = new ...
- HTMl5的sessionStorage和localStorage
HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...
- python中文乱码问题
在学习python的时候,当我要print中文的时候,会出现以下提示: py = '你好,世界!'print py File "n2.py", line 1 SyntaxError ...
- DirectDraw创建Windows窗口
KWindow.h KWindow.cpp KDDrawWindow.cpp #define STRICT #define WIN32_LEAN_AND_MEAN #include <wind ...
- Linux下安装GO语言环境
在/root/downloads/下 wget -c https://storage.googleapis.com/golang/go1.7.1.linux-amd64.tar.gz 解压文件至/us ...
- PHPStorm 与 XDebug 配置
XDebug 配置 环境 Nginx 1.4.7 32 bit PHP 5.4.25 32 bit Windows 10 64 bit 下载 PHP 5.4 VC9 (32 bit)[nts版本] 配 ...
- springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序
springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序 http://www.360doc.com/content/14/03 ...
- 关于C语言宏定义 使用do{ xxxx }while()
暂时感觉像是由于":"的原因,关于使用习惯方面的问题!! 下面是copy的: 这样的宏见过么: Cpp代码 #define FOO(x) do {\ some_code_line_ ...
- for循环嵌套的优化
public static void main(String[] args) { int x = 0; for (int i = 0; i < 2; i++) { ...