3. Web ページ レイアウトに div タグを使用する

構造的な分割に加えて、div タグを使用して Web ページ レイアウトを実装することもできます。たとえば、さまざまな div のスタイルを設定することで、Web ページの全体的なレイアウトを実現できます。

(1) ボックス モデル レイアウト

ボックス モデル レイアウトは、Web ページの異なる領域を異なるボックスとして認識し、ボックスの幅などのプロパティを設定します。 、高さ、マージンによって全体のレイアウトが実装されます。たとえば、Web ページにヘッダー領域とコンテンツ領域を設定します。

     
  
这是网页的头部
 
 
这是网页的内容区域。
 
在这里填写网页内容……
 
  

上記のコードでは、.header と .content という 2 つのクラスのスタイルを設定します。.header はヘッダー領域に対応します。 , .content はコンテンツ領域に対応します。このうち、.headerの高さは100ピクセル、背景色、センタリング、テキストスタイルなどの属性が設定され、.contentの幅は80%、中央揃え、パディングが設定されています。この設定を使用すると、単純な Web ページ レイアウトを実装できます。

(2) グリッド レイアウト

ボックス モデル レイアウトに加えて、CSS グリッド レイアウトを使用して Web ページ レイアウトを実装することもできます。グリッド レイアウトでは、Web ページの全領域を複数のグリッドに分割し、異なる要素を異なるグリッドに配置して、全体的なレイアウトを実現できます。

たとえば、次のようにヘッダー、ナビゲーション バー、コンテンツ領域を備えた Web ページ レイアウトを設定できます。

     
  
 
这是头部
 
这是导航栏
 
这是内容区域
 
  

上記のコードでは、グリッド レイアウトを使用して全体のレイアウトを実現しています。 Web ページの 。 .container クラスは、Web ページ全体を 2 列 2 行に分割するグリッド レイアウトを設定し、各グリッドのサイズは自動的に計算されます。同時に、各ブロックの特定のグリッド位置も設定します。これは、grid-area 属性を通じて設定されます。このような詳細なレイアウトを通じて、ヘッダー、ナビゲーション バー、コンテンツ エリアを備えた Web ページを取得できます。

概要

div タグは、HTML 内のブロックを分割するために使用される一般的なコンテナ タグです。 divタグを利用することで、Webページの構造設定やレイアウトを素早く簡単に実装することができます。 CSS スタイルでは、さまざまなクラス名を通じてさまざまなブロックのスタイルを設定し、ボックス モデル レイアウトまたはグリッド レイアウトを通じて全体のレイアウトを実現できます。 Web 開発で div タグを使用するスキルを習得すると、Web 開発作業をより効率的に行うことができます。

以上がdivセットhtmlの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。