ホームページ >ウェブフロントエンド >htmlチュートリアル >div+css クラシック 3 行 2 列layout_html/css_WEB-ITnose
div+css クラシック 3 行 2 列layout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:48:321706ブラウズ
前に書いてください
面接中にこのような筆記試験の質問に遭遇しました。div+cssを使用して3行2列のページをレイアウトしました。ここで主に検討するのは、CSS における postion の具体的な使用法です。詳細については、私の記事を参照してください:
[HTML/CSS] 位置の話
code
やることがなかったので自分で実装したコードは次のとおりです:
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> 結果
まとめ
筆記試験では、調べた知識ポイントをメモする必要はありません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。