老板忽然給了個任務(wù)，要求作出個照片墻的頁面出來。照片墻網(wǎng)上有現(xiàn)成的代碼可以用，很容易搞出來。犯難的是頁面的布局和排版，因為一直做的是后端開發(fā)，對 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%;
}
這里關(guān)鍵之處在于position:absolute，設(shè)置了絕對定位。然后通過left top right bottom讓各模塊靠邊站，就可以了。
另外還發(fā)現(xiàn)所有的width height都可以采用百分比來控制，這個酸爽！！??
