HTMLのレイアウト方法-htmlチュートリアル-php.cn

レイアウトに HTML を使用する方法には次のようなものがあります: 1. 「
」タグを使用してテーブルの行と列を配置し、ページレイアウト効果を実現します; 2. Web コンテンツを複数のページに配置します。列レイアウトで; 3. レイアウトには div タグと spam タグを使用します。

HTMLのレイアウト方法

# ページレイアウトはグラフィックデザインの一部であり、以前はページ上の視覚要素の配置を処理します。次の記事では、WebページのレイアウトにHTMLを使用する方法について詳しく紹介しますので、ご参考になれば幸いです。

[おすすめコース: HTML チュートリアル]

ページレイアウト:

タイトル: フロントエンドの一部。ページの上部で使用されます。
タグは、Web ページにヘッダーセクションを追加するために使用されます。
ナビゲーションバー: ナビゲーションバーはメニューリストと同じです。ハイパーリンクを使用してコンテンツ情報を表示するために使用されます。
インデックス/サイドバー: ページに必ずしも追加する必要がない追加情報や広告が含まれています。
コンテンツパーツ: コンテンツパーツは、表示されるコンテンツの主要な部分です。
フッター: フッターセクションには、連絡先情報や Web ページに関連するその他の問い合わせが含まれます。フッターセクションは常に Web ページの下部に配置されます。
タグは、Web ページにフッターを設定するために使用されます。

テーブルレイアウトの使用

レイアウトを作成する最も簡単で一般的な方法は、HTML のタグを使用することです。テーブル内の列と行は好きなように配置できます。

例

たとえば、3 行 2 列のテーブルを使用してヘッダーのある次の HTML レイアウトの例を実装します。また、フッター列は、colspan 属性を使用して 2 つの列にまたがります

<table width = "100%" border = "0">
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>标题</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20">
               <b>侧边栏</b>
            </td>
            <td bgcolor = "#eee" width = "100" height = "200">
               内容
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  页脚
               </center>
            </td>
         </tr>
      </table>

ログイン後にコピー

レンダリング:

HTMLのレイアウト方法

複数の列レイアウト

Web コンテンツを複数のページに配置します。コンテンツを中央の列に保持することも、左の列を使用してメニューを使用し、右の列を使用して広告や広告を配置することもできます。他のコンテンツ。

<table width = "100%" border = "0">
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>左菜单</b>
            </td>
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               内容
            </td>
            <td bgcolor = "#aaa" width = "20%">
               <b>右菜单</b>
            </td>
         </tr>  
      <table>

ログイン後にコピー

レンダリング:

HTMLのレイアウト方法

##div レイアウトを使用

要素は次のとおりです。 HTML 要素をグループ化するために使用されるブロックレベルの要素。

タグはブロックレベルの要素ですが、HTML の要素はインラインレベルで要素をグループ化するために使用されます

 <div style = "width:450px">
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>标题</h1>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>左侧栏</b></div>
         </div>
         <div style = "background-color:#eee; height:200px; width:250px; float:left;" >
            <b>内容</b>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>右侧栏</b></div>
         </div>
       <div style = "background-color:#b5dcb3; clear:both">
            <center>
               页脚
            </center>
         </div>
      </div>

ログイン後にコピー

#Rendering:

#要約: 上記がこの記事の全内容です。皆様のお役に立てれば幸いです。

以上がHTMLのレイアウト方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。