DIV+CSS ._html/css_WEB-ITnose

DIV+CSS とは

DIV+CSS は、Web ページを分割する従来の HTML Web デザイン言語のテーブル配置方法とは異なります。プレゼンテーションの内容。

CSS (CascadingStyle Sheets) は、HTML 要素の表示形式を定義するために使用され、Web コンテンツをフォーマットするために W3C によって導入された標準技術です。

利点:

1. ページの読み込みを高速化: ページ コードのほとんどが CSS で記述されているため、ページ サイズが小さくなります。テーブルのネスト方法と比較して、DIV+CSS はページをより多くの領域に分割し、ページを開いたときにレイヤーごとに読み込まれます。テーブルの入れ子のような大きなテーブルでページ全体を囲むのではなく、読み込み速度が非常に遅くなります。

2. 再構築されたページは簡単に変更できます。div+css ページは html ファイルと css ファイルを分離します。つまり、Web ページのコンテンツとプレゼンテーションは分離されています。通常、実際の Web サイトのスタイル レイアウトは、背景色やフォントの色など、CSS ファイルの一部の CSS スタイル属性を変更することで変更できます。 、ウェブサイトの幅など、テーブルにはないのが便利です。

3. トラフィック コストの削減: ページ サイズが小さくなり、閲覧速度が速くなります。これは、ホスト トラフィックを制御する一部の Web サイトにとって最大の利点です。

短所:

1. 開発の難易度: (1) div css の開発に必要な技術は比較的高く、到達できないわけではありませんが、テーブルの配置よりもはるかに複雑です。発生しやすい。 (2) div+css はまだすべてのブラウザとの統一互換性を実現していません。 IE で表示される通常のページが Firefox ではまったく異なる場合があります。したがって、div+css では、IE、Firefox、Google のさまざまなバージョンなど、多くのブラウザ バージョンのテストが必要です

2. 長い開発時間: div css レイアウトは、テーブル レイアウトよりも開発と生成に時間がかかります。

3. 開発コストがテーブルよりも高い: 技術的および時間的な制約のため、divcss ページはテーブル ページよりも高価です。

CSS ボックス モデルの概念

CSS の使用の核心は、ボックス モデルを使用することです。私たちの日常生活では、靴箱やギフトボックスなど、物を入れるための長方形や正方形の箱に遭遇します。 CSS ボックスは、たとえば、Web ページ上にテキスト コンテンツや画像をレイアウトするためにも使用されます。

現実のボックス

CSS のボックス

CSS ボックス モデルを通じて、Web ページのコンテンツ、パディング、境界線、マージンを変更できます。コンテンツのスタイルです。

具体的な例:

DIV+CSS DIV+CSS ._html/css_WEB-ITnose インターフェイス コードの実装:

DIV コード:

[html] view plain copy print

                                         

           

           

网站会员登录

           

                      

用户名：           

           

密　码：           

           

                              

               

               

rel="stylesheet" type="text/css" />!-- 引用CSS スタイル シート --

;ウェブサイトメンバーDIV+CSS ._html/css_WEB-ITnose

ユーザー名 ： パスワード: ;

CSS コード:

* /* 設定すべての要素の内側と外側の境界線は 0 */ { margin:0px; } .caption { margin-left:150px; body /* フォントを設定します */ { font-size:14px } #loginfrm { margin:200px 500px; :400px; } #login { margin-top:20px; } #image { width:15px; } body /* フォントサイズを設定します*/ { font-size:14px; } #loginfrm { margin:200px; width:400px; } #login { margin-top:20px; #image { float:left; } .txtbox { width:180px }

;