学校での製作

20120530060932

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="ja" xml;lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/css" />
<title>テスト</title>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="test.css" media="all">
<!--
*{
    margin: 0;
		padding: 0;
		font-size: 100%;
		font-style: normal;
		font-weight: normal;
		list-style-type: none;
		border: none;
		text-align: left;
}
ul{
    list-style-type: inline;
}
#container {
    width: 830px;
		height: 720px;
		margin: 10px;
		background-color: #000;
}
#header {
    width: 800px;
		height: 120px;
		background-color: #F00;
		margin: 10px;
		position: relative;
		top: 10px;
}
#wrapper{
    width: 800px;
		height: 430px;
		margin: 10px;
		position: relative;
		top: 10px;
		background-color: #00f;
}
#nav{
    width: 800px;
		height: 60px;
		margin: 10px;
		position: relative;
		top: 10px;
		background-color: #fff;
}
#nav ul{
    width: 770px;
		height: 60px;
		margin: 10px;
}
#nav li{
    width: 120px;
		height: 50px;
		float: left;
		margin: 10px;
		border-top: 2px outset #C0F;
		border-right: 2px outset #C0F;
		border-bottom: 2px outset #C0F;
		border-left: 10px outset #C0F;
}
#nav li a{
    width: auto;
		height: auto;
		float: left;
		text-align: center;
		display: compact;
}
#nav a:link #nav a:visited{
    color: #000;
		text-decoration: underline;
}
#nav a:hover {
    color: #000;
		background-color: #ff0;
}
#content{
    width: 590px;
		height: 400px;
		margin: 10px 10px 10px 0;
		background-color: #0F0;
		float: right;
}
#sidebar{
    width: 180px;
		height: 400px;
		float: left;
		margin: 10px 0 10px 10px;
		background-color: #0FF;
}
#footer{
    width: 800px;
		height: 60px;
		margin: 10px;
		position: relative;
		top: 10px;
		background-color: #FF0;
		clear: both;
}
h1{
	  text-align: center;
		color: #FFF;
}
-->
</style>
</head>

<body>
<div id="container">
    <div id="header">
        <h1>テストその１</h1>
    </div>
<div id="nav">
<ul>
<li><a href="#">和食</a></li>
<li><a href="#">中華</a></li>
<li><a href="#">フランス</a></li>
<li><a href="#">イタリア</a></li>
<li><a href="#">インディア</a></li>
</ul>
</div>
            <div id="wrapper">
                <div id="content">
                    <p>コンテント</p>
                </div>
                <div id="sidebar">
                    <p>サイドバー</p>
                </div>
            </div>
    <div id="footer">
    <address>連絡先</address>
    </div>
</div>
</body>
</html>