一、使用 二、使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin:0px; } #container{ width:100%; height:950px; background-color:darkgray; } #heading{ width:100%; height:10%; background-color:aqua; } #content_menu{ width:30%; height:80%; background-color:aquamarine; float:left; } #content_body{ width:70%; height:80%; background-color:blueviolet; float:left; } #footing{ width: 100%; height: 10%; background-color: black; clear: both; } </style></head><body> <div id="container"> <div id="heading">头部</div> <div id="content_menu">内容菜单</div> <div id="content_body">内容主体</div> <div id="footing">底部</div> </div></body></html>元素布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table布局</title> <style type="text/css"> body{ margin:0px; } #container{ width:100%; height:950px; background-color:darkgray; } #heading{ width:100%; height:10%; background-color:aqua; } #content_menu{ width:30%; height:80%; background-color:aquamarine; float:left; } #content_body{ width:70%; height:80%; background-color:blueviolet; float:left; } #footing{ width: 100%; height: 10%; background-color: black; clear: both; } </style></head><body> <table width="100%" height="950px" style="background-color: darkgray"> <tr> <td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td> </tr> <tr> <td width="30%" height="80%" style="background-color:blue">左菜单</td> <td width="70%" height="80%" style="background-color:blueviolet">主体</td> </tr> <tr> <td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td> </tr> </table></body></html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
