Es gibt zwei häufig verwendete Layouts in HTML. Das erste ist das Div-Layout, das den Vorteil hat, dass es bequemer und prägnanter ist, weniger Code benötigt und einfacher zu erstellen und zu warten ist. Allerdings weisen verschiedene Browser an manchen Stellen unterschiedliche Kompatibilitäten auf und können unterschiedliche Anzeigen haben. Der zweite Typ ist das Tabellenlayout, das viel Code enthält und später sehr mühsam zu warten ist. Das Tabellenlayout vermeidet jedoch viele Probleme mit der Browser-Inkompatibilität.
1.div-Layout
<!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.Tabellen-Layout
<!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>Zusammenfassung:
Das Layout von table ist relativ begrenzt, während div offener ist und mehr Designstile und schöne Effekte bietet. Der Nachteil von div ist, dass die Kompatibilität sehr problematisch ist.
Verwandte Empfehlungen:
HTML-Layoutrechner (div+css)_html/css_WEB-ITnose
HTML Layoutproblem. _html/css_WEB-ITnose
HTML-Layout_html/css_WEB-ITnose
html-Layout problem_html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonSo gestalten Sie eine Webseite beim Schreiben von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
