訓練10日目
訓練9日目は内部CSSのボーダーの練習と、自分のHPを持つという目的から、Jimboを登録した。
訓練10日目はHTML作成課題の解説と、疑似クラスの説明と作成だった。
link,visited,hover,activeをテキストに割り当て、ボタン化させるものである。
以下のCSSが重要であるとのことであった。
まだ覚えられていないので、早く覚えるようにしないといけない。
list a{
display:block
}
▼仕上がりはこんな感じ
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>擬似クラスを利用したナビゲーション</title>
<style>
html,body,div,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
#nav {
width:250px;
margin:50px auto;
}
ul {
list-style:none;
background:#666;
}
a{
text-decoration: none;
}
li{
font-size: 20px;
font-weight: bold;
}
li a{
display: block;
padding: 20px;
border-bottom:2px solid #FFF;
}
ul
li a:link{color: #FFF;}
li a:visited{color: #FFF;}
li a:hover{color:#666; background: #6CF;}
</style>
</head>
<body>
<div id="nav">
<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>
