HTMLでdivを使う方法

HTML は Web 開発の基礎であり、<div> は HTML で最も一般的なタグの 1 つです。これは「分割」の略で、ページの独立したブロックを表します。この記事では、<code><div> タグの使用法と、それを HTML および CSS で使用してページのレイアウトとデザインを強化する方法について説明します。 <p>基本構文:</p> <pre class="brush:php;toolbar:false">&lt;div&gt; 这里是内容 &lt;/div&gt;</pre> <p>これは、最も基本的な <code><div>文法の例です。 <code><div> タグには、テキスト、画像、フォーム、その他の HTML 要素など、あらゆるタイプのコンテンツを配置できます。ページを理解しやすく整理しやすくするために、他の <code><div> 内にネストすることもできます。 <p>次に、<code><div> のサンプル コードを見て、それに CSS スタイルシートを追加します。 <p>HTML</p> <pre class="brush:php;toolbar:false">&lt;div class=&quot;container&quot;&gt; &lt;h1 id=&quot;这是一个标题&quot;&gt;这是一个标题&lt;/h1&gt; &lt;p&gt;这是一个段落。&lt;/p&gt; &lt;button&gt;点击我&lt;/button&gt; &lt;/div&gt;</pre> <p>CSS</p> <pre class="brush:php;toolbar:false">.container { background-color: #eee; border: 1px solid black; padding: 10px; margin: 20px; }</pre> <p>この <code><div> タグは、「container」クラスを持つ CSS スタイルシートにロックされています。こうすることで、<code><div> に適切なスタイルを追加し、読みやすくすることができます。たとえば、灰色の背景、黒い境界線、10 ピクセルのパディング、20 ピクセルの間隔で <code>.container を定義しました。

<div>-Layout を使用する利点<p>CSS では、<code><div> を <code>position:relative として使用できます。 ＃＃＃ 容器。これにより、コンテナ上に相対的に配置された子要素を作成できるようになります。以下は、

を使用してデザインを強化できるサンプル コード スニペットです。 HTML

<div class="container">
  <div class="item">
    <h2 id="第一个项目">第一个项目</h2>
    <p>这是第一个项目的说明。</p>
  </div>
  <div class="item">
    <h2 id="第二个项目">第二个项目</h2>
    <p>这是第二个项目的说明。</p>
  </div>
  <div class="item">
    <h2 id="第三个项目">第三个项目</h2>
    <p>这是第三个项目的说明。</p>
  </div>
</div>

(.item) を使用して各アイテムのコンテナを作成し、CSS を使用してグリッドにレイアウトします。 。 CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

これにより、次のように変換されます:

利点- セレクター CSS と併用する場合、

を使用すると、要素をより適切に選択できます。たとえば、2 番目の

タグをスタイルしようとしていますが、これは

内、

と他のクラスの間にあります タグは、混合しても同じスタイルを持つ可能性があります。

HTML

<div class="container">
  <p>这是第一个段落。</p>
  <div>
    <p>这是第二个段落。</p>
  </div>
  <p>这是第三个段落。</p>
</div>

CSS

p {
  font-size: 18px;
}

このコードでは、すべての

タグのフォント サイズを 18px に設定します。

2 番目の段落サイズを 16 ピクセルに設定するだけの場合は、次の CSS スニペットを使用できます:

CSS

.container div p {
  font-size: 16px;
}

これにより、# のみを選択できるようになります。 ##

内側の段落をマークし、それに特定のスタイルを追加します。こうすることで、スタイルを設定する必要があるコンテンツをより適切に選択できるようになります。 概要

この記事では、HTML の基本、

タグの構文、および 、およびページ レイアウトとデザインでの使用方法。また、CSS とセレクターを使用して div を強化し、整理と設計を容易にする例も示します。 <div> タグは、HTML を理解しやすく、読みやすくし、多くの便利な機能を提供します。 <code><div> を使用してより良いページ レイアウトとデザインを作成する方法をよりよく理解できるようになりました。 <code>