目录

HTML - Layouts

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

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

HTML布局 - 使用表格

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

标记。
这些表按列和行排列,因此您可以按照自己喜欢的方式使用这些行和列。

例子 (Example)

例如,使用包含3行和2列的表来实现以下HTML布局示例,但页眉和页脚列使用colspan属性跨越两列 -

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Layout using Tables</title>
   </head>
   <body>
      <table width = "100%" border = "0">
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 iowiki.com
               </center>
            </td>
         </tr>
      </table>
   </body>
</html>

这将产生以下结果 -

新页面打开

多列布局 - 使用表格

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

例子 (Example)

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

<!DOCTYPE html>
<html>
   <head>
      <title>Three Column HTML Layout</title>
   </head>
   <body>
      <table width = "100%" border = "0">
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
      <table>
   </body>
</html>

这将产生以下结果 -

新页面打开

HTML布局 - 使用DIV,SPAN

元素是用于对HTML元素进行分组的块级元素。
虽然
标记是块级元素,但HTML 元素用于在内联级别对元素进行分组。

虽然我们可以使用HTML表格实现相当不错的布局,但是表格并没有真正设计为布局工具。 表格更适合呈现表格数据。

Note - 此示例使用层叠样式表(CSS),因此在理解此示例之前,您需要更好地了解CSS的工作原理。

例子 (Example)

在这里,我们将尝试使用

标记和CSS实现相同的结果,无论您在前面的示例中使用标记实现了什么。
<!DOCTYPE html>
<html>
   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>
   <body>
      <div style = "width:100%">
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 iowiki.com
            </center>
         </div>
      </div>
   </body>
</html>

这将产生以下结果 -

新页面打开

您可以使用DIV,SPAN和CSS创建更好的布局。 有关CSS的更多信息,请参阅CSS教程。

↑回到顶部↑
WIKI教程 @2018