かわさきコンテンツアワード　テンプレート

授業　演習問題 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>かわさきコンテンツアワード2011</title>
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<div id="container">
<header>
<h1><img src="img/header.jpg" width="750" height="308" alt="かわさきコンテンツアワード2011"></h1>
</header>
<nav>
<ul>
<li id="oubo"><a href="#">応募要項</a></li>
<li id="kiyaku"><a href="#">応募規約</a></li>
<li id="trial"><a href="#">ビジネストライアルラボ</a></li>
<li id="sinsa"><a href="#">審査員</a></li>
<li id="info"><a href="#">information</a></li>
</ul>
</nav>
<div id="content">
<section>

</section>
</section>
</div><!-- content-->
<footer>
<div class="award">
<a href="#"><img src="img/html3_04.jpg" width="220" height="37"></a>
<a href="#"><img src="img/html3_06.jpg" width="220" height="37"></a>
</div><!--/award-->
<dl class="host">
<dt>主催</dt>
  <dd>川崎市</dd>
<dt>協力</dt>
  <dd>川崎ものづくりブランド推進協議会</dd>
<dt>後援</dt>
  <dd>関東経済産業局・川崎商工会議所・財団法人デジタルコンテンツ協会・社団法人デジタルメディア協会</dd>
<dt>協賛</dt>
  <dd>アドビ システムズ 株式会社・株式会社ワコム</dd>
</dl>
<ul class="contact">
<li>■お問い合わせ・申し込み先</li>
<li><a href="#"><img src="img/oubo.jpg" width="80" height="12"></a></li>
<li><a href="#"><img src="img/sozai.jpg" width="80" height="12"></a></li>
</ul>
<p class="address">
〒102-0083 東京都千代田区麹町二丁目10番9号 C＆Rグループビル<br>
(株)クリーク・アンド・リバー社PEC内「かわさきコンテンツアワード2011」事務局<br>
TEL：&nbsp;<img src="img/fax.jpg" width="133" height="13">&nbsp;（受付時間：10:00〜18:00 ＊土日・祝祭日を除く）
FAX:&nbsp;<img src="img/tel.jpg" width="133" height="13"><br>
E-mail：&nbsp;info@c-place.ne.jp</p>
<address><small>Copyright(C)2011 KAWASAKI contents award ALL Right Reserved.</small></address>
</footer>
</div><!--/container--->
</body>
</html>

@charset "utf-8";
/* CSS Document */

/* reset */
body,div,class,ul,li,a,img,dl,dt,dd,h1,h2,h3,h4,header,nav,section,footer,address,p,small{
  margin: 0;
  padding:0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/* layout */
body{
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  font-size: 16px;
  color: #333333;
  line-height: 1.5;
}
#container{
  width: 750px;
  margin: 0 auto;
  background: #efefef;
}
header{
  width: 750px;
  height: 308px;
}
nav{
  height: 35px;
  width:750px;
}
#content{
  width: 760px;
  height: auto;
}
#content section{
  margin: 20px;
  background:#FFFFFF;
  border-radius: 30px;
  }
nav ul{
  width: 750px;
  height: 35px;
}
nav li{
  float: left;
}
nav li a{
  display:block;
  height: 35px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}
nav li#oubo a{
  width: 135px;
  background: url(../img/menu_oubo_01.gif) no-repeat;
  margin-right: 2px;
}
nav li#oubo a:hover{
  background-position: 0 -35px;
}
nav li#kiyaku a{
  width: 135px;
  background: url(../img/menu_kiyaku_03.gif) no-repeat;
  margin-right: 2px;
}
nav li#kiyaku a:hover{
  background-position: 0 -35px;
}
nav li#trial a{
  width: 202px;
  background: url(../img/menu_trial_05.gif) no-repeat;
  margin-right: 2px;
}
nav li#trial a:hover{
  background-position: 0 -35px;
}
nav li#sinsa a{
  width: 135px;
  background: url(../img/menu_sinsa_07.gif) no-repeat;
  margin-right: 2px;
}
nav li#sinsa a:hover{
  background-position: 0 -35px;
}
nav li#info a{
  width: 135px;
  background: url(../img/menu_info_09.gif) no-repeat;
}
nav li#info a:hover{
  background-position: 0 -35px;
}
/* footer */
footer{
  height: auto;
}
div.award{
  margin-left: 280px;
  margin-bottom: 10px;
}
dl.award a{
  display:block;
}
dl.host{
  margin-left: 20px;
  margin-bottom: 20px;
}
dl.host dt{
  float: left;
}
dl.host dd{
  margin-left: 40px;
  margin-bottom: 5px;
}
ul.contact{
  margin-left: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}
ul.contact li{
  float: left;
  display: block;
  margin-right:20px;
}
p.address{
  margin-left: 20px;
}
address{
  text-align: center;
  height: 50px;
  line-height: 50px;
}