合理的页面布局，是所有HTML页面的一个基础。
1.可以利用表格，构建页面的布局，在进行内容的填充。
2.使用div，配合float或者flex对页面进行布局。
早期的方法，就是利用table表格来进行页面的布局。
一个简单的table布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" cellspacing="1" cellpadding="1" align="center"> <tr> <td colspan="2" align="center" style="background: #0395e1">顶部导航</td> </tr> <tr> <td style="background: #f25807" align="center" height="300px" width="100px"> 内<br>容<br> <br>侧<br>栏 </td> <td style="background: red" align="center" width="400px"> 主要内容 </td> </tr> <tr> <td colspan="2" style="background: darkorchid" align="center">底部</td> </tr> </table> </body> </html>
显示效果：
用div布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> </head> <body> <header style="background: #83c44e; 500px;height: 100px;text-align: center;line-height: 100px">顶部导航</header> <main style="text-align: center; 500px"> <div align="center" style="background: #0395e1; 100px;height: 400px;float: left">内<br>容<br> <br>侧<br>栏</div> <div style="background: darkorchid;float: left; 400px;height: 400px;line-height: 400px">主要内容</div> </main> <footer style="background: red; 500px;text-align: center;line-height: 50px">底部</footer> </body> </html>
把float换成flex同样的效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> </head> <body> <header style="background: #83c44e; 500px;height: 100px;text-align: center;line-height: 100px">顶部导航</header> <main style="text-align: center; 500px;display: flex"> <div align="center" style="background: #0395e1; 100px;height: 400px;">内<br>容<br> <br>侧<br>栏</div> <div style="background: darkorchid; 400px;height: 400px;line-height: 400px">主要内容</div> </main> <footer style="background: red; 500px;text-align: center;line-height: 50px">底部</footer> </body> </html>
页面显示效果：
