HTMLでdivタグを使用してインターフェイスブロックを作成する方法
この記事では、divタグといくつかの関連するCSSプロパティの使用方法を紹介します。これにより、Webサイトのインターフェイスでブロックを作成する方法がわかります。
divタグは非常に重要な役割を果たし、インターフェイス上の位置（ブロック）のカバーを作成するために使用されます。以前は、ヘッダー、フッター、記事..タグがなかった場合、プログラマーはdivタグを使用してヘッダーとフッターにインターフェイスブロックを作成していました。今では違います。代わりにdivタグまたは新しく追加されたタグを使用できます。
しかし、結局、これらの新しいカードは特別なものではありません。これは基本的にdivタグと同じですが、インターフェイス上の正確な位置を判断できるHTMLレイアウトを確認するための新しい名前を付けるだけです。
Mục lục
HTMLのdivタグのプロパティ
HTMLのdivタグは通常のタグであり、デフォルトでブロックとして表示されます。したがって、Webサイトのインターフェイスにブロックを作成するためによく使用します。
divタグのデフォルトの長さは100％です。これは、左から右に完全に及ぶことを意味します。ドメインは、外側のHTMLタグが構成するスペースの量によって制限されます。 divタグには、表示を調整するための属性がまったくありません。必要に応じて変更するには、CSSと組み合わせる必要があります。
divタグの構文は次のとおりです。
<div> ... Nội dung bên trong </div>次のように、ネストされたdivタグを複数作成することもできます。
<div> <div> <div> ... Nội dung bên trong </div> </div> </div>もちろん、テーマでHTMLタグを使いすぎると、ページの読み込み速度、SEO、その他多くの要因に影響します。したがって、経験豊富なフロントエンドの人々にとっては、HTMLのレベルが多すぎるという点で非常に制限されます。
HTMLインターフェースでdivブロックを作成する方法
流暢に使用するには、CSSプロパティと組み合わせてdivタグのデフォルト表示をカスタマイズする方法を知っている必要があります。
div.tagの背景を変更する
簡単に言うと、CSSのbackgroundプロパティを使用する必要があります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>div。tagの高さと幅を設定します
heightプロパティとwidthプロパティを使用して、divタグの高さと幅を変更できます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background:white; height: 300px; width: 400px; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>div.tagの境界線を作成します
境界線を作成するには、CSSのborderプロパティを使用します。
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red }コンテンツと境界線の間のスペースを変更します
上記の例を実行すると、境界に近いdivタグ内のコンテンツが表示されます。次に、CSSのpaddingプロパティを使用して、それらの間にスペースを作成します。
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; }div。tagの画面の中央揃えを設定します
divタグをマージンに対して中央に表示する場合は、margin属性を使用します。
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; margin: 0px auto; }ここで、0pxは上下の距離、autoは左右の自動距離です。自動を設定したので、自動的に中央に配置されます。例を実行して結果を確認しましょう。
フロートで左右に動かす
CSSのfloatプロパティは、そのdivタグの左または右に揃えるのに役立ちます。
- float：left =>左揃え
- float：right =>右揃え
左翼
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:left }右
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:right }単純すぎますね。この記事では、divタグと最も一般的に使用される操作のいくつかを紹介したいと思います。次の記事では、それを建物のレイアウトに適用します。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
