レイアウトイメージ
ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test laylout</title>
<style type="text/css">
div
{
display: block;
}
#container
{
width: 640px;
margin: auto;
background-color: whitesmoke;
}
#header
{
border: 3px solid green;
}
#maincontent
{
float: left;
}
#lmenu
{
border: 3px solid brown;
width: 160px;
float: left;
}
#content
{
border: 3px dotted blueviolet;
width: 300px;
float: right;
height: 400px;
}
#rmenu
{
border: 3px solid chocolate;
width: 160px;
float: right;
}
#footer
{
border: 3px solid blue;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="maincontent">
<div id="lmenu">
<h3>LMenu</h3>
</div>
<div id="content">
<h1>Content</h1>
</div>
</div>
<div id="rmenu">
<h3>RMenu</h3>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿