CSS のヒント

多くの時間を節約できる、まだ覚えておく必要がある古典的な CSS テクニックがいくつかあります。以下に、Zero Degree がすべての人に推奨するいくつかの優れた CSS テクニックを示します。

1. 異なるページで同じナビゲーションを使用します。

多くの Web ページにはナビゲーション メニューがあり、特定のページに入ると、メニュー上の対応する項目が灰色になり、他のページが点灯します。通常、この効果を実現するには、各ページ専用のプログラムまたはデザインを作成する必要がありますが、CSS を使用してこの効果を実現できるようになりました。

まず、ナビゲーション コードで CSS クラスを使用します:

<ul>
<li><a href="#" class="home">首页</a></li>
<li><a href="#" class="about">关于我们</a></li>
<li><a href="#" class="contact">联系我们</a></li>
</ul>

次に、上記のクラスと同じ名前で、各ページの本文の ID を指定します。 など。

次に、CSS を次のように設計します。

#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}

ここで、ID が home に設定されると、.home が有効になります。つまり、クラスが home に設定されたナビゲーション バーの行が表示されます。特殊効果。 。他のページも同様です。

それはとても簡単ではありませんか？

2. Block要素とinline要素の比較

すべてのHTML要素はblockまたはinlineのいずれかに属します。ブロック要素の特徴は次のとおりです:

常に新しい行で開始します。

高さ、行の高さ、および上下の余白はすべて制御できます。

幅が指定されていない限り、デフォルトの幅はコンテナの 100% です。 set

、

、

、

、

、および
• はブロック要素の例です。逆に、インライン要素の特徴は次のとおりです。

  と他の要素は同じ行にあり、

  高さ、行の高さ、上下の余白は変更できません。

  幅はそのテキストまたは画像の幅です。変えられない。

  、、、、、、および はインライン要素の例です。

  要素のこの機能を変更するには、code class="inline">display: inline または display: block コマンドを使用します。この属性を変更する必要があるのはどのような場合ですか?

  インライン要素を新しい行で開始します。

  ブロック要素と他の要素を 1 行に保ちます。

  インライン要素の幅を制御します。

  インラインの高さを制御します。要素;

  設定する必要はありません 固定幅を使用すると、テキストと同じ幅のブロック要素の背景色を設定できます。

  CSS テクニックに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。