CSS を使用して 2 つの矢印画像 (賛成票/反対票) を重ねて保存するにはどうすればよいですか?

Web サイトのレイアウトは重要な要素です。ユーザーエンゲージメントを促進することで、Web サイトの視覚基準と全体的な品質が向上します。 Web サイト開発に CSS は必要ありませんが、当たり障りのない退屈な Web サイトをユーザーは操作したくないため、スタイルは重要です。

Web サイトを構築するとき、写真は見た目を美しくすること以外の目的を持たない「あると便利な」機能であると考えるかもしれません。ただし、Web サイト上のグラフィックには、単にかわいい画像を作成するだけではありません。

画像は Web ページに美しい外観を与えます。 SEO に写真を使用するメリットは数多くあります。 CSS を使用すると、これらの画像のスタイルを設定して配置し、素晴らしい視覚効果を作成できます。この記事では、CSS を使用して矢印画像 (賛否両論) を重ねて表示する方法について説明します。

まず、HTML ページに矢印画像を追加する方法を見てみましょう。

矢印画像を追加

矢印画像を追加するには、 タグを使用します。 ＃＃＃＃＃＃例＃＃＃ リーリー

upvote

downvote) を表示しています。 ＃＃＃例＃＃＃ 以下の例では、2 つの矢印画像 (賛成票/反対票) を互いの上に積み重ねます。 リーリー 使用される属性

この例では、CSS を使用して画像の高さと幅を指定します。これらの画像をスタックするには、次の CSS プロパティを使用します -

表示プロパティ

この CSS プロパティを使用すると、開発者は要素の表示動作のタイプを決定できます。簡単に言うと、要素のコンテナ タイプを決定できるようになります。

フローティングプロパティ

この CSS プロパティを使用すると、開発者は要素をどちら側に浮かせるかを指定できます。

を持つ要素では、float 属性が無視されます。その値は、

、または

です。

属性のクリア

フローティング要素の隣の要素は、その周囲のフローに従います。この問題を解決するために、CSS に clear プロパティがあります。その値は、None、Left、Right、 Both、Initial、および Inherited です。

この記事では、HTML ドキュメントに矢印 (賛成票と反対票) 画像を表示する方法を学びました。さらに、CSS

、

プロパティを使用してそれらをスタックする方法についても説明しました。

以上がCSS を使用して 2 つの矢印画像 (賛成票/反対票) を重ねて保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。