div+css Webページレイアウトまとめ [転送]_html/css_WEB-ITnose

1. ul: ul のデフォルトのマージンとパディングは 0 ではありません。左浮動 li がナビゲーションで使用されると、多くの場合、外部 div が拡張され、ページが変形します。 ul{margin: 0px;padding:0px;}


2. img:

① ここで問題になるのは、ie6 で表示される画像の高さが常に正確な値よりも大きくなるということです。ここで次の点に注意する必要があります。 img{ display: block };

② ページ上で大きな背景を使用しないことが最善であり、タイル化できるものはタイル化する必要があります。そうしないと、読み込みが非常に遅くなり、将来の最適化や拡張に役立ちません。もちろん、大きなウェブサイトもいくつかありますが、背景を画像上で統一し、背景を取得するためにbackground-postionを使用することを試みています。

③最適な形式は GIF 形式です。これにより、IE6 では背景が透明になり、影がなくなります。GIF 画像がギザギザになる場合があるため、Web 形式で保存し、設定して使用する必要があります。物質の値 背景色の値が近いほど良いです。


3. オーバーフロー: 一部の企業の登録契約は非常に長い場合があるため、これを div のスタイルに追加できます: overflow: auto



4. float: 一部の div は、ページの先頭に戻る これは、クリア: の両方を追加することで発生する可能性があります。


5. div: 高さが 1px の div は、IE6 では 1px にならない場合があります。この div のスタイルに font-size: 1px を追加すると問題ありません。


6. ID とクラス: ページ内でスタイルが複数回使用される場合は、ID を使用せず、クラスを使用します。JS を使用する場合、ID は JS 用に予約される必要があるため、スタイルに ID を使用しないことをお勧めします。 。 ID はページ内に 1 回しか表示されません。過度に使用すると、スタイルの再利用性が失われ、ページの保守性も大幅に低下します。



7. table と div: インターネット上のほとんどの Web ページは、現在、非標準であると言えるテーブルで記述されています。テーブルはレイヤーごとにネストされているため、変更が非常に面倒で面倒であるという欠点があります。w3c Web 標準によれば、テーブルの本当の目的はレイアウトではなく、データを表示することです。 div レイアウトの利点は、w3c の Web ページ標準に準拠していることです。現在、sina などの国内 Web サイトでは、Web ページのレイアウトを変更するのに div が非常に簡単に使用されます。 、163 およびほとんどの海外 Web サイトでは div レイアウトが使用されています。本当に Web デザイナーになりたい場合は、div ルートを取ることをお勧めしますが、前提条件は CSS をよく学び、マスターすることです。本文の CSS プロパティを設定することも、P タグ、Table タグ、Div タグなどの本文の要素の CSS プロパティを設定することもできます。それらはすべて text-align 属性を持ち、In に設定するだけです。さらに、Web ページ全体の中央にコンテンツを配置するにはテーブルを使用するのが最善であり、操作が最も簡単で便利です。


7. リンク: .link: リンク{}、.link: 訪問済み{}、.link:hover{}、.link: アクティブ{}。 1 つは、visited と hover の順序を逆にしてはいけないということです。そうしないと、ie6 で大きな問題が発生します。



8. Web ページのレイアウト方法: Web ページのレイアウトには 2 つの方法があります。1 つ目は紙のレイアウトで、2 つ目はソフトウェア レイアウトです。サイズの選択: 現在、従来のブラウジング モードでは 800X600 の解像度が一般的です。



9. カスケード スタイル シートの適用:
新しい HTML4.0 標準では、テキストと画像を完全に正確に配置できる CSS (Cascading Style Sheets) が提案されています。 CSS は初心者にとっては少し複雑に思えるかもしれませんが、確かに優れたレイアウト方法です。今まで実現できなかったアイデアもCSSで実現できます。現在、多くのサイトでカスケード スタイル シートが使用されており、サイトをよく反映しています。 CSS の紹介や使い方はネット上でたくさん見つかります。 もちろん、ますます人気が高まっている WEB 標準 (XHTML+CSS) は、コンテンツとプレゼンテーションの分離を強く主張しており、次世代のデータ交換 XML (つまり、XHTML) への移行として機能します。

10. DTD: ブラウザーによって表示結果が異なる場合は、ページの先頭に次の DTD 行を書き忘れていないか確認できます



11. Float: 1) 要素は width 属性を指定する必要があります。幅を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。また、要素を指定するときは単位として px ではなく em を使用するようにしてください。 2) Float 要素は margin や Padding などの属性を指定できません。IE では、Margin や Padding を指定して float 要素を表示する場合にバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に特別な値を指定することもできます。 3) float 要素の幅の合計は 100% 未満でなければなりません。float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示できません。したがって、幅の合計が 99% 未満になるようにしてください。 4) float 要素の親要素には、clear 属性を指定できません。MacIE で float 要素の親要素に clear 属性を使用すると、周囲の float 要素のレイアウトが乱れます。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。



12. デフォルトのスタイル: ブラウザーが異なれば、マージン、パディングなどの特定の属性の解釈も異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リスト スタイルをなしに設定することが最善です。



13. border 属性を使用して、error 要素のレイアウト特性を決定します。 float 属性のレイアウトを使用すると、注意しないとエラーが発生します。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。



14. クリアなフローティング要素を使用する:

や element:after {content:”.”;clear:both;visibility: などの記述をやめます。 hidden ;height:0;display:block} これらはハックであり、最良のアプローチではありません。次のようになります:
#container {overflow:hidden}

#container {display:inline-block} #container {display:block}

overflow:hidden を使用する理由は、魔法の力があるためです。詳細については W3C を参照してください。説明 ドキュメントの説明。



15. 単位を適切に使用する: フォント サイズの定義に px を使用しないでください。同様に、ピクセル フォントは 1024*768 の解像度でも問題なく表示されます。時代は常に変化しており、現在では 1024 解像度のシェアが減少しているため、1920 のモニターでは文字が非常に小さく感じられます。の解き方？ em 単位で定義します (font-size:1.2em など)。これは、フォントがデフォルトのフォントの 1.2 倍であることを意味します。これは、Firefox および IE では 16 ピクセルに相当します。em を使用する利点は、body タグを変更できることです。またはその他の外部タグ フォント サイズを使用してサイト全体のフォント サイズを制御し、フォントを柔軟にします。これは、ブラウザのズーム機能を使用しない限り、px では不可能です。さらに、フォントは pt、cm などの単位で定義しないでください。1em と 100% は同等ですが、後者はより多くのスペースを必要とし、独自の癖があります。



16. ポジション: フロートがメイン、ポジションが補助です! ！ ！ページのレイアウトに位置を使用する場合、親要素の位置属性は相対的である必要があります。親要素内の特定の位置に配置される要素については、要素のパディング属性の影響を受けないため、絶対値を使用するのが最善です。もちろん、位置を使用することもできますが、計算するときはパディングの値を忘れないでください。ただし、位置決めには内部要素の高さに適応しないという欠点があります。KwooJan では、ページをレイアウトする際には、Float をメインのメソッドとして使用し、Position を補助として使用することをお勧めします。この方法でのみ高品質のページを作成できます。

http://blog.sina.com.cn/s/blog_879890300100wnmb.html