確認テスト（２）

【記述実践】

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">



<link rel="stylesheet" href="style.css" type="text/css" media="screen,print">

</head>

<body>

<div id="oosoto">

<div id="hed">

</div> <!-- hed -->

<div id="nav">

<ul>

<li><a href="#">aaa</a></li>

<li><a href="#">bbb</a></li>

<li><a href="#">ccc</a></li>

<li><a href="#">ddd</a></li>

<li><a href="#">eee</a></li>

</ul>

</div> <!-- nav -->



<div id="rap">

<div id="hidari">

</div> <!-- hidari -->

<div id="migi">

</div> <!-- migi -->

</div> <!-- rap -->



<div id="fot">

</div> <!-- fot -->

</div> <!-- oosoto -->



</body>

</html>



@charset "UTF-8";

*{ margin:0;	padding:0;}

body{	margin	:10px;}

#oosoto{
	background-color	:#000;
	width	:800px;
	margin	:auto;
	
	
}

	#hed{
		background-color	:#0f0;
		height: 120px;
		margin	:0;
		
	}

	
	#nav{
		background-color	:#ff0;
		height: 60px;
		
	}

		#nav li{	list-style-type	:none;}
		#nav a{	
			width	:156px;
			line-height:60px;
			display	: block;
			text-align:center;
			float	:left;
		}

		#nav a:link{	color 	:#000;}
		#nav a:visited{	color	:#fff;}
		#nav a:hover{	color	:#f00;}	


#hidari{
	background-color	:#0ff;
	width 	:200px;
	
	height	:360px;
	float	:left;
}

#migi{
	background-color	:#f0f;
	width 	:600px;
	
	height	:360px;
	float	:right;

}

#rap{
	
	background-color	:#02f;
	overflow	:hidden;
}

#fot{
	background-color	:#4f0;
	height	:60px;
}


【応用】

@charset "UTF-8";

*{ margin:0;	padding:0;}

body{	margin	:10px;}

#oosoto{
	background-color	:#000;
	width	:800px;
	margin	:auto;
	padding :10px;
	
}

	#hed{
		background-color	:#0f0;
		height: 120px;
		
	}

	
	#nav{
		background-color	:#ff0;
		height: 60px;
		margin :10px 0;
	}

		#nav li{	list-style-type	:none;}
		#nav a{	
			width	:156px;
			line-height:60px;
			display	: block;
			text-align:center;
			float	:left;
		}

		#nav a:link{	color 	:#000;}
		#nav a:visited{	color	:#fff;}
		#nav a:hover{	color	:#f00;}	


#hidari{
	background-color	:#0ff;
	width 	:195px;
	margin	:0 10px 0 0;
	height	:310px;
	float	:left;
}

#migi{
	background-color	:#f0f;
	width 	:595px;
	margin	:0 0 10px 0px;
	height	:310px;
	float	:right;

}

#rap{
	
	background-color	:#02f;
	overflow	:hidden;
}

#fot{
	background-color	:#4f0;
	height	:60px;
}