html布局帮手 php,HTML 布局

HTML

布局(Layouts)

要想让你的网站更好看，布局非常重要.

要非常细心的设计你网页布局.

亲自试一试 - 例子

网页布局之

元素

示例演示了如何使用

元素布局.

网页布局之

示例演示了如何使用

网页布局

大多数网站把内容放到多个列中(类似杂志或报纸排版).

多列可以用

或

可以使用CSS的position(位置)，背景、颜色等性质创建丰富多彩的页面.

虽然可以使用表格创建漂亮的布局，但是表格是被设计为展示数据的 - 不是布局工具！

HTML布局 - 使用

元素

div元素是个块级元素，用于将HTML元素分组.

下面的例子使用了5个div元素创建多列布局，创建和上面的例子一样的效果：

例子

Main Title of Web Page

Menu

HTML

CSS

JavaScript

Content goes here

Copyright © phpxuexi.net

亲自试一试 »

上面代码展示的结果如下：:

Main Title of Web Page

Menu

HTML

CSS

JavaScript

Content goes here

Copyright © phpxuexi.net

HTML布局 - 使用表格

创建布局的简单方式是使用HTML的

创建多列布局可以使用

或者

可以使用CSS的position(位置)，背景、颜色等性质创建丰富多彩的页面.

使用

下面的例子使用的表格是3行2列 - 第一行和最后一行都使用了合并列(colspan)的属性:

例子

Main Title of Web Page
Menu HTML CSS JavaScript	Content goes here
Copyright © phpxuexi.net

亲自试一试 »

上面代码显示的结果如下:

Main Title of Web Page

Menu

HTML

CSS

JavaScript

Content goes here

Copyright © phpxuexi.net

HTML布局 - 使用提示

提示:

使用CSS的最大优势是如果把CSS文件放在外部进行引用，你的网站会非常容易维护.

你可以通过这个文件更改网页布局.

提示:

由于高级的布局需要时间来创建，更快速的选择是使用模板.在百度或谷歌搜索“免费网站模板”(你可以使用这些已建好的模板并且在此基础上进行修改).