使ってみよう！スタイルシート

タブで形式のヘッダーメニューの作り方の例です。
タブを切り替えて今どのページを見ているのか分かりやすくします。
通常時は薄い色、マウスオーバーで濃い色になるよう画像を2種類用意します。

通常時　　　　　 　

マウスを乗せると　

/*タブ風切り替え***************/

div#tab-box{width:514px; clear:both;}


/*左***************************/
div#tab-box div.menu1{float:right;
 margin:0 0 0 2px;}
div#tab-box div.menu1 a{
display:block;
background: url(../img/○○.gif) no-repeat;
        width:152px; height:43px;
        text-indent:-9999px;
}
div#tab-box  div.menu1 a.here,
div#tab-box  div.menu1 a:hover{
	 background: url(../img/○○_here.gif) no-repeat;
     width:152px; height:43px;
     text-indent:-9999px;
}

/*中***************************/
div#tab-box div.menu2{float:right;
 margin:0 0 0 2px;}
div#tab-box div.menu2 a{
	display:block;
	background: url(../img/○○_btn.gif) no-repeat;
    width:152px; height:43px;
    text-indent:-9999px;
}
div#tab-box  div.menu2 a.here,
div#tab-box  div.menu2 a:hover{
	 background: url(../img/○○_here.gif) no-repeat;
     width:152px; height:43px;
     text-indent:-9999px;
}
/*右***************************/
div#tab-box div.menu3{float:right;
 margin:0 0 0 2px;}
div#tab-box div.menu3 a{
display:block;
background: url(../img/○○.gif) no-repeat;
        width:152px; height:43px;
        text-indent:-9999px;
}
div#tab-box div.menu3 a.here,
div#tab-box div.menu3 a:hover{
	 background: url(../img/○○_here.gif) no-repeat;
        width:152px; height:43px;
        text-indent:-9999px;
}

HTML

<div id="tab-box">

<div class="menu1">
<a href="○○.html#tab" class="here">左</a>
</div>

<div class="menu2">
<a href="○○.html#tab">中</a>
</div>

<div class="menu3">
<a href="○○.html#tab">右</a>
</div>

</div>

練習用にどうぞ