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最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
随机推荐
- DP专题训练之HDU 1087 Super Jumping!
Description Nowadays, a kind of chess game called "Super Jumping! Jumping! Jumping!" is ve ...
- sqlite嵌入式数据库C语言基本操作(2)
:first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:3px ...
- fiddler如何修改request header
在命令行中输入命令: bpu www.baidu.com (这种方法只会中断www.baidu.com) 然后刷新网站,在fiddler中点击被打断的网址,点击Inspectors—>Ra ...
- vs快捷键大全
前言 作为一个.net开发员,你还在用鼠标去点击相应的操作么?如果你回答是,那么你太low了! 一个很厉害的程序员不会是那种这鼠标到处狂点的人,他们肯定会很多快捷键,所以为了离他们更近一步,我们必须学 ...
- 三元运算与lambda表达式
#三元运算,就是对if else的简写 if 1 == 1: print("jasper") else: print("sb") 三元运算写法 name=&qu ...
- 英雄联盟网络测速 v1.3 全服全区取延时+取服务器维护状态+机房地理位置
全服全区取延时+取服务器维护状态+机房地理位置 v1.2修复了服务器状态获取不准确的bug 下载链接: https://pan.baidu.com/s/1c1LHIY8
- 【转】C#使用ESC指令控制POS打印机打印小票
.前言 C#打印小票可以与普通打印机一样,调用PrintDocument实现.也可以发送标注你的ESC指令实现.由于 调用PrintDocument类时,无法操作使用串口或TCP/IP接口连接的pos ...
- css优先级问题
关于CSS specificityCSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用 ...
- 2-st学习笔记
2-ST是一种巧妙的建图模式....其实,主要是将互相限制的条件转化为有向图.实现时,将每个点拆成两点,对应这个点的两种取值,然后求强连通分量.由于每个点只能有一种取值,所以若强连通分量中某一个点拆成 ...
- 【转载】DOS 系统和 Windows 系统有什么关系？为什么windows系统下可以执行dos命令？
作者:bombless 因为不同的系统都叫 Windows ,这些系统在界面上也有一定连续性并且因此可能造成误解,所以有必要稍微梳理一下几个不同的 Windows 系统.首先是 DOS 上的一个图形界 ...