div layoutフォームの作成
日記を紹介するスタイルで作ります.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>First Page</title>
<style type="text/css">
#container {width: 1100px; margin: 10px; padding: 10px;}
#header{ width: 1100px; hei: 150; float: left;}
#nav{width: 500px; height: 630px; margin: 10px; border: 1px solid white; padding: 10px; float :left;}
#article{width: 1040px; margin: 10px; border: 1px solid white; padding: 10px; float :left;}
#box{width: 200px; height: 200px; margin: 10px; margin-left: 15px; border: 1px solid white; padding: 10px; float :left;}
#page{width: 500px; height: 10px; margin: 0px; padding: 0px; float :left;}
#footer{clear: both}
body { background-color: powderblue;}
ul {
padding-inline-start: 0px;
}
h1 {
color: tomato;
font-size: 300%;
}
h2 {
color: tomato;
font-size: 200%;
}
.center {
text-align: center;
}
.size1 {
font-size: 200%;
}
.size2 {
font-size: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1 class="center">Welcome My Diary!</h1>
</div>
<div id="article">
<span class="size1">December is </span>
<span> just around the corner.</span> <br>
<p> 2021 is only a month away. The first thing I look for in anticipation of the New Year is a diary.<br>
As if to know how consumers feel, the coffee franchise industry releases a diary that catches consumers' attention through attractive designs and various collaborations every year. Diary that was released this year.</p>
</div>
<div id="nav">
<ul>
<h2 class="center">MONTH</h2>
<p class="center">January</p>
<p class="center">February</p>
<p class="center">March</p>
<p class="center"> April</p>
<p class="center">May</p>
<p class="center">June</p>
<p class="center">July</p>
<p class="center">August</p>
<p class="center">September</p>
<p class="center">October</p>
<p class="center">November</p>
<p class="center">December</p>
<div id="page">
<p class="center" style="color: tomato">1 2 3 4 5 6 7 8 9 10 11 12</p>
</div>
</ul>
</div>
<div id="nav">
<ul>
<h2 class="center">JANUARY</h2>
<div id="box">
<p class="center">MONDAY</p>
</div>
<div id="box">
<p class="center">THUESDAY</p>
</div>
<div id="box">
<p class="center">WEDNESDAY</p>
</div>
<div id="box">
<p class="center">THURSDAY</p>
</div>
<div id="page">
<p class="center" style="color: tomato">1</p>
</div>
</ul>
</div>
<div id="nav">
<ul>
<h2 class="center">JANUARY</h2>
<div id="box">
<p class="center">FRIDAY</p>
</div>
<div id="box">
<p class="center">SATURDAY</p>
</div>
<div id="box">
<p class="center">SUNDAY</p>
</div>
<div id="page">
<p class="center" style="color: tomato">2</p>
</div>
</ul>
</div>
<div id="footer">
<h3 style="color:white">Hello.BuyMydiary.co.kr</h3>
</div>
</div>
</body>
</html>Reference
この問題について(div layoutフォームの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@dearlee/html-div-layout-양식-만들어보기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol