0

ブログのサイドバーにソーシャルアイコンを追加しようとしています。私のサイドバーには、いくつかのトピックがリストにまとめられています。このリストの最後に、ソーシャルアイコンを表示するリストアイテムを1つ作成します。私はタグを使用してこれを達成することができ、次のようなものを手に入れました：

<!-- Social icons -->
<li>
<img src="/images/Twitter.png"><a href="http://twitter.com"></a></img>
<img src="/images/Github.png"><a href="http://github.com"></a></img>
<img src="/images/Quora.png"><a href="http://quora"></a></img>
<img src="/images/LinkedIn.png"><a href="http://linkedin.com"></a></img>
<img src="/images/Google.png"><a href="http://google.com"></a></img>
<img src="/images/Flickr.png"><a href="http://flickr.com"></a></img>
<img src="/images/Vimeo.png"><a href="http://vimeo.com"></a></img>
<img src="/images/YouTube.png"><a href="http://youtube.com"></a></img>
</li>

しかし、私はこのアプローチが好きではありません。

  • リンクが何らかの理由で機能しない
  • 画像のサイズを変更できません（このように大きくなります）
  • ホバー効果が出ない

CSSを始めたばかりなので、この問題を解決する方法がわかりません。いくつかのdivコンテナー、ID、およびクラスを使用してみましたが、機能しませんでした。これは、CSSの専門家の皆さんにとってです。

CSSを使用して、画像のサイズを変更し、インラインで表示し、リンクとホバー効果を使用して、これらのタグを削除するにはどうすればよいですか？

4

4 に答える 4

2

タグが誤ってネストされているため、リンクは機能しません<a href="..."><img src="..." /></a>。

imgCSSを使用して画像を表示するには、タグを削除background-imageし、要素にCSSスタイルを追加<a>します（テキストが重ならないようにパディングなどを追加します）。これが段階的な例です。

また、このようなシナリオを強化する方法に関するその他の資料：CSSスプライト（これらすべてのアイコンを1回のダウンロードでマージして高速化）およびCSSデータURI（アイコンを.cssファイルに直接埋め込んでダウンロード数を減らす）。

于 2013-03-20T17:46:34.877 に答える
0

最初の例を使用して、次のようにフォーマットします。

<a href= "http://twitter.com">
<img src= "/images/Twitter.png" />
</a>

ホバーの場合、リンクをクラスに割り当てると、ホバーの品質も設定できるようになります。

http://kyleschaeffer.com/user-experience/pure-css-image-hover/

于 2013-03-20T17:56:34.420 に答える
0

cssbackgroundを使用できます。

.class{
background-image:url('image.png');
}
于 2013-03-20T17:48:17.720 に答える
0

上記の答えはあなたの質問の良い例です

リンクの場合は次のように使用します-

<a href="http://twitter.com"> <img src="/images/Twitter.png" /> </a>
<a href="http://github.com"> <img src="/images/Github.png" /> </a>
<a href="http://quora.com"> <img src="/images/Quora.png" /> </a>

ホバー効果の使用

li a:hover{color:#ff0000} as css

これにより、ホバー時に赤い色が表示されます。

于 2013-03-20T19:42:32.200 に答える