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

lewis 1年前 (2024-03-06) 阅读数 2 #技术

这篇文章主要介绍“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>

页面显示效果：

以上就是关于“HTML中进行页面布局可以做哪些操作”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注博信，小编每天都会为大家更新不同的知识。

版权声明

本文仅代表作者观点，不代表博信信息网立场。

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

版权声明

作者文章