HTML布局

*发表于 2021-12-1 11:56:35* · 发表于 2021-12-1 11:56:35

<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<style type="text/css">
main {
width:100%;
height:200px;
}
header, footer {
background-color:#BCCE98
}
article, nav {
height: 100%;
float: left;
}
article {
background-color:#F7FDEB;
width:70%;
}
nav {
background-color:#DAE9BC;
width:30%;
}
</style>
</head>
<body>
<main>
   <header>标题...</header>
   <nav>导魧栏...</nav>
   <article>文章...</article>
   <footer>页脚...</footer>
</main>
</body>
</html>
以上是使用 CSS 定位元素的 HTML 布局示例。这在中引入的布局中使用的元件HTML5-特别是<main>，<article>，<nav>，<header>，和<footer>元件。

已使用<style>文档元素中的<head>元素应用样式。

如您所见，有许多 HTML 标记专门用于帮助页面布局。但请记住，这些只是为其中的内容提供意义的逻辑容器。这些 HTML 元素实际上并不决定视觉布局——大小、位置等。这是 CSS 的工作。

类和 ID
尽管我们没有对上述 HTML5 元素应用任何类或 ID，但这样做通常是个好主意。毕竟，一个元素可以多次包含在一个页面上，如果它们使用相同的布局样式来设置样式，事情可能会变得混乱。

例如，我们可以<nav>在一个页面上有两个元素。一个可以是全局导航，另一个可以是本地导航。虽然这两个<nav>元素可以共享一些样式，但它们可能不会共享所有样式（因为它们在页面上的位置不同）。因此，我们可以给每一个赋予一个 ID（或类）以区分它们。适当的 ID 或类名也可以在逻辑上区分它们，赋予每个元素自己的含义。

此外，在将 JavaScript 合并到您的页面时，使用 ID 会很有用。如果您的菜单依赖于 JavaScript，则很可能需要向菜单添加 ID。

下面是两个<nav>元素的示例，每个元素都有自己的 ID：

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts</title>
<style type="text/css">
nav#global {
...
}
nav#local {
...
}
</style>
</head>
<body>
<main>
<nav id="global">
...
</nav>

<nav id="local">
...
</nav>

...
布局模板
有许多不同的方法来创建网站布局。上面的例子只是其中之一。CSS 提供了许多有助于布局的属性。

在这里介绍太多细节超出了本 HTML 教程的范围，但如果您对创建不同的布局感兴趣，请查看这些HTML 模板并单击查看源代码查看每个模板是如何构建的。