Gattyan

課題

課題画像リンク

html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC"-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/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 sprit1</title>
<link href="css/base3.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>
<body>
<div id="row">
  <ul>
    <li id="home"><a href="#"><em>Home</em></a></li>
    <li id="blog"><a href="#"><em>Blog</em></a></li>
    <li id="products"><a href="#"><em>Products</em></a></li>
    <li id="about"><a href="#"><em>About</em></a></li>
    <li id="contact"><a href="#"><em>Contact</em></a></li>
  </ul>
</div>
<div id="line">
  <ul>
    <li id="home"><a href="#"><em>Home</em></a></li>
    <li id="blog"><a href="#"><em>Blog</em></a></li>
    <li id="products"><a href="#"><em>Products</em></a></li>
    <li id="about"><a href="#"><em>About</em></a></li>
    <li id="contact"><a href="#"><em>Contact</em></a></li>
  </ul>
</div>
</body>
</html>

css

* {
  margin:0;
  padding:0;
}
em {
  visibility:hidden;
}
img {
  border:0;
}
ul {
  list-style-type:none;
}
body {
  background-color:#fff;
}
#row {
  width:750px;
  height:50px;
  margin:30px 30px;
  background-color:#fff;
}
#row li {
  float:left;
  display:inline;
}
#row li a {
  width:150px;
  height:50px;
  text-decoration:none;
  display:block;
  background-image:url(../images/button1.jpg);
  background-repeat:no-repeat;
}
#row li#home a {
  background-position:0 0;
}
#row li#home a:hover,#row li#home a:active {
  background-position:0 -70px;
}
#row li#blog a {
  background-position:-150px 0;
}
#row li#blog a:hover,#row li#blog a:active {
  background-position:-150px -70px;
}
#row li#products a {
  background-position:-300px 0;
}
#row li#products a:hover,#row li#products a:active {
  background-position:-300px -70px;
}
#row li#about a {
  background-position:-450px 0;
}
#row li#about a:hover,#row li#about a:active {
  background-position:-450px -70px;
}
#row li#contact a {
  background-position:-600px 0; 
}
#row li#contact a:hover,#row li#contact a:active {
  background-position:-600px -70px;
}
#line {
  width:150px;
  height:250px;
  margin:30px 30px;
  background-color:#fff;
}
#line li a {
  width:150px;
  height:50px;
  display:block;
  background-image:url(../images/button2.jpg);
  background-repeat:no-repeat
}
#line li#home a {
  background-position:0 0;
}
#line li#home a:hover,#line li#home a:active {
  background-position:-170px 0;
}
#line li#blog a {
  background-position:0 -50px;
}
#line li#blog a:hover,#line li#blog a:active {
  background-position:-170px -50px;
}
#line li#products a {
  background-position:0 -100px;
}
#line li#products a:hover,#line li#products a:active {
  background-position:-170px -100px;
}
#line li#about a {
  background-position:0 -150px;
}
#line li#about a:hover,#line li#about a:active {
  background-position:-170px -150px;
}
#line li#contact a {
  background-position:0 -200px;
}
#line li#contact a:hover,#line li#contact a:active {
  background-position:-170px -200px;
}

arrow