This time I will bring you a detailed explanation of H5 div layout and table layout. What are the precautions of H5 div layout and table layout? Here are practical cases, let’s take a look.
The example of this article analyzes the html5 p layout and table layout for your reference. The specific content is as follows
p layout: html+css implements simple layout. The
heightin #container cannot be written as a percentage and must be a specific height.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{ margin:0; padding:0; } #container{ width:100%; height:650px; background-color: aqua; } #heading{ width:100%; height:10%; background-color: azure; } #content-menu{ width:30%; height:80%; background-color: chartreuse; float:left; } #content-body{ width:70%; height:80%; background-color: chocolate; float:left; } #footer{ width:100%; height:10%; background-color: darkgrey; clear: both; } </style> </head> <body> <p id="container"> <p id="heading">头部</p> <p id="content-menu">内容菜单</p> <p id="content-body">内容主体</p> <p id="footer">底部</p> </p> </body> </html>
Rendering:
table layout:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginwidth="0px" marginheight="0px"> <table width="100%" height="650px" style="background-color: aqua"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td> </tr> <tr> <td width="20%" height="80%" style="background-color: antiquewhite">左菜单</td> <td width="60%" height="80%" style="background-color: coral">内容</td> <td width="20%" height="80%" style="background-color: cornflowerblue">右菜单</td> </tr> <tr> <td colspan="3" width="100%" height="10%" style="background-color: crimson">这是底部</td> </tr> </table> </body> </html>
Rendering:
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of paging query
Detailed explanation of the use of date-related functions in JS
The above is the detailed content of Detailed explanation of H5 div layout and table layout. For more information, please follow other related articles on the PHP Chinese website!