そこで、その方法について、調べてみました。
下の画像が、リスト要素に矢印画像を付けた例です。
１、HTML
headタグ内に使用するcssファイルを定義します。
<link rel="stylesheet" href="./css/test.css" type="text/css">
body要素にリスト要素を定義します。
<body>
<header>
<div class="navi_spec" style="float:none;">
<ul class="spec-ul">
<li class="sample1"><a href="#top">リスト１</a></li>
<li class="sample1"><a href="#">リスト２</a></li>
</ul>
<div class="navi_spec2" style="float:none;margin-top:-20px">
<ul class="spec-ul2" style="background:#715c1f">
<li class="sample2"><a href="jiko_sp.html#top">リスト３</a></li>
<li class="sample2"><a href="houmon_sp.html#top">リスト４</a></li>
</ul>
</div>
</div>
</header>
<h1>Test App</h1>
<div id="content"></div>
</body>
２、CSS
test.cssファイルに以下リスト要素を定義します
ul {
list-style-type:none;
line-height:1.3em;
}
li.sample1{
padding-left:22px;
background-image:url("arrow_black2.png");
background-repeat:no-repeat;
background-position:0px 0px;
}
li.sample2{
padding-left:22px;
background-image:url("arrow_white2.png");
background-repeat:no-repeat;
background-position:0px 0px;
}
【参考URL】
http://www.webword.jp/cssguide/ref-list/index5.html
0 件のコメント:
コメントを投稿