ホームページ > 記事 > ウェブフロントエンド > HTMLを書くときにWebページをレイアウトする方法
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 レイアウト計算ツール (div+css)_html/css_WEB-ITnose
HTML レイアウトの問題。 _html/css_WEB-ITnose
HTML レイアウト_html/css_WEB-ITnose
html レイアウトの問題_html/css_WEB-ITnose
以上がHTMLを書くときにWebページをレイアウトする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。