【ナビゲーションの復習】
【縦のナビゲーションの復習】
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>縦・横並びのナビゲーション</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:none;
list-style-type:none;
font-style:normal;
font-weight:normal;
font-size:100%;
}
#body{
font-family:
"ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
"メイリオ",
Meiryo,
Osaka,
"ＭＳ Ｐゴシック",
"MS PGothic",
sans-serif;
}
#nav1{
font-size: 30px;
font-weight: bold;
height: auto;
margin:100px 0 0 200px;
}
#nav1 ul{
width: 200px;
border-color:
border-right: 2px solid;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
background-color: #77AC76;
}
#nav1 ul a{
padding: 5px;
display: block;
border-top: 2px solid #fff;
}
#nav1 a:link{
color: black;
}
#nav1 a: visited{
color: red;
}
#nav1 a:hover {
color: pink;
background-color: yellow;
}
</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>
</body>
</html>
