3連休の課題(4) - ichisemasashi's blog

[http://d.hatena.ne.jp/web-mind/20130615/p1:[CSS]復習(4)リスト]
A21

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
/* reset */
body, ul, li {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #FFFFFF;
}
ul {
  list-style: none;
}
li {
  width: 150px;
  line-height: 20px;
}
li a {
  display: block;
  padding: 20px;
  text-align: center;
}

body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

#new {
  background-color: #FF0000;
}
#info {
  background-color: #FF9900;
}
#item {
  background-color: #99CC00;
}
#shop {
  background-color: #669900;
}
#company {
  background-color: #00FFFF
}

#new a:hover {
  color: #FF0000;
  background-color: #FFFFFF;
  border: 1px solid #FF0000;
}
#info a:hover {
  color: #FF9900;
  background-color: #FFFFFF;
  border: 1px solid #FF9900;
}
#item a:hover {
  color: #99CC00;
  background-color: #FFFFFF;
  border: 1px solid #99CC00;
}
#shop a:hover {
  color: #669900;
  background-color: #FFFFFF;
  border: 1px solid #669900;
}
#company a:hover {
  color: #00FFFF;
  background-color: #FFFFFF;
  border: 1px solid #00FFFF;
}
</style>
</head>
<body>
<ul>
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>
</html>

A22

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
/* reset */
body, ul, li {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #0066CC;
}
ul {
  list-style: none;
}
li {
  width: 150px;
  height: 40px;
  border-top: 1px dotted #0066CC;
}
#company {
  border-bottom: 1px dotted #0066CC;
}
li a {
  display: block;
  padding: 10px;
  background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20130618/20130618133702.jpg");
  background-repeat: no-repeat;
  background-position: 0 15px;
}

body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

li a:hover {
   color: #FF6600;
}
</style>
</head>
<body>
<ul>
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>
</html>

A23

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
/* reset */
body, ul, li {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #0066CC;
}
ul {
  list-style: none;
}
li {
  width: 150px;
  height: 40px;
  border: 1px solid #0066CC;
  margin: 5px;
}
li a {
  display: block;
  padding: 10px;
}

body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

li a:hover {
   color: #FFFFFF;
   background-color: #0066CC;
}
</style>
</head>
<body>
<ul>
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>
</html>