HTML 布局

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

注：虽然我们可以使用 HTML table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的 – 表格不是布局工具。

使用 <div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局：

实例

<style>
#header {
    background-color:black;
    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>

<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">London
Paris
Tokyo</div>
<div id="section">
<h2>London</h2>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</div>
<div id="footer">Copyright ? mybj123.com</div>

效果：

HTML 布局 – 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

下面的例子使用三行两列的表格 – 第一和最后一行使用 colspan 属性来横跨两列：

<table border="0" width="500">
<tbody>
<tr>
<td style="background-color: #ffa500;" colspan="2">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color: #ffd700; width: 100px;"><b>菜单</b>
HTML
CSS
JavaScript</td>
<td style="background-color: #eeeeee; height: 200px; width: 400px;">内容在这里</td>
</tr>
<tr>
<td style="background-color: #ffa500; text-align: center;" colspan="2">版权 © mybj123.com</td>
</tr>
</tbody>
</table>

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：

HTML5 语义元素

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：

实例

<header>
<h1>City Gallery</h1>
</header><nav>London
Paris
Tokyo</nav><section>
<h1>London</h1>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</section><footer>Copyright mybj123.com.cn</footer>

HTML 布局 – 有用的提示

使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

以上关于HTML 布局的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。