老板忽然给了个任务，要求作出个照片墙的页面出来。照片墙网上有现成的代码可以用，很容易搞出来。犯难的是页面的布局和排版，因为一直做的是后端开发，对 div + css 并不了解。这么小的功能外包给人弄吧又太浪费。只好不停的百度和试验，没想到还真可以。
第一先上效果图
html布局.jpg
然后看代码
html 如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<title>签到墙</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="banner"><p style="">banner</p></div>
<div class="content">
content
</div>
<div class="left">
left
</div>
</body>
</html>
下面是样式表：
* {
margin:0;
padding:0;
}
.banner {
position:absolute;
top:0px;
width:100%;
height:20%;
Background:#073;
text-align:center;
}
.content {
position:absolute;
right:0px;
bottom:0px;
width:75%;
height:80%;
background:#fffaba;
}
.left {
position:absolute;
left:0px;
bottom:0px;
background:#8fc41f;
width:25%;
height:80%;
}
这里关键之处在于position:absolute，设置了绝对定位。然后通过left top right bottom让各模块靠边站，就可以了。
另外还发现所有的width height都可以采用百分比来控制，这个酸爽！！😊
