極客書

HTML - Layouts

網頁布局對於更好地瀏覽你的網站非常重要。設計一個外觀和感覺都很好的網站布局需要相當長的時間。

現在，所有現代網站都在使用基於CSS和JavaScript的框架來創建響應性和動態的網站，但是您可以使用簡單的HTML表或分區標記以及其他格式化標記來創建良好的布局。本章將爲您提供一些示例，說明如何使用純HTML及其屬性爲您的網頁創建一個簡單但有效的布局。

HTML Layout - Using Tables

創建布局的最簡單和最流行的方法是使用HTML<table>標記。這些表是按列和行排列的，因此您可以以任何方式利用這些行和列。

Example

例如，下面的HTML布局示例是使用一個包含3行和2列的表實現的，但是頁眉和頁腳列使用colspan屬性−

Live Demo 
<!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 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

這將產生以下結果&負;

Multiple Columns Layout - Using Tables

Example

下面是創建三列布局的示例−

Live Demo 
<!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 Layouts - Using DIV, SPAN

<div>元素是用於對HTML元素進行分組的塊級元素。雖然<div>標記是塊級元素，但HTML<span>元素用於在內聯級別對元素進行分組。

雖然我們可以用HTML表實現非常好的布局，但是表並不是真正作爲布局工具設計的。表格更適合顯示表格數據。

注意−此示例使用層疊樣式表（CSS），因此在理解此示例之前，您需要更好地了解CSS的工作原理。

Example

在這裡，我們將嘗試使用<div>標記和CSS獲得相同的結果，無論您在前面的示例中使用<table>標記獲得了什麼。

Live Demo 
<!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 Tutorialspoint.com
            </center>
         </div>
			
      </div>
   </body>

</html>

這將產生以下結果&負;

您可以使用DIV、SPAN和CSS創建更好的布局。有關CSS的更多信息，請參閱CSS教程。