关注我们

HTML - 网页布局

网页布局对于提高网站外观非常重要。设计具有出色外观的网站布局需要花费大量时间。

如今，所有现代网站都使用基于CSS和JavaScript的框架来提供响应性和动态网站，但是您可以使用简单的HTML表格或除法标签结合其他格式标签来创建良好的布局。

使用表格

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

如，下面的HTML布局示例是使用具有3行2列的表实现的，但是header和footer列使用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 Learnfk
            </td>
         </tr>
         <tr>
            <td colspan="2" bgcolor="#b5dcb3">
               <center>
                  Copyright © 2007 Learnfk.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

这将产生以下输出-

多列布局

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

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

<!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 Learnfk
            </td>
				
            <td bgcolor="#aaa" width="20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

这将产生以下输出-

使用DIV,SPAN

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

尽管可以使用HTML表格实现漂亮的布局，但是表格并不是真正作为布局工具设计的。

在这里，将尝试使用<div>标签和CSS达到相同的输出，无论您在上一个示例中使用<table>标签实现了什么。

<!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 Learnfk</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 Learnfk.com
            </center>
         </div>
			
      </div>
   </body>

</html>

这将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

机器学习40讲 -〔王天一〕

程序员进阶攻略 -〔胡峰〕

透视HTTP协议 -〔罗剑锋（Chrono）〕

MongoDB高手课 -〔唐建法（TJ）〕

罗剑锋的C++实战笔记 -〔罗剑锋〕

跟月影学可视化 -〔月影〕

Web 3.0入局攻略 -〔郭大治〕

大型Android系统重构实战 -〔黄俊彬〕

零基础GPT应用入门课 -〔林健（键盘）〕

好记忆不如烂笔头。留下您的足迹吧 :)