CSSメニューバーを設置&素材




上のようなメニューバーを表示させられるタグとその素材を
紹介します。




HTML
<ul class="menubw">
    <li><a href="http://psptools.blog20.fc2.com/">Home</a></li>
    <li><a href="#">PSPについて</a></li>
    <li><a href="#">CSS</a></li>
</ul>
<br style="clear: left;" />

CSS
.menubw{
margin: 0;
padding: 0;
float: left;
font: bold 12px Meiryo;
width: 100%;
overflow: hidden;
margin-bottom:0px;
border: 1px solid #000000;
border-width: 0px 0;
background: black url(liblack.jpg) center center repeat-x;
}

.menubw li{
display: inline;
}

.menubw li a:visited{
color: #FFFFFF;
}

.menubw li a{
float: left;
color: #FFFFFF;
padding: 10px 25px;
text-decoration: none;
border-right: 1px solid #424242;
}

.menubw li a:hover{
color:#FFFFFF;
background: transparent url(lihwhite.jpg) center center repeat-x;
}


解説:
CSSの挿入位置はどこでもいいですが、
そういうと任意の{}に入れる人がいるので末尾に追加してください。

HTMLはヘッダ(タイトル画像)の

<<上に入れるときはココ>>


<!--▼▼ ヘッダー ▼▼-->
<div id="header_outline">
<div id="header_body">
<h1></h1>
<!--タイトル紹介<div class="intro"><%introduction></div>--!>
</div><!--/header-->
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->

<<下に入れるときはココ>>



web拍手




一日1クリックにご協力お願いします。



[ 2010/04/09 19:13 ]   [編集] | PC系 HTML・CSS | TB(0) | CM(2)
出来たんだ!
[ 2010/04/12 14:48 ] [ 編集 ]
HTML・CSSそれぞれ、どこにタグを挿入すればいいか、もう少し詳しく教えて頂けませんか?
[ 2010/04/20 20:14 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
返信が必要な方はチェックを外してください。
トラックバック
この記事のトラックバックURL


ブログパーツ アクセスランキング