HTML中进行页面布局可以做哪些操作-群英

上一篇：HTML中中marquee标签表示什么，在哪里使用下一篇：HTML load事件监听如何定义，有哪些方法

这篇文章主要介绍“HTML中进行页面布局可以做哪些操作”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML中进行页面布局可以做哪些操作”文章能帮助大家解决问题。

合理的页面布局，是所有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>&nbsp;<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;width: 500px;height: 100px;text-align: center;line-height: 100px">顶部导航</header>
    <main style="text-align: center;width: 500px">
        <div align="center" style="background: #0395e1;width: 100px;height: 400px;float: left">内<br>容<br>&nbsp;<br>侧<br>栏</div>
        <div style="background: darkorchid;float: left;width: 400px;height: 400px;line-height: 400px">主要内容</div>
    </main>
    <footer  style="background: red;width: 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;width: 500px;height: 100px;text-align: center;line-height: 100px">顶部导航</header>
    <main style="text-align: center;width: 500px;display: flex">
        <div align="center" style="background: #0395e1;width: 100px;height: 400px;">内<br>容<br>&nbsp;<br>侧<br>栏</div>
        <div style="background: darkorchid;width: 400px;height: 400px;line-height: 400px">主要内容</div>
    </main>
    <footer  style="background: red;width: 500px;text-align: center;line-height: 50px">底部</footer>
</body>
</html>