実践課題 CSS06

CSS

【CSS06】

  • 以下の画像と同じように表示させるCSSを記述しなさい
  • 文字の擬似クラスも設定しなさい（色は自由選択）
  • XHTML 1.0 Transitional
  • 記述場所はエンベッド


http://d.hatena.ne.jp/web-design-advance/20120506/p1

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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></title>
<style type="text/css">

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #F5F5F1;
}
#container {
  margin: 90px 10px 0 10px;
  padding: 2px;
  width: 740px;
}
ul {
  list-style-type: none;
}
li a{
  text-decoration: none;
}
li a:link {
  color: white; 
}
li a:hover {
  color: yellow;
}
#about {
  background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518015007.gif?1337273111);
  height: 100px;
  width: 737px;
  margin: 4px 0 7px 0;
  padding: 0 0 0 3px;
  line-height: 25px;
  font-size: 1.15em;
}
#works {
  background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518015006.gif?1337273150);
  height: 100px;
  width: 737px;
  margin: 0 0 7px;
  padding: 0 0 0 3px;
  line-height: 25px;
  font-size: 1.15em;
}
#access {
  background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518015005.gif?1337273167);
  height: 100px;
  width: 737px;
  margin: 0 0 7px 0;
  padding: 0 0 0 3px;
  line-height: 25px;
  font-size: 1.15em;
}
#contact {
  background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518015004.gif?1337273184);
  height: 100px;
  width: 737px;
  padding: 0 0 0 3px;
  line-height: 25px;
  font-size: 1.15em;
}
p {
  text-align: right;
  font-size: 0.82em;
  font-weight: bold;
  padding: 15px 0 5px 0;
  
}
address {
  text-align: center;
  font-style: normal;
  font-weight: bold;
  font-size: 0.83em;
  color: #757575;
}
a {
  text-decoration: none;
}
.k {
  margin: 10px;
  color: blue;
}

</style>
</head>

<body>

<div id="container">
  <div id="header">
  <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518015008.gif?1337273057" alt="TAG Design" />
  </div>
  
<ul>
  <li id="about"><a href="#">>> ABOUT US</a></li>
  <li id="works"><a href="#">>> WORKS</a></li>
  <li id="access"><a href="#">>> ACCESS</a></li>
  <li id="contact"><a href="#">>> CONTACT</a></li>
</ul>


  <p>
    <a href="#" class="k">個人情報の取り扱いについて</a>
    <a href="#" class="k">サイトマップ</a>
  </p>


<address>Copyright &#169; 2012 WebDesign</address>

</div>

</body>
</html>

実践課題 CSS06 - jsdo.it - share JavaScript, HTML5 and CSS

<a href="#"></a>

は「a」でスタイルシートの指定を出きる。

<a href="#" class="k">個人情報の取り扱いについて</a>

中にクラス名を入れられる