スペースを分割するHTMLタグ

9611 ワード

Webレイアウト

モダンネットワークでは、主にdivラベルを使用してレイアウトを整理します.

📝コード#コード#

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<title>HTML Layouts</title>
	<style>
          #header {
              background-color: palegoldenrod;
              color: white;
              width: 700px;
              height: 100px;
          }
          #nav {
              background-color: lightskyblue;
              color: white;
              width: 100px;
              height: 300px;
              float: left;
          }
          #section {
              background-color: lightgreen;
              color: white;
              width: 600px;
              height: 300px;
              float: left;
          }
          #footer {
              background-color: plum;
              color: white;
              width: 700px;
              height: 100px;
              clear: both;
          }
	</style>
  </head>
  <body>
    <div id="header"><h2>Header 영역</h2></div>

    <div id="nav"><h2>Nav 영역</h2></div>

    <div id="section"><h2>Section 영역</h2></div>

    <div id="footer"><h2>Footer 영역</h2></div>
  </body>
</html>