网页布局对于更好地了解您的网站非常重要.设计一个具有良好外观和感觉的网站布局需要相当长的时间.

现在，所有现代网站都使用基于CSS和JavaScript的框架来提供响应和动态的网站但是您可以使用简单的HTML表格或分区标签以及其他格式标签来创建良好的布局.本章将为您提供有关如何使用纯HTML及其属性为您的网页创建简单但有效的布局的几个示例.

HTML布局 - 使用表格

创建布局最简单，最流行的方法是使用HTML< table>标签.这些表按列和行排列，因此您可以按照自己喜欢的方式使用这些行和列.

示例

例如，下面的HTML布局示例是使用一个包含3行和2列的表来实现的，但是页眉和页脚列使用colspan属性和减去两个列;

                                                                  
This is Web Page Main title
                                                         Main Menu               HTML               PHP               PERL...                                                   Technical and Managerial Tutorials                                                                           Copyright © 2007 Tutorialspoint.com                                                      

Multiple Columns Layout - Using Tables

您可以设计网页以将您的网页内容放置在多个页面中。 您可以将内容保留在中间列中，并且可以使用左列使用菜单，而右列可以用于放置广告或其他内容。 这种布局将非常类似于我们在网站ITHOUSE.com上的布局。

Example

这是创建三列布局的示例:

                                                                  Main Menu               HTML               PHP               PERL...                                       Technical and Managerial Tutorials                                       Right Menu               HTML               PHP               PERL...                                       
HTML Layouts - Using DIV, SPAN
元素是用于对HTML元素进行分组的块级元素。 虽然
标签是一个块级元素，但是HTML 元素用于在内联级别对元素进行分组。
尽管我们可以使用HTML表格实现漂亮的布局，但是表格并不是真正作为布局工具设计的。 表格更适合于呈现表格数据。
注意:此示例使用了层叠样式表（CSS），因此在理解此示例之前，您需要对CSS的工作方式有更好的了解。
Example
在这里，我们将尝试使用
标签和CSS达到相同的结果，无论您在上一个示例中使用
标签实现了什么。
                                          
This is Web Page Main title
                              
Main Menu
            HTML            PHP            PERL...                              
Technical and Managerial Tutorials
                              
Right Menu
            HTML            PHP            PERL...                                             Copyright © 2007 Tutorialspoint.com                              
您可以使用DIV，SPAN和CSS创建更好的布局.有关CSS的更多信息，请参阅CSS教程.
返回顶部