スタイルシートでヘッダナビをデザインする(2)

  「スタイルシートでヘッダナビを作成する」で作成したヘッダナビの作成で、スタイルシートの変更のみでいくつか装飾パターンを試してみました。くわしい説明は「スタイルシートでヘッダナビを作成する」とほとんど同じなので省略します。

パターン2:ボーダーbottomが変色する

2 枠線の下部の色が変更するパターン

 上のサンプルではスタイルシートのみですが、画像を使用して下の枠線にあたる部分が光ったように変色するパターンのヘッダナビはよく見かけます。

HTMLソース

<div class="headernavip2">
<ul>
<li><A href="http://www.yahoo.co.jp/" mce_href="http://www.yahoo.co.jp/" >yahoo!japan</A></li>
<li><A href="http://www.infoseek.co.jp/" mce_href="http://www.infoseek.co.jp/" >infoseek</A></li>
<li><A href="http://seesaa.jp/" mce_href="http://seesaa.jp/"  >seesaa</A></li>
</ul>
</div>
スタイルシート
.headernavip2 ul{
margin:0px;
padding:0px;
list-style:none;  ←リストの前のマークの種類(黒丸など):なし
}

.headernavip2 li,{
float:left;  ←配置(回り込み):左寄せ
}

.headernavip2 li a{
color:#666666;  ←文字色:グレー
font-size:13px;
font-weight:bold;
background-color:#f9f9f9;
display:block;  ←表示形式:ブロックレベル要素として表示する
text-align:center;  ←文字の配置(横方向):中央
width:150px;  ←<li>一つあたりの幅:150px
line-height:1.8em;  ←行の高さ:1.8文字分
border:1px solid #666666;  ←枠線4方向:1px、実線、グレー
border-bottom:6px solid #666666;  ←枠線下側:6px、実線、グレー
text-decoration:none;  ←文字装飾:なし
float:left;  ←配置(回り込み):左寄せ
}

.headernavip2 li a:hover{
border-bottom:6px solid #ff7777;  ←枠線下側:6px、実線、ピンク
background-color:#fefefe;
color:#ff7777;  ←文字色:ピンク
}
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。