使用绝对定位布局

老板忽然给了个任务，要求作出个照片墙的页面出来。照片墙网上有现成的代码可以用，很容易搞出来。犯难的是页面的布局和排版，因为一直做的是后端开发，对 div + css 并不了解。这么小的功能外包给人弄吧又太浪费。只好不停的百度和试验，没想到还真可以。

第一先上效果图

html布局.jpg

然后看代码
html 如下：

    
    
    
    
    
    
    
banner
    

        content
    
    

        left
    
    

下面是样式表：

* {
    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都可以采用百分比来控制，这个酸爽！！