总结几种常见的布局方式，练练手。
行布局
基础的行布局
行布局自适应
行布局自适应限制最大宽
行布局垂直水平居中
列布局
两列布局固定，两列布局自适应（float，百分比）
三列布局固定，三列布局自适应
圣杯布局
三栏布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；
用最简单的css、最少的hack语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer {
float: right;
width: 100%;
background: #ddd;
height: 40px;
line-height: 40px;
text-align: center;
}
.left,
.right,
.middle {
position: relative;
float: left;
min-height: 300px;
}
.container {
padding: 0 220px 0 200px;
}
.middle {
width: 100%;
background: #1a5acd;
}
.left {
width: 200px;
background: #f00;
margin-left: -100%;
left: -200px;
}
.right {
width: 220px;
background: #30a457;
margin-left: -220px;
right: -220px;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>中间内容</p>
</div>
<div class="left">
<h4>left</h4>
<p>左边内容</p>
</div>
<div class="right">
<h4>right</h4>
<p>右边内容</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
|
双飞翼布局
Holy Grail的升级版，去掉相对布局，只用浮动和负边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer {
width: 100%;
float: left;
height: 40px;
background: #dddddd;
text-align: center;
line-height: 40px;
}
.sub,
.main,
.extra {
float: left;
min-height: 300px;
}
.main {
width: 100%;
}
.main-inner {
margin-left: 200px;
margin-right: 220px;
background: #30a457;
min-height: 300px;
}
.sub {
width: 200px;
background: #f00;
margin-left: -100%;
}
.extra {
width: 220px;
background: #1a5acd;
margin-left: -220px;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="main">
<div class="main-inner">
<h4>main</h4>
<p>content</p>
</div>
</div>
<div class="sub">
<h4>sub</h4>
<p>content</p>
</div>
<div class="extra">
<h4>extra</h4>
<p>content</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
|
第一阶段总结
后面还要找个时间做几遍案例的网页，然后总结出来常用的几个方式。