Maison > Article > interface Web > div+css经典三行两列布局_html/css_WEB-ITnose
div+css经典三行两列布局_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:48:321672parcourir
写在前面
在面试的时候遇到这样一个笔试题，使用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，在笔试的时候，不是非得动笔写出来才行，列出要点，也一样。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：html button样式变圆角_html/css_WEB-ITnoseArticle suivant：IE6 PNG透明终极解决方案（打造W3Cfuns-IE6PNG最强帖）_html/css_WEB-ITnose