HTML 布局
分类： HTML/CSS 3315 6
前言：
网站常常以多列显示内容（就像杂志和报纸）。
HTML 布局 - 使用div元素
<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
HTML 布局 - 使用table元素
使用 HTML <table> 标签是创建布局的一种简单的方式。
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
header：定义文档或节的页眉
nav：定义导航链接的容器
section：定义文档中的节
article：定义独立的自包含文章
aside：定义内容之外的内容（比如侧栏）
footer：定义文档或节的页脚
details：定义额外的细节
summary：定义 details 元素的标题
这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陌上花-blog</title>
<style>
header {
background-color:#FFA500;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header>
<h1>陌上花-blog</h1>
</header>
<nav>
首页<br>
关于<br>
</nav>
<section>
<h1>London</h1>
<p>
内容在这里
</p>
</section>
<footer>
版权 © 陌上花
</footer>
</body>
</html>以及id命名法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陌上花-blog</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">陌上花-blog</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>首页</b><br>
关于<br>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © 陌上花</div>
</div>
</body>
</html>下面的例子使用表格制作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陌上花-blog</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>陌上花-blog</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>首页</b><br>
关于<br>
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © 陌上花</td>
</tr>
</table>
</body>
</html>注：即使可以使用 HTML 表格来创建漂亮的布局，但表格的目的是呈现表格化数据，不是布局工具！
共 6 条评论关于 “HTML 布局”