请慎重设计您的网页布局。

在线实例

利用 <div&gt; 元素的网页布局

如何实现html动态布局HTML 结构 Vue.js

如何利用 <div&gt; 元素添加布局。

利用 <table> 元素的网页布局

如何利用 <table> 元素添加布局。

网站布局

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

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

虽然我们可以利用HTML table标签来设计出俊秀的布局,但是table标签是不建议作为布局工具利用的 - 表格不是布局工具。

HTML 布局 - 利用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子利用五个 div 元向来创建多列布局:

实例

<!DOCTYPEhtml><html><head><metacharset=\"大众utf-8\公众><title>菜鸟教程(runoob.com)</title></head><body><divid=\"大众container\公众style=\"大众width:500px\"大众><divid=\"大众header\公众style=\"大众background-color:#FFA500;\"大众><h1style=\公众margin-bottom:0;\公众>紧张的网页标题</h1></div><divid=\"大众menu\公众style=\公众background-color:#FFD700;height:200px;width:100px;float:left;\公众><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><divid=\"大众content\"大众style=\"大众background-color:#EEEEEE;height:200px;width:400px;float:left;\"大众>内容在这里</div><divid=\公众footer\公众style=\公众background-color:#FFA500;clear:both;text-align:center;\公众>版权 © runoob.com</div></div></body></html>

上面的 HTML 代码会产生如下结果:

HTML 布局 - 利用表格

利用 HTML <table> 标签是创建布局的一种大略的办法。

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

纵然可以利用 HTML 表格来创建俊秀的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!

下面的例子利用三行两列的表格 - 第一和末了一行利用 colspan 属性来横跨两列:

实例

<!DOCTYPEhtml><html><head><metacharset=\"大众utf-8\"大众><title>菜鸟教程(runoob.com)</title></head><body><tablewidth=\"大众500\"大众border=\公众0\"大众><tr><tdcolspan=\"大众2\"大众style=\"大众background-color:#FFA500;\公众><h1>紧张的网页标题</h1></td></tr><tr><tdstyle=\"大众background-color:#FFD700;width:100px;\"大众><b>菜单</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle=\公众background-color:#eeeeee;height:200px;width:400px;\公众>内容在这里</td></tr><tr><tdcolspan=\"大众2\"大众style=\公众background-color:#FFA500;text-align:center;\"大众>版权 © runoob.com</td></tr></table></body></html>

上面的 HTML 代码会产生以下结果:

HTML 布局 - 有用的提示

Tip: 利用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于掩护。
通过编辑单一的文件,就可以改变所有页面的布局。
如需学习更多有关 CSS 的知识,请访问我们的CSS 教程。

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

HTML 布局标签

标签描述<div>定义文档区块,块级(block-level)<span>定义 span,用来组合文档中的行内元素。

如您还有不明白的可以不才面与我留言或是与我磋商QQ群308855039,我们一起飞!