HTML 布局-之路教程

←HTML JavaScript

HTML 标签参考→

使用DIV，SPAN实现HTML布局

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

虽然我们可以用HTML表格实现非常漂亮的布局，但是表格并不是真正设计成一个布局工具。表格更适合呈现表格数据。

这个例子使用了级联样式表(CSS)，需要理解CSS是如何工作的相关知识。

HTML 布局

一个网页布局是非常重要的，给你的网站更好的外观。设计一个具有良好外观和感觉的网站布局需要相当长的时间。

现在，所有的现代网站都在使用CSS和JavaScript框架来创建响应迅速、动态的网站，
但是我们可以使用简单的HTML表或div标记与其他格式标记相结合来创建一个良好的布局。

使用DIV，SPAN实现HTML布局示例

<!DOCTYPE html>
<html>

   <head>
      <title>使用DIV，SPAN实现HTML布局</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>标题</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>主菜单</b></div>
            HTML<br />
            PHP<br />
            Python
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>页面内容</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>右边菜单</b></div>
            HTML<br />
            PHP<br />
            Python
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               底部信息
            </center>
         </div>
			
      </div>
   </body>

</html>

可以使用DIV、SPAN和CSS创建更好的布局。

使用表格实现多列布局

你可以设计你的网页，把你的网页内容放在多个网页中。你可以把你的内容放在中间一列，你可以用左栏来使用菜单，右栏可以用来放广告或其他一些东西。

使用表格实现多列布局示例

<!DOCTYPE html>
<html>

   <head>
      <title>3列布局</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>主菜单</b><br />
               HTML<br />
               PHP<br />
               Python
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               页面内容
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

HTML布局-使用表格

创建布局的最简单和最流行的方法是使用HTML<table>标记。
这些表以列和行的形式排列。

HTML布局-使用表格示例

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML布局-使用表格示例</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>标题</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>菜单</b><br />
               HTML<br />
               PHP<br />
               Python
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               页面内容
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  底部信息
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

日期：2019-06-08 23:19:24 来源：oir作者：oir