CSS　Sprit

授業　復習 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<div id="container">
<div id="header">
<p>ここにheaderが入る</p>
<div id="nav">
<ul>
<li id="home"><a href="#"><span>home</span></a></li>
<li id="food"><a href="#"><span>food</span></a></li>
<li id="drink"><a href="#"><span>drink</span></a></li>
<li id="info"><a href="#"><span>info</span></a></li>
<li id="contact"><a href="#"><span>contact</span></a></li>
</ul>
</div>
</div><!-- /header -->

<div id="wrapper">
<div id="content">
<p>ここにcontentが入る</p>
</div>
<div id="sidebar">
ここにsidebarが入る
</div>
</div><!-- /wrapper -->

<div id="footer">
<p>ここにfooterが入る</p>
</div>
</div><!-- /container -->
</body>
</html>

@charset "UTF-8";
body,div,ul,li,p{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
span{
  visibility: hidden;
}
/* layout */
body{
  font-size: 20px;
  color: #000;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  background: #fff;
}
#container{
  width: 800px;
  padding: 10px;
  margin: 0 auto;
  border: 1px dotted #333;
}
#header{
  height: 120px;
  margin-bottom: 10px;
}
#nav{
  width: 800px;
}

#wrapper{
  width: 800px;
  overflow: hidden;
  margin-bottom: 10px;
}
#content{
  float: left;
  width: 590px;
  height: 300px;
  background: #FFE9AF;
  line-height: 300px;
}
#sidebar{
  float: right;
  width: 200px;
  height: 300px;
  background: #CFB71F;
  line-height: 300px;
}
#footer{
  height: 50px;
  background: #DDB5E8;
  clear: both;
  line-height: 50px;
}
/*  */
#nav ul{
  width: 800px;
  height: 130px;
}
#nav li{
  float: left;
  }
#nav li a{
  width: 160px;
  height: 60px;
  display: block;
  background: url(img/btn.jpg) no-repeat left top;
  }
li#home a{
  background-position: left top;
}
li#home a:hover, li#home a:active{
  background-position: left -70px;
}
li#food a{
  background-position: -160px top;
}
li#food a:hover, li#food a:active{
  background-position: -160px -70px;
}
li#drink a{
  background-position: -320px top;
}
li#drink a:hover, li#drink a:active{
  background-position: -320px -70px;
}
li#info a{
  background-position: -480px top;
}
li#info a:hover, li#info a:active{
  background-position: -480px -70px;
}
li#contact a{
  background-position: -640px top;
}
li#contact a:hover, li#contact a:active{
  background-position: -640px -70px;
}
#nav{
  margin-top: 30px;
}
p{
  text-align: center;
}