Layout Templates
HTML Layout Templates （- 布局模板）
Here is a collection of HTML templates providing basic website layouts. （以下是提供基本网站布局的HTML模板集合。）
Each layout includes the following five main sections that are used on any website:
header
footer （页脚）
navigation menu （导览选单）
main content area （主要内容区域）
extra stuff （-额外物品）
Two columns, left menu (template 01)
Three percentage columns (template 02)
Three percentage columns (template 03)
Three percentage columns (template 04)
Three percentage columns (template 05)
Three percentage columns (template 06)
Three fixed columns (template 07)
Three fixed columns (template 08)
Three fixed columns (template 09)
Three fixed columns (template 10)
Three fixed columns (template 11)
Three fixed columns (template 12)
Liquid, secondary columns fixed-width (template 13)
Liquid, secondary columns fixed-width (template 14)
Liquid, secondary columns fixed-width (template 15)
Liquid, secondary columns fixed-width (template 16)
Liquid, secondary columns fixed-width (template 17)
Liquid, secondary columns fixed-width (template 18)
Liquid, three columns, hybrid widths (template 19)
Liquid, three columns, hybrid widths (template 20)
Liquid, three columns, hybrid widths (template 21)
Liquid, three columns, hybrid widths (template 22)
Two columns liquid, side fixed (template 23)
Two columns liquid, side fixed (template 24)
Two percentage columns (template 25)
Two percentage columns (template 26)
One column liquid and two halves (template 27)
One column liquid and two halves (template 28)
Two percentage columns and one larger (template 29)
Two percentage columns and one larger (template 30)
Two columns liquid, fixed side and large one (template 31)
Two columns liquid, fixed side and large one (template 32)
Two columns fixed (template 33)
Two columns fixed (template 34)
Two columns fixed (template 35)
Two columns fixed (template 36)
Two columns fixed (template 37)
Two columns fixed (template 38)
One column fixed and two halves (template 39)
One column fixed and two halves (template 40)
Almost all layouts are created with the CSS float property and negative margins. There are two things you should know about negative margins: if we apply negative margin on the float side, it will have the effect of shifting even more the floated elements towards the float side, if we apply a negative margin opposite a float, it will create a void, which leads to content overlapping, and this is very helpful for creating liquid layouts.
In modern websites, float-based layouts are being replaced with flexible layouts created using CSS Flexible Box Layout Module. （在现代网站中，基于浮点的布局正在被使用CSS灵活框布局模块创建的灵活布局所取代。）
Customizing Templates
Customizing Templates （自定义模板）
Here you can find a few ways to customize your HTML template:
Add some graphics to the template. （-在模板中添加一些图形。）
Change your template or add some content. （-更改模板或添加一些内容。）
Learn HTML with our HTML tutorial. （-通过我们的HTML教程学习HTML。）
Learn how to change template styles with our CSS tutorial. （-通过我们的CSS教程了解如何更改模板样式。）
Learn how to make templates interactive with our JavaScript tutorial. （-了解如何使用我们的JavaScript教程使模板具有交互性。）