CSS Spriteで設定

CSS

CSS Spriteの復習（練習）

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CSS Spriteの練習</title>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, print" />
</head>
<body>
<ul>
<li id="home"><a href="#">ホーム</a></li>
<li id="food"><a href="#">カフェフード</a></li>
<li id="drink"><a href="#" >カフェドリンク</a></li>
<li id="info"><a href="#">インフォメーション</a></li>
<li id="contanct"><a href="#">お問い合わせ</a></li>
</ul>
</body>
</html>

@charset "UTF-8";
*  {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  width: 160px;
  height: 200px;
  margin: 10px auto;
}
li a {
  display: block;
  overflow: hidden;
  width: 0;
  height: 40px;
  padding-left: 160px;
  background-image: url(../img/btn.jpg);
}

#home a {
  background-position: 0 0;
}
#food a {
  background-position: 0  -40px;
}
#drink a {
  background-position: 0 -80px;
}
#info a {
  background-position: 0 -120px;
}
#contanct a {
  background-position: 0 -160px;
}

#home a:hover {
  background-position: -160px 0;
}
#food a:hover {
  background-position: -160px  -40px;
}
#drink a:hover {
  background-position: -160px -80px;
}
#info a:hover {
  background-position: -160px -120px;
}
#contanct a:hover {
  background-position: -160px -160px;
}