网页布局对于提高网站外观非常重要。设计具有出色外观的网站布局需要花费大量时间。
如今,所有现代网站都使用基于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>
这将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-layouts.html
来源:LearnFk无涯教程网
您可以设计网页以将您的网页内容放置在多个页面中。您可以将内容保留在中间列中,并且可以使用左列使用菜单,而右列可以用于放置广告或其他内容。这种布局与无涯教程的网站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>
这将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-layouts.html
来源:LearnFk无涯教程网
<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>
这将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-layouts.html
来源:LearnFk无涯教程网
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
HarmonyOS快速入门与实战 -〔QCon+案例研习社〕