社内研修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;
>>}

フリーソフト「ezhtml」と「TopStyle Lite」

HTMLは「ezhtml」で編集、CSSは「TopStyle Lite」で編集しました