ウェブレイアウトの基本。
上、左、右、下 をボックス表示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>DIV基本レイアウト</title>
<STYLE TYPE="text/css">
#contents {
width : 850px;
border: 2px dotted #FF9900;
margin: 0; #auto → 中央表示。
}
#box-u {
background-color: lightblue;
}
#box-l {
float: left;
width: 600px;
background-color: lightgreen;
}
#box-r {
float: right;
width: 250px;
background-color: orange;
}
#box-b {
clear: both;
width: 850px;
background-color: #FFFF99;
}
</STYLE>
</HEAD>
<body>
<div id="contents">
<h1>DIV基本レイアウト</h1>
<div id="box-u">上ボックス</div>
<div id="box-l">左ボックス</div>
<div id="box-r">右ボックス</div>
<div id="box-b">下ボックス</div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿