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最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
随机推荐
- three.js初涉略（一）
<!-- 最近要研究一下webgl,发现了webgl中文网(http://www.hewebgl.com/article/articledir/1).边研究教程边做下记录 --> thre ...
- java内存详解
二.JAVA中的内存模型 程序运行的时候,内存主要由以下部分组成: 堆:所有线程共享一个堆:存放的都是new 出来的对象:由垃圾回收器回收: 方法区:所有线程共享一个方法区:里面存放的内容有点杂,可以 ...
- 浅谈如何使用python抓取网页中的动态数据
我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念, 动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到 ...
- d20161012
Milk-run 供应商信息维护 基本信息,电子围栏 外部订单导入[或者录入页面] 订单基本信息,载具信息,物料信息,备注(外协还是华为导入订单,订单内容是否内部投递一样,是否需要导入附加,导入后是否 ...
- iOS去除导航栏和tabbar的1px横线
1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线,主要是颜色太不协调了 去除之前的图片 要去除这1px的横线,首先应该知道它是什么,在Xcode的界面调试中可以看到,它其实是UIIm ...
- URL中的保留和不安全字符
书写URL时要使用US-ASCII字符集可以显示的字符. http://www.google.com 如果需要在URL中使用不属于此字符集的字符,就要使用特殊的符号对该字符进行编码. 如:最常使用的空 ...
- 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版本] 配 ...
- repeater留言板[转]
做了一个网站,其中的在线留言板块是用Repeater来显示留言的,这样可以用少的代码还实现多的功能,但是不知道怎么分页,要是留言过多就会使页面变的很长,能过查看众多网友的经验,知道用PagedData ...
- TryUpdateModel
MSDN参考 https://msdn.microsoft.com/zh-cn/library/system.web.mvc.controller.tryupdatemodel.aspx 相关博文 h ...
- 在ionic/cordova中使用极光推送插件（jpush）
Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容: