Maison > interface Web > tutoriel HTML > div+css经典三行两列布局_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:48:32
original
1705 Les gens l'ont consulté

写在前面

在面试的时候遇到这样一个笔试题,使用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>
Copier après la connexion

结果

总结

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

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal