社内研修CSS
メニューはインライン要素をブロック要素にして高さ指定 display:block
>>div#header ul#nav li {
>> display: block; インライン要素をブロック化
>> float: left; 縦に並んでいるメニューを横に並べる
>> margin: 0px 5px 0px 0px; 右を少し5pxあける
>> text-align: center; 文字を中央に配置
>>}
リンクの下線を消すtext-decoration: none
>>div#header ul#nav a {
>> display: block;
>> width: 100px;
>> height: 20px;
>> color: white;
>> text-decoration: none; リンクの下線を消す
>> background-image: url(../images/menu.png); 意味を持たない画像はCSSの背景に設定
>> background-repeat: no-repeat; 繰り返しはなし
>> line-height: 20px; 高さを設定
>>}
メニューにマウスをのせた時に色などをかえる a:hover
>>div#header ul#nav a:hover { マウスをのせた時にメニューの色を変える
>> background-image: url(../images/menu_over.png); この背景に変える
>> background-repeat: no-repeat; 繰り返しなし
>> color: Blue;
>>}