0

アイコンとテキストのナビゲーションバーを意味的にマークアップするにはどうすればよいですか。テキストはアイコンの下にあり、アイコンはスプライトです。

さらに 2 つの条件があります。ナビゲーション ボックスの幅が異なり、アイコンもリンクとして機能する必要があります (クリック可能であること)。

具体的な例は、@ www.emex.ru です。

言い換えれば、どのように変換しますか <ul>
<li>
<a><img width=32 height=32/><br/>Link1</a>
</li>
<li>
<a><img width=32 height=32/><br/>Link2</a>
</li>
</ul>

<img>要素のないバージョンへ

4

3 に答える 3

0

順序付けられていないリストは、ナビゲーション メニューでは一般的です。ulとタグのスタイルを設定して、li必要に応じて各リンクのスペースと位置を揃えることができます。タグにクラスまたは IDliを設定し、背景画像の位置を設定する必要があります。良い例はここにあります

http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/

于 2012-07-26T03:14:38.330 に答える
0

Twitter ブートストラップは、<i>これを行うためにタグを使用します。それらの例を参照してください。

だから、このようなもの：

<li>
  <a>
    <i class="icon-shoe"></i> 
    Shoe
  </a>
  <a>
    <i class="icon-balloon"></i> 
    Balloon
  </a>
</li>

そして、あなたのCSSで：

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
}

.icon-shoe {
  background-image: url("path/to/shoe/icon.png") no-repeat;
}

.icon-balloon {
  background-image: url("path/to/balloon/icon.png") no-repeat;
}
于 2012-07-27T02:36:21.130 に答える
-1

ナビゲーションに画像を使用するalt=""ため、タグを追加して、Google がリンクのアンカー テキストを確認できるようにすることが重要です。

于 2012-07-26T09:36:30.630 に答える