シンプルなHTMLレイアウトレイアウトを作成する
この記事では、divタグを使用し、CSSプロパティと組み合わせて、簡単なWebページレイアウトを作成する方法を紹介します。
このレッスンでは、HTMLページに添付する別のスタイルファイルを作成する方法、メディアデータを保存する別の画像フォルダーを作成する方法を学習します。これは、知っておく必要のある最も基本的な区分です。
注：HTML5のヘッダー、フッター、記事などのタグを学習していないため、divタグ全体を使用します。
Mục lục
レイアウト用のフォルダ構造を作成する
まず、自分用のフォルダを作成します。どこにでも置くことができます。次に、 imagesフォルダー、 index.htmlファイル、およびstyle.cssファイルを作成します。
次に、任意のエディターを使用して、 index.htmlファイルとstyle.cssファイルを開きます。現在、Netbeansを使用しています。
ファイル構造について、私は次のように少し説明します：
- フォルダ
imagesは、インターフェイスのすべてのイメージを含むために使用されます。 -
index.htmlファイルは、Webサイトのメインの実行ファイルです。 -
styles.cssファイルはCSSコードを保存するために使用されます
この投稿では、単純なHTMLレイアウトが作成されます
まず、Webサイトの基本的な配置を理解する必要があります。下の画像を見てください。
すべてのウェブサイトには7つの基本的なポジションがあります。
- ロゴ=>メインロゴが含まれています
- ヘッダー=>上部セクションのコンテンツが含まれます。
- メニュー=>サイトをナビゲートするメインメニューセクション
- 左側のサイドバー=>Webサイトの左側にあるデータを含む部分
- コンテンツ=>ウェブサイトのメインコンテンツを含む部分
- 右側のサイドバー=>Webサイトの右側にあるデータを含む部分
- フッター=>Webページの下部。
freetuts.net Webサイト自体の構造を見てください。インターフェースには、常にそのような位置があります。
レイアウト用のHTMLレイアウトを作成する
まず、7つの位置すべてをラップするdivタグを作成する必要があります。位置ごとに、それを囲む追加のdivタグを作成します。
<div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> </div> <div id="footer"> Footer </div> </div>次に、CSSを記述して位置の背景を設定します。このアプリケーションを実行すると、見やすくなります。
#header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; }ヘッダー、メニュー、フッターの位置は問題ありません。コンテンツについては、 left_sidebar 、 right_sidebar 、コンテンツを明確に分離する必要があるため、処理は終了していません。
float:leftプロパティを使用してleft_sidebarを左に移動し、 float:rightをright_sidebarから右に移動し、長さを約300pxに設定します。特にcontent部分については、 margin-leftとmargin-rightを300pxにします。これは、これら2つのサイドバーの長さが300pxであるためです。
#left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }左側のサイドバーと右側のサイドバーがフッターを上書きしました。その理由は、これら2つの位置にfloat：leftとfloat：rightを設定し、それらをぶら下げて表示するため、フッターをどれだけ押し下げるかはメインコンテンツによって決定されるためです。この部分では、高さをサイドバーの側面より400px低い300pxに設定しました。したがって、フッターをオーバーライドします。
これを解決するには、コンテンツの下に次のdivを配置し、CSSをclear:bothに設定します。
<div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div>画像をレイアウトする
index.htmlファイルはlogo.png画像ファイルの1レベルであることに注意してください。
次に、imgタグを使用してそれを含めます。ヘッダーを次のように変更してください。
<div id="header"> <img src="./images/logo.png"/> </div>CSSを別のファイルに入れる
後で管理しやすくするために、CSSを別のファイルに配置する必要があります。 style.cssファイルを開き、そこにすべてのCSSコードをコピーします。
次に、 headセクションに次のコードを配置して、このstyle.cssファイルをindex.htmlファイルにインポートします。
<link href="./style.css" rel="stylesheet"/>これで、コード全体が次のようになります。
#header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; } #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff } <!DOCTYPE html> <html> <head> <title>Layout HTML Basic</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./style.css" rel="stylesheet"/> </head> <body> <div id="main_wrapper"> <div id="header"> <img src="./images/logo.png"/> </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div> </body> </html>だからあなたはすでにウェブサイトのレイアウトを分割する方法を知っています。これはかなり基本的な部分ですが、HTMLを初めて使用する人にとっては非常に便利です。ここでこの記事をやめます。次の投稿でお会いしましょう。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
