HTML布局 - HTML笔记

网站布局

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

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

使用<div>元素

<div>元素时用于分组HTML元素中的块级元素

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>118qq.top</title>
</head>
<body>
<div id="common" style="width:500px;">
<div id="head" style="background-color:red;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="caidan" style="background-color:green; width:100px; height:200px; float:left;">
<b>菜单</b>
<br>HTML<br>CSS<br>javasprict</div>
<div id="main" style="background-color:yellow; width:400px; height:200px; float:left;">
<b>这里填写内容</b></div>
<div id="footer" style="background-color:orange; width:500px; height:30px; text-align:center; clear:both;">118qq.top</div>
</div>
</body>
</html>

使用<table>元素

使用<table>元素是创建布局的最简单的元素

提示：即使可以使用表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据，但表格不是布局工具

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>118qq.top</title>
</head>
<body>
<table width="500px" border="0">
<tr>
<td colspan="2" style="background-color:red;">主要网页标题</td>
</tr>
<tr>
<td width="100px" style="background-color:green;"><b>菜单</b>
<br>HTML<br>CSS<br>javasprict</td>
<td width="400px" style="background-color:yellow;">这里是内容</td>
</tr>
<tr>
<td colspan="2" height="30px" style="background-color:orange; text-align:center;">118qq.top</td>
</tr>
</table>
</body>
</html>

注意：

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

l 由于创建高级的布局非常耗时，使用模板是一个快速的选项