寫在前面
在面試的時候遇到這樣一個筆試題，使用div+css布局一個三行兩列的頁面。這里主要考察的是css中postion的具體用法。詳細信息可參考我這篇文章：
代碼
閑來無事，就自己動手實現了一下，代碼如下：
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，在筆試的時候，不是非得動筆寫出來才行，列出要點，也一樣。