写在前面
在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：
[HTML/CSS]说说position
代码
闲来无事，就自己动手实现了一下，代码如下：
1 <!DOCTYPE html>2
3 <html>
4 <head>
5 <meta name="viewport" content="width=device-width" />
6 <title>首页</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 div {
14 border: 1px solid red;
15 }
16 /*整个容器*/
17 #main {
18 position: relative;
19 height: 768px;
20 }
21 /*头部*/
22 #head {
23 position: absolute;
24 height: 10%;
25 width: 100%;
26 }
27 /*左部*/
28 #left {
29 width: 15%;
30 position: absolute;
31 height: 80%;
32 top: 10%;
33 }
34 /*内容部分*/
35 #content {
36 position: absolute;
37 top: 10%;
38 left: 15%;
39 width: 85%;
40 height: 80%;
41 border-bottom: -1px;
42 }
43 /*下部*/
44 #foot {
45 position: absolute;
46 width: 100%;
47 height: 9.5%;
48 bottom: 0px;
49 }
50 </style>
51 </head>
52 <body>
53 <div id="main">
54 <div id="head">
55
56 </div>
57 <div id="left">
58
59 </div>
60 <div id="content"></div>
61 <div id="foot">111111</div>
62
63 </div>
64 </body>
65 </html>
结果
总结
考察的知识点就是css中的postion，在笔试的时候，不是非得动笔写出来才行，列出要点，也一样。