HTML5網頁佈局

時間 2020-12-27 標籤 html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
	<div class="container">
		...logo
		<nav>
			...導航
		</nav>
	</div>
</header>
<section class="banner">
	...
</section>
<section class="main">
	<aside>
		...
	</aside>
	<article>
		...
	</article>
</section>
<footer>
	<div class="container">
		...
	</div>
</footer>
</body>
</html>

寫好文章後可以通過CSSComb插件美化css樣式，參考《CSSComb插件的安裝和參數配置以及消除空行》

【補充】：

如果有部分瀏覽器不能兼容html5的新增標籤，則可以直接在css文件開頭添加：

header,
nav,
section,
aside,
article,
footer{
    display:block;
}