プレゼン発表中の課題

HTML CSS

金曜の授業中に入力できたところまで。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Green and Plain</title>
<link href="green_base.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
<div id="title">
<img src="images/img03.jpg">
<h1>Green and Plain</h1>
<h2>Design by Free CSS Templates</h2>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="container">
<div id="content">
<h1>Welcome to our website</h1>
<h2>Lorem Ipsum Dolor Volutpat</h2>
</div>
<div id="side">
</div>
<div id="footer">
<p>(c) 2012.Design by Free CSS Templates.</p>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*ヘッダーにはナビも含む*/

#header {
	background-img: url(images/img01.jpg) repeat-x;
	position-relative: top left 0;
}
#title {
	float: left;
}
#title img{
	
}
#title h1{
	color: #fff;
	vertical-align: top;
	font-size: 36px;
}
#title h2{
	color: #fff;
	vertical-align: bottom;
	font-size: 24px;
}

/*ナビ*/

#nav {
	float: right;
	background-img: url(images/img02.jpg) repeat-x;
	width: 400px;
	position-relative: top right 30px;
}
#nav ul {
	list-style:none;
}
#nav li {
	float: left;
	display: block;
	width: 100px;
	height: 20px;
	vertical-align: middle;
	border-right: 1px solid #fff;
}
#nav li.first {
	border-right: 0;
}

/*コンテナ*/
#container {
	width： 900px;
	margin: 0 auto;
	clear: both;
}

/*本文エリア*/
#content {
	float: left;
}
#content h1{
	
}
#content h2{
	
}


/*サイドエリア*/
#side {
	
}
#side h1{
	color: #fff;
	background-color: #699c4d;
}

/*フッター*/
#footer {
	background-color: #699c4d;
	clear: both;
	height: 80px;
}
#footer p {
	color: #fff;
	text-align: center;
	padding-top: 30px;
}