【CSS11】
- 以下の画像と同じように表示させるCSSを記述しなさい
- リセットは、全称セレクタで
- 記述場所はエンベッド
- XHTML 1.0 Transitional
- テキスト無し（すべて画像で、代替文字は空
<?xml version="1.0" encoding="UTF-8"?>
<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>お箸の専門店|銀座夏野</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-image: url(../images/bg.gif);
}
#container {
width: 715px;
margin: 10px auto;
background-color: #000;
}
h1, h2 + p {
text-align: left;
}
#wrapper {
overflow: auto;
}
#wrapper p {
padding: 15px 0 0 20px;
}
ul {
list-style-type: none;
width: 213px;
float: right;
margin-top: -20px;
}
li {
padding: 0 20px 2px 0;
}
li.last {
margin-bottom: 30px;
}
address {
clear: both;
text-align: right;
padding: 5px;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<h1><a href="#"><img src="../images/logo.jpg" alt="" width="221" height="39" /></a></h1>
<h2><img src="../images/mainImage.jpg" alt="" width="715" height="240" /></h2>
<div id="wrapper">
<p><img src="../images/mainCopy.gif" alt="" width="377" height="57" /></p>
<ul>
<li><a href="#"><img src="../images/btn01.jpg" alt="" width="193" height="26" /></a></li>
<li><a href="#"><img src="../images/btn02.jpg" alt="" width="193" height="26" /></a></li>
<li class="last"><a href="#"><img src="../images/btn03.jpg" alt="" width="193" height="13" /></a></li>
</ul>
<address><img src="../images/copyright.gif" alt="" width="291" height="21" /></address>
</div>
</body>
</html>
