ホームページ > ウェブフロントエンド > htmlチュートリアル > DIV+CSS は初めてですか?注意が必要な問題が 6 つあります_html/css_WEB-ITnose

DIV+CSS は初めてですか?注意が必要な問題が 6 つあります_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:29:45
オリジナル
1264 人が閲覧しました

DIV+CSS は初めてですか?注意が必要な質問が 6 つあります。 DIV+CSS の初心者として、コードを記述する前に Web ページの全体的な構造を明確に理解していれば、半分の労力で 2 倍の結果が得られます。ただし、作成プロセス中には常に何らかの問題が発生するため、立ち止まって情報を調べたり、属性の定義を明確にしたりする必要があります。
実際、DIC+CSSをより深く理解しながら効率を向上させる方法はたくさんあります!以下にいくつかの点を示します。

1. CSS 命名規則:
1. ファイル命名規則
グローバル スタイル: global.css;
フォント スタイル: font.css;
リンク スタイル: link . css;
印刷スタイル: print.css;
2. 共通のクラス/ID 命名規則
ヘッダー: ヘッダー
コンテンツ: コンテナー
フッター: フッター
著作権: copyright
ナビゲーション: メニュー
メイン ナビゲーション: mainMenuサブナビゲーション:subMenu
ロゴ:ロゴ
スローガン:バナー
タイトル:タイトル
サイドバー:sidebar
アイコン:アイコン
注記:note
検索:search
ボタン:btn
ログイン:login
リンク:link
情報ボックス:manage
……

2. ブラウザのBUG問題への対処
この点に関しては、あの専門家がCSSのBUGをジングルにしたのかな!ここに引用すると覚えやすいです!
1. IE の境界線がフレームがないように見える場合は、高さの設定が忘れられていることに注意してください。
2. フロートが生成されるのには理由があります。親レイヤーがそれを含めたい場合は、 float をクリアする必要があります。そうすればコンテナはその中に自然に表示されます
3. ピクセル テキストの移動が遅くてもパニックにならないように、高さの設定が役に立ちます
4. すべてのブラウザとの互換性、デフォルト設定に注意してください。行の高さは致命的になる可能性があります。 5. フローティングを個別に解除し、行の高さをなし、高さをゼロに設定することを忘れないでください。そうすれば、デザイン効果も向上します。
6. レイアウトの学習にはアイデアが必要です。パスは自然で直線的です。レイアウトの原則、制御しやすい HTML、ハッキングの少ない合理化されたレイアウト、クリーンなコード、優れた互換性、フレンドリーなエンジンを歓迎します。

3. すべてのタグがアクティブです
デフォルトが異なるだけです。Span は Wji です。Wji はインラインとブロック レベルの 2 つのインストゥルメントを生成します。img はより特殊ですが、法的原則にも準拠しています。その他は単に異なる変更です。 、1 つの * 記号はすべてを返します。すべてが規則的であるため、カスケード スタイルにはさらに練習が必要であることがわかりました。

4. 画像リンクのレイアウトに注意してください
画像リンクのテキストリンクを揃える場合は、多少の違いでも問題ありませんので、paddingとvertical-align:middleを設定する必要があります。

5. IE フローティング二重マージン
表示: インラインを使用してください。

6. リストの横方向のレイアウト
リストのコードは近くにある必要があり、隙間を覚えておく必要があります。

DIC+CSS の学習は長い道のりであり、それを本当に続けるには敬虔な新しい心を持たなければなりません。


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート