ホームページ > 記事 > ウェブフロントエンド > HTMLを書くときにWebページをレイアウトする方法

HTMLを書くときにWebページをレイアウトする方法

墨辰丷オリジナル: 2018-05-09 11:34:374951ブラウズ

HTML には一般的に使用される 2 つのレイアウトがあります。 1 つ目は div レイアウトです。これには、より便利で簡潔で、コードが少なく、作成と保守が容易であるという利点があります。ただし、場所によっては、ブラウザごとに互換性が異なり、表示が異なる場合があります。 2 番目のタイプはテーブルレイアウトです。これにはコードが多く、後で保守するのが非常に面倒ですが、テーブルレイアウトにより、ブラウザーの非互換性の問題の多くが回避されます。

1.divレイアウト

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <title></title>  
    <style>  
        body{margin: 0; padding: 0;}  
        #header{width:100%; height: 90px; background: #b19f9d; }  
        #nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}  
        .content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}  
        .left{width:30%; height: 900px; background: #decfd4; float: left;}  
        .right{width: 70%; height: 900px; background: #b3a19d; float: left;}  
        footer{width:100%; height: 150px; background: #a8817a;}  
    </style>  
</head>  
  
<body>  
    <header id="header">  
        <nav id="nav">空空</nav>  
    </header>  
    <div class="content">  
        <div class="left"></div>  
        <div class="right"></div>  
    </div>  
    <footer></footer>  
</body>  
  
  
</html>

2.tableレイアウト

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <title></title>  
    <style>  
          
    </style>  
</head>  
  
<body marginheight="0px" marginwidth="0px">  
    <table width="100%" height="950px" style="background-color:gray">  
        <tr>  
            <td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td>  
        </tr>  
        <tr>  
            <td  width="20%" height="80%" style="background-color: blue" ><td>  
            <td  width="80%" height="80%" style="background-color: blue" ><td>  
        </tr>  
        <tr>  
            <td colspan="2" width="100%" height="10%" style="background-color: black" ><td>  
        </tr>  
      
    </table>  
</body>  
  
  
</html>

概要:

tableレイアウトはより制限されていますが、divはよりオープンで、より多くのデザインスタイルと美しい効果を備えています。互換性のある div の欠点は、互換性が非常に面倒なことです。

HTML レイアウトの問題。 _html/css_WEB-ITnose

HTML レイアウト_html/css_WEB-ITnose

html レイアウトの問題_html/css_WEB-ITnose

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5はデバイス情報を取得します次の記事：HTML5はデバイス情報を取得します

続きを見る