🔶图我就不发了,源代码可以复制粘贴直接看效果。CCS3布局,等我学完了会完善此篇博客的。
另附传送门:
-
1.静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
-
2.2019年前端五大布局,你学会了多少?
-
3.利用HTML和CSS实现常见的布局
-
4.前端布局方式分类
-
5.响应式布局与自适应式布局有什么不同
-
6.响应式和自适应有什么区别
-
7.CSS 自适应布局
-
8.使用CSS3 Media Queries实现网页自适应
-
9.当外面的容器的height使用百分比时,如何设置line-height可以使里面的文字垂直居中。
-
10.position,float,display布局方式规整
-
11.张鑫旭——基于display: inline-block的列表布局(这是效果页)
-
12.HTML主流布局差异动态演示 流式 自适应 响应式 静态(这是效果页)
-
13.超经典面试题:用多种方法实现圣杯布局和双飞翼布局
-
14.圣杯布局和双飞翼布局的理解与思考
-
15.经典的流式布局实现方法总结(三)(圣杯布局&双飞翼布局)
一、【静态布局】宽高固定值,浏览器放大缩小,布局不变(缩小浏览器后,水平有滚动条)
1-1.单列布局
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
border: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
min-width: 100%;
min-height: 100%;
overflow: hidden;
background: #fcc;
position: absolute;
}
.container {
width: 1070px;
margin: 0 auto;
}
.header, .nav, .main-body, .footer {
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.header-wrap {
background: rgba(150, 100, 0, 0.2);
}
.header {
height: 180px;
line-height: 180px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.footer-wrap {
background: rgba(0, 66, 200, 0.2);
}
.footer {
height: 80px;
line-height: 80px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.nav-wrap {
background: rgba(10, 199, 33, 0.2);
}
.nav {
height: 46px;
line-height: 46px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.main-body-wrap {
background: rgba(0, 0, 0, 0.2);
}
.main-body {
height: 600px;
line-height: 600px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="bg">
<div class="header-wrap">
<div class="header container">头部</div>
</div>
<div class="nav-wrap">
<div class="nav container">导航栏</div>
</div>
<div class="main-body-wrap">
<div class="main-body container">主要</div>
</div>
<div class="footer-wrap">
<div class="footer container">页脚</div>
</div>
</div>
</body>
</html>
1-2.混合布局:单双单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
min-width: 100%;
min-height: 100%;
background: #fcc;
position: absolute;
}
.container {
width: 1070px;
margin: 0 auto;
}
.header, .nav, .main-left, .main-middle, .footer {
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.header-wrap {
background: rgba(150, 100, 0, 0.2);
}
.header {
height: 180px;
line-height: 180px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.footer-wrap {
background: rgba(0, 66, 200, 0.2);
}
.footer {
height: 80px;
line-height: 80px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.nav-wrap {
background: rgba(10, 199, 33, 0.2);
}
.nav {
height: 46px;
line-height: 46px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.main-left, .main-middle {
height: 600px;
line-height: 600px;
}
.main-left {
width: 270px;
float: left;
background: rgba(100, 100, 100, 0.2);
}
.main-middle {
width: 800px;
float: right;
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="bg">
<div class="header-wrap">
<div class="header container">头部</div>
</div>
<div class="nav-wrap">
<div class="nav container">导航栏</div>
</div>
<div class="main-body-wrap">
<div class="main-body-box container clearfix">
<div class="main-left">左栏</div>
<div class="main-middle">主要</div>
</div>
</div>
<div class="footer-wrap">
<div class="footer container">页脚</div>
</div>
</div>
</body>
</html>
1-3.混合布局:单三单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
min-width: 100%;
min-height: 100%;
background: #fcc;
position: absolute;
}
.container {
width: 1070px;
margin: 0 auto;
}
.header, .nav, .main-left, .main-middle, .main-right, .footer {
font-size: 20px;
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
text-align: center;
}
.header-wrap {
background: rgba(150, 100, 0, 0.2);
}
.header {
height: 180px;
line-height: 180px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.footer-wrap {
background: rgba(0, 66, 200, 0.2);
}
.footer {
height: 80px;
line-height: 80px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.nav-wrap {
background: rgba(10, 199, 33, 0.2);
}
.nav {
height: 46px;
line-height: 46px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.main-body-box {
width: 1470px;
margin: 0 auto;
}
.main-left, .main-middle, .main-right {
height: 600px;
line-height: 600px;
float: left;
}
.main-left, .main-right {
width: 200px;
background: rgba(100, 100, 100, 0.2);
}
.main-middle {
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="bg">
<div class="header-wrap">
<div class="header container">头部</div>
</div>
<div class="nav-wrap">
<div class="nav container">导航栏</div>
</div>
<div class="main-body">
<div class="main-body-box clearfix">
<div class="main-left">左栏</div>
<div class="main-middle container">主要</div>
<div class="main-right">右栏</div>
</div>
</div>
<div class="footer-wrap">
<div class="footer container">页脚</div>
</div>
</div>
</body>
</html>
二、【流式布局 / 百分比布局 / 等比缩放布局】宽度百分比,浏览器放大缩小,布局不变(水平无滚动条,高一般随内容撑开或固定值)
2-1.单列布局
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarer {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
height: 100%;
background: #fcc;
position: absolute;
}
.header, .main-body, .footer {
display: table;
width: 100%;
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.text {
display: table-cell;
vertical-align:middle;
}
.header {
height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.main-body {
height: 600px;
background: rgba(0, 0, 0, 0.2);
}
.footer {
height: 80px;
background: rgba(0, 66, 200, 0.2);
}
</style>
</head>
<body>
<div class="bg">
<div class="header">
<div class="text">头部</div>
</div>
<div class="main-body">
<div class="text">主要</div>
</div>
<div class="footer">
<div class="text">页脚</div>
</div>
</div>
</body>
</html>
2-2.混合布局:单双单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
height: 100%;
background: #fcc;
position: absolute;
}
.header, .main-left, .main-middle, .footer {
display: table;
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.header, .main-body, .footer {
width: 100%;
}
.text {
display: table-cell;
vertical-align: middle;
}
.header {
height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.footer {
height: 80px;
background: rgba(0, 66, 200, 0.2);
}
.main-left, .main-middle {
height: 600px;
float: left;
}
.main-left {
width: 30%;
background: rgba(100, 100, 100, 0.2);
}
.main-middle {
width: 70%;
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="bg">
<div class="header">
<div class="text">头部</div>
</div>
<div class="main-body clearfix">
<div class="main-left">
<div class="text">左栏</div>
</div>
<div class="main-middle">
<div class="text">主要</div>
</div>
</div>
<div class="footer">
<div class="text">页脚</div>
</div>
</div>
</body>
</html>
2-3.混合布局:单三单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
height: 100%;
background: #fcc;
position: absolute;
}
.header, .main-left, .main-middle, .main-right, .footer {
display: table;
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.header, .footer, .main-body {
width: 100%;
}
.text {
display: table-cell;
vertical-align: middle;
}
.header {
height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.footer {
height: 80px;
background: rgba(0, 66, 200, 0.2);
}
.main-left, .main-middle, .main-right {
height: 600px;
float: left;
}
.main-left, .main-right {
width: 20%;
background: rgba(100, 100, 100, 0.2);
}
.main-middle {
width: 60%;
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="bg">
<div class="header">
<div class="text">头部</div>
</div>
<div class="main-body clearfix">
<div class="main-left">
<div class="text">左栏</div>
</div>
<div class="main-middle">
<div class="text">主要</div>
</div>
<div class="main-right">
<div class="text">右栏</div>
</div>
</div>
<div class="footer">
<div class="text">页脚</div>
</div>
</div>
</body>
</html>
三、【静态+流式】侧栏宽固定,主体宽度自适应
3-1.混合布局:单双单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
height: 100%;
overflow: hidden;
background: #fcc;
position: absolute;
}
.header, .main-left, .main-middle, .footer {
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.header, .footer, .main-left {
display: table;
}
.text {
display: table-cell;
vertical-align: middle;
}
.header {
width: 100%;
height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.footer {
width: 100%;
height: 80px;
background: rgba(0, 66, 200, 0.2);
}
.main-body {
width: 100%;
height: 600px;
position: relative;
}
.main-left, .main-middle {
height: 100%;
position: absolute;
}
.main-left {
width: 300px;
background: rgba(100, 100, 100, 0.2);
left: 0px;
}
.main-middle {
width: auto;
line-height: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.2);
left: 300px;
right: 0;
}
.middle-text-wrap {
position: relative;
left: 50%;
top: 50%;
}
.middle-text {
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="bg">
<div class="header">
<div class="text">头部</div>
</div>
<div class="main-body">
<div class="main-left">
<div class="text">左栏</div>
</div>
<div class="main-middle">
<div class="middle-text-wrap clearfix">
<div class="middle-text">主要</div>
</div>
</div>
</div>
<div class="footer">
<div class="text">页脚</div>
</div>
</div>
</body>
</html>
3-2.混合布局:单三单(单侧栏固定)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
height: 100%;
overflow: hidden;
background: #fcc;
position: absolute;
}
.header, .main-left, .main-middle, .main-right, .footer {
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.text {
display: table-cell;
vertical-align: middle;
}
.header, .footer {
display: table;
width: 100%;
}
.header {
height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.footer {
height: 80px;
background: rgba(0, 66, 200, 0.2);
}
.main-body {
width: 100%;
min-width: 300px;
position: relative;
}
.main-left, .main-body-box, .main-middle, .main-right {
height: 600px;
float: left;
}
.main-left {
display: table;
width: 300px;
background: rgba(100, 100, 100, 0.2);
}
.main-body-box {
float: none;
line-height: 0;
position: absolute;
left: 300px;
right: 0;
}
.main-middle {
width: 70%;
background: rgba(0, 0, 0, 0.2);
position: relative;
}
.main-right {
width: 30%;
background: rgba(100, 100, 100, 0.2);
position: relative;
}
.box-text-wrap {
position: relative;
left: 50%;
top: 50%;
}
.box-text {
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="bg">
<div class="header">
<div class="text">头部</div>
</div>
<div class="main-body clearfix">
<div class="main-left">
<div class="text">左栏</div>
</div>
<div class="main-body-box">
<div class="main-middle">
<div class="box-text-wrap">
<div class="box-text">主要</div>
</div>
</div>
<div class="main-right">
<div class="box-text-wrap">
<div class="box-text">右栏</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="text">页脚</div>
</div>
</div>
</body>
</html>
3-3.混合布局:单三单(双侧栏固定)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
height: 100%;
overflow: hidden;
background: #fcc;
position: absolute;
}
.header, .main-left, .main-middle, .main-right, .footer {
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.text {
display: table-cell;
vertical-align: middle;
}
.header, .footer {
display: table;
width: 100%;
}
.header {
height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.footer {
height: 80px;
background: rgba(0, 66, 200, 0.2);
}
.main-body {
width: 100%;
min-width: 600px;
position: relative;
}
.main-left, .main-middle, .main-right {
height: 600px;
float: left;
}
.main-left, .main-right {
display: table;
width: 300px;
background: rgba(100, 100, 100, 0.2);
}
.main-right {
position: absolute;
right: 0;
}
.main-middle {
width: auto;
line-height: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.2);
position: absolute;
left: 300px;
right: 300px;
}
.middle-text-wrap {
position: relative;
left: 50%;
top: 50%;
}
.middle-text {
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="bg">
<div class="header">
<div class="text">头部</div>
</div>
<div class="main-body clearfix">
<div class="main-left">
<div class="text">左栏</div>
</div>
<div class="main-middle">
<div class="middle-text-wrap clearfix">
<div class="middle-text">主要</div>
</div>
</div>
<div class="main-right">
<div class="text">右栏</div>
</div>
</div>
<div class="footer">
<div class="text">页脚</div>
</div>
</div>
</body>
</html>
四、【圣杯布局】&【双飞翼布局】(属于【流式布局】:左右侧栏固定,主栏自适应)
4-1.【圣杯布局】
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
min-width: 550px;
min-height: 100%;
overflow: hidden;
background: #fcc;
position: absolute;
}
.header, .main-left, .main-middle, .main-right, .footer {
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.header, .main-middle, .footer {
width: 100%;
}
.header {
height: 180px;
line-height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.footer {
height: 80px;
line-height: 80px;
background: rgba(0, 66, 200, 0.2);
}
.main-body {
padding-left: 200px;
padding-right: 150px;
}
.main-left, .main-middle, .main-right {
height: 600px;
line-height: 600px;
float: left;
}
.main-left, .main-right {
width: 200px;
background: rgba(100, 100, 100, 0.2);
}
.main-left {
margin-left: -100%;
position: relative;
right: 200px;
}
.main-right {
margin-right: -200px;
}
.main-middle {
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="bg">
<div class="header">头部</div>
<div class="main-body clearfix">
<div class="main-middle">主要</div>
<div class="main-left">左栏</div>
<div class="main-right">右栏</div>
</div>
<div class="footer">页脚</div>
</div>
</body>
</html>
4-2.【双飞翼布局】
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.bg {
width: 100%;
min-width: 550px;
min-height: 100%;
overflow: hidden;
background: #fcc;
position: absolute;
}
.header, .main-left, .main-middle, .main-right, .footer {
font-size: 20px;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.header, .main-middle-wrap, .footer {
width: 100%;
}
.header {
height: 180px;
line-height: 180px;
background: rgba(150, 100, 0, 0.2);
}
.footer {
height: 80px;
line-height: 80px;
background: rgba(0, 66, 200, 0.2);
clear: both;
}
.main-left, .main-middle-wrap, .main-right {
float: left;
}
.main-left, .main-middle, .main-right {
line-height: 600px;
}
.main-left, .main-right {
background: rgba(100, 100, 100, 0.2);
}
.main-middle {
height: 600px;
margin-left: 200px;
margin-right: 200px;
background: rgba(0, 0, 0, 0.2);
}
.main-left {
width: 200px;
height: 600px;
margin-left: -100%;
}
.main-right {
width: 200px;
height: 600px;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="bg">
<div class="header">头部</div>
<div class="main-middle-wrap"">
<div class="main-middle">主要</div>
</div>
<div class="main-left">左栏</div>
<div class="main-right">右栏</div>
<div class="footer">页脚</div>
</div>
</body>
</html>
五、【自适应布局】还未学到css3,尽情期待…
六、【响应式布局】还未学到css3,尽情期待…
七、【弹性布局】还未学到css3,尽情期待…
八、【瀑布流布局】还未学到css3,尽情期待…
九、【栅格布局】还未学到css3、框架,尽情期待…