H13 C13

JavaScript 授業　演習問題 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>H13</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="main">
<h1>
<img src="img/logo.gif" width="267" height="129" alt="Patisserie camellia">
</h1>
<ul>
<li><a href="#" class="info"><span>Information</span></a></li>
<li><a href="#" class="menu"><span>Menu</span></a></li>
<li><a href="#" class="access"><span>Access</span></a></li>
<li><a href="#" class="mail"><span>Mail</span></a></li>
</ul>
</div>
<div id="pics">
<ul>
<li id="img01"><img src="img/photo01.jpg" width="160" height="160" alt="プリン"></li>
<li id="img02"><img src="img/photo02.jpg" width="160" height="160" alt="ショートケーキ"></li>
<li id="img03"><img src="img/photo03.jpg" width="160" height="160" alt="ワッフル"></li>
<li id="img04"><img src="img/photo04.jpg" width="80" height="80" alt="コーヒー"></li>
<li id="img05"><img src="img/photo05.jpg" width="80" height="80" alt="キャンドル"></li>
<li id="img06"><img src="img/photo06.jpg" width="80" height="80" alt="イチゴプリン"></li>
<li id="img07"><img src="img/photo07.jpg" width="80" height="80" alt="イチゴスムージー"></li>
<li id="img08"><img src="img/photo08.jpg" width="80" height="80" alt="ヨーグルト"></li>
<li id="img09"><img src="img/photo09.jpg" width="80" height="80" alt="ライト"></li>
<li id="img10"><img src="img/photo10.jpg" width="80" height="80" alt="コーヒー"></li>
</ul>
<a href="#"><img src="img/campaign.gif" width="170" height="100" alt="キャンペーン情報"></a>
</div>
</div><!-- /wrapper -->
</body>
</html>

@charset "utf-8";
body,div,ul,li,img,span{
  margin: 0;
  padding: 0;
}
ul{
  list-style:none;
}
a{
  text-decoration:none;
}
span{
  visibility: hidden;
}
body{
  background: #5b3e1c;
}
#wrapper{
  width:770px;
  height:410px;
  margin: 100px auto 0 auto;
  background: url("img/shadow.gif") left bottom repeat-x #fff;
  position: relative;
}

#main{
  width: 280px;
  height: 400px;
}
#pics{
  width: 480px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 290px;
}
/* main */
h1{
  position: absolute;
  top: 210px;
  left: 30px;
  }
#main ul{
  padding-top: 20px;
}
li a{
  display: block;
  width: 94px;
  height: 25px;
  margin-bottom: 10px;
}
a.info{
  background: url("img/m_info.gif") no-repeat;
}
a.menu{
  background: url("img/m_menu.gif") no-repeat;
}
a.access{
  background: url("img/m_access.gif") no-repeat;
}
a.mail{
  background: url("img/m_mail.gif") no-repeat;
}
/* pics */
#pics li{
  position:absolute;
}
#img03{
  top:0;
  left:0;
}
#img05{
  top:0;
  left:160px;
}
#img07{
  top:80px;
  left:240px;
}
#img01{
  top:80px;
  left:320px;
}
#img04{
  top:160px;
  left:0;
}
#img06{
  top:160px;
  left:160px;
}
#img02{
  top:240px;
  left:80px;
}
#img08{
  top:240px;
  left:240px;
}
#img09{
  top:320px;
  left:320px;
}
#img10{
  top:240px;
  left:400px;
}
#pics a{
  position: absolute;
  top: -23px;
  left: 325px;
  }