ホームページ  >  記事  >  ウェブフロントエンド  >  CSS のヒント

CSS のヒント

高洛峰
高洛峰オリジナル
2017-02-27 09:40:181444ブラウズ

多くの時間を節約できる、まだ覚えておく必要がある古典的な 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 サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。