html入门教程(初学者) -HTML布局 - 书目录

html入门教程(初学者) -HTML布局

HTML布局

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts</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...</header>
	  <nav>Nav bar...</nav>
	  <article>Article...</article>
	  <footer>Footer...</footer>
	</main>
</body>
</html>

以上是使用CSS定位元素的HTML布局示例。这种布局将使用中引入的元素HTML5-特别是<main>,<article>,<nav>,<header>,和<footer>元件。

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

正如你所看到的,有很多HTML标签专门用于辅助页面布局。但请记住,这些仅仅是为其内容提供意义的逻辑容器。这些HTML元素实际上并不决定可视化的布局大小,位置等。这就是CSS的工作。

CLASS和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模板并点击