合理的页面布局，是所有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>

页面显示效果：

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• css3中border-image语法是什么，有何使用技巧

  css3图片边框之如何使用border-image你知道吗？下文有详细的介绍，小编觉得挺实用的，对大家学习或工作或许有帮助，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

• CSS中设置文字字体一样的方法是什么

  在css中，可以利用“*”选择器和“font-size”属性来统一设置全页文字字体，“*”选择器能够选中页面内所有的标签和元素，“font-size”属性用于设置文字的字体样式，语法为“*{font-size:字体大小值;}”。

• 用CSS3怎样实现一个动画时钟效果？

  时钟效果的实现有很多种方法，我们之前也介绍了很多种，这篇文章给大家分享用CSS3实现走动的时钟效果，那么这样的动画时钟效果效果具体怎样做呢？接下来我们详细的了解看看。

• CSS重置的内容有什么，重置究竟有何用处

  CSS重置是什么？简单的说就是重置浏览器的CSS默认属性。为什么要重置它，有什么作用？因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。 CSS重置的内容是什么？最常见的莫过于这

• CSS3做图片抽屉式效果的原理及方法是什么

  这篇文章主要介绍了CSS3实现图片抽屉式效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧