div+css经典三行两列布局_html/css_WEB-ITnose

写在前面

在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：

[HTML/CSS]说说position

代码

闲来无事，就自己动手实现了一下，代码如下：

 1  2  3  4  5      6      7      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     51 52 53     
54         
55          56         
57         
58 59         
60         
61         
111111
62 63     
64 65 

登录后复制

结果

立即学习“前端免费学习笔记（深入）”；

总结

考察的知识点就是css中的postion，在笔试的时候，不是非得动笔写出来才行，列出要点，也一样。