📌  相关文章
📜  HTML-布局

📅  最后修改于: 2020-12-16 05:57:53             🧑  作者: Mango

网页布局对于使网站看起来更好非常重要。设计具有良好外观的网站布局需要花费大量时间。

如今，所有现代网站都使用基于CSS和JavaScript的框架来提供响应性和动态网站，但是您可以使用简单的HTML表格或除法标记与其他格式标记结合来创建良好的布局。本章将为您提供一些示例，说明如何使用纯HTML及其属性为网页创建简单但有效的布局。

HTML布局-使用表格

创建布局的最简单，最流行的方法是使用HTML

标签。这些表按列和行排列，因此您可以按照自己喜欢的任何方式利用这些行和列。

例

例如，以下HTML布局示例是使用具有3行2列的表实现的，但是header和footer列使用colspan属性将两列都覆盖了-

现场演示
HTML Layout using Tables

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

这将产生以下结果-

多列布局-使用表格

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

例

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

现场演示
Three Column HTML Layout
   

   
      

         
         

            
               Main Menu

               HTML

               PHP

               PERL...
            		
                
            
               Technical and Managerial Tutorials
            
                
            
               Right Menu

               HTML

               PHP

               PERL...

这将产生以下结果-

HTML布局-使用DIV，SPAN

元素是用于对HTML元素进行分组的块级元素。虽然
标签是一个块级元素，但HTML 元素用于在嵌入式级别对元素进行分组。

尽管我们可以使用HTML表格实现漂亮的布局，但实际上并不是将表格设计为布局工具。表格更适合于呈现表格数据。

注意-此示例使用了层叠样式表(CSS)，因此在理解此示例之前，您需要对CSS的工作方式有更好的了解。

例

在这里，我们将尝试使用

标签和CSS达到相同的结果，无论您在上一个示例中使用标签实现了什么。

现场演示
HTML Layouts using DIV, SPAN
   

   
      

        
         

            
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教程。