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最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
随机推荐
- [转]struts1.2的action参数配置
转载地址:http://chenfeng0104.iteye.com/blog/796870 <struts-config> <form-beans> ...
- IE8 jquery解析xml的兼容问题
正常情况下可以这么写: jQuery(node).find(xpath.replace("//", ""))[0]; 但是在IE8下得到的是undefined应 ...
- c++中函数中变量内存分配以及返回指针、引用类型的思考
众所周知,我们在编程的时候经常会在函数中声明局部变量(包括普通类型的变量.指针.引用等等). 同时,为了满足程序功能的需要,函数的返回值也经常是指针类型或是引用类型,而这返回的指针或是引用也经常指向函 ...
- 我的Android第二章
前言 之前有很多人遇到了关于内部类的问题[主要在android的学习之中会大量的使用到],内部类是什么,内部类怎么定义,内部类的分类,内部类的好处,内部类如何访问,这里我们来结合代码简单的理解一下 1 ...
- 位图切割器&位图裁剪器
位图切割器: 虽然网上有类似的工具,PhotoShop 也有类似功能,但前者似乎不支持超大位图切割(以 G 计大小),而后者的切割块数量好像有比较小的限定范围,于是自己动手写了这个工具. 至于为什么是 ...
- bash中使用mysql中的update命令
mysql -uroot -ppasswd -e "update tbadmin set sPassword ='************' where sUserName='admin'& ...
- js遍历table中的每一个元素
function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...
- nginx安装方式
1.首先安装pcre库 获取pcre到一个目录 wget http://ftp.exim.llorien.org/pcre/pcre-8.21.tar.gz 解压缩pcre包 tar -zxvf pc ...
- 新版微信h5视频自动播放
微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { ...
- kali安装java1.8
0x01 下载 首先,去官方网站下载JDK1.8对应的版本 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...