简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS を使用してフロントエンド Web ページのレイアウトを改善するための実践的なヒント

青灯夜游
リリース： 2018-09-07 17:12:09
オリジナル
1205 人が閲覧しました

CSS フロントエンド Web ページのレイアウトには多くのテクニックがあります。ここでは、初心者に適した CSS フロントエンド Web ページ レイアウトのヒントをまとめています。これは、より実践的な参考値になるでしょう:

1 Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみです。価値。 。

2. 同じクラス セレクターはドキュメント内で繰り返し使用できますが、ID セレクターは 1 回のみ使用できます。定義が繰り返される場合、ID セレクターはクラスと ID の両方を使用します。 ID の重みが CLASS よりも大きいため、有効です。

3. 互換性を調整する愚かな方法 (IE と Mozilla):
初心者はこのような状況に遭遇する可能性があります: IE では同じラベル属性が A として表示されるのが通常ですが、Mozilla ではそれを表示する必要があります。通常表示するには B に設定する必要があり、そうでない場合は 2 つが反転します。
一時的な解決策: 

选择符{属性名:B !important;属性名:A}
ログイン後にコピー

4. ネストするラベルのグループ間にスペースがある場合は、外側にあるラベルのパディングを定義するのではなく、内側にあるラベルのマージン属性に任せます
5. li タグの前のアイコンには list-style-image ではなく、background-image を使用することをお勧めします。
6. IEは相続関係と父子関係の違いを区別できません。それらはすべて相続関係です。
7. タグにセレクターを追加するときは、CSS でセレクターにコメントを追加することを忘れないでください。 将来 CSS を変更するときに、なぜこれを行うのかがわかります。

8. ラベルに暗い背景画像と明るいテキスト効果を設定した場合。 現時点では、ラベルの背景色を暗い色に設定することをお勧めします。

9. リンクの 4 つの状態を定義するときは、順序に注意してください: 

Link Visited Hover Active
ログイン後にコピー

10. コンテンツと関係のない背景を使用してください

11。省略形 #8899FF=#89F

12. テーブルは、いくつかの点で他のタグよりもはるかに優れたパフォーマンスを発揮します。列揃えが必要な場合にご使用ください。

13.

人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！