Home >Web Front-end >HTML Tutorial >div css classic three rows and two columns layout_html/css_WEB-ITnose
div css classic three rows and two columns layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:321707browse
Write it in front
I encountered such a written test question during the interview. I used div css to layout a page with three rows and two columns. What we mainly examine here is the specific usage of postion in CSS. For detailed information, please refer to my article:
[HTML/CSS] Talk about position
Code
If you have nothing to do, just do it yourself After implementing it, the code is as follows:
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> Result
Summary
The knowledge points examined are in css Postion, in the written test, you don’t have to write it down. The same goes for listing the key points.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html button style becomes rounded_html/css_WEB-ITnoseNext article：html button style becomes rounded_html/css_WEB-ITnose