ナビゲーションの復習

CSS 課題

ナビゲーションの復習

以下のリストを、「縦並びボタン」と「横並びボタン」に設定してみましょう。
サイズ・色は自由。

<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>



<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="Contetn-Style-Type" content="text/css" />
<title>ナビゲーションの復習</title>
<style type="text/css">
* {
	margin: 0;
  padding: 0;
}
#nav1 ul {
  list-style-type: none;
	font-size: 1em;
  font-family: Meiryo, "メイリオ", "Hiragino kaku Gothic Pro", "ヒラギノ角ゴPro W3", Osaka, sans-serif;
  font-weight: bold;
	width: 150px;
  margin: 10px auto;
}
#nav1 li a {
	display: block;
	background-color: #3c5fb7;
	margin-bottom: 2px;
	padding: 5px 10px;
}
#nav1 li a:link, #nav1 li a:visited {
  color: #fff;
  text-decoration: none;
}
#nav1 li a:hover {
  color: #fff;
  text-decoration: underline;
  background-color: #b0d1fa;
}
/*ここからnav2のCSS*/
#nav2 ul {
  list-style-type: none;
	font-size: 1em;
	font-family: Meiryo, "メイリオ", "Hiragino kaku Gothic Pro", "ヒラギノ角ゴ		  Pro W3", Osaka, sans-serif;
	font-weight: bold;
  width: 710px;
  over-flow: auto;
  margin: 10px auto;
}
#nav2 li {
  display: inline;
	float: left;
}
#nav2 li a {
  display: block;
  width: 120px;
  text-align: center;
	margin-right: 2px;
  padding: 5px 10px;
	background-color: #3c5fb7;
}
#nav2 li a:link, #nav2 li a:visited {
  color: #fff;
  text-decoration: none;
}
#nav2 li a:hover {
  color: #fff;
  text-decoration: underline;
  background-color: #b0d1fa;
}
</style>
</head>
<body>
<div id="nav1">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
<div id="nav2">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</body>
</html>