好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

查看更多关于div+css经典三行两列布局_html/css_WEB-ITnose的详细内容...

  阅读:42次