HTML页面布局

最新推荐文章于 2020-07-06 19:42:53 发布

weixin_30407099

最新推荐文章于 2020-07-06 19:42:53 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/zhangcheng001/p/10948065.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>

页面显示效果：

转载于:https://www.cnblogs.com/zhangcheng001/p/10948065.html

weixin_30407099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML页面布局

合理的页面布局，是所有HTML页面的一个基础。 1.可以利用表格，构建页面的布局，在进行内容的填充。 2.使用div，配合float或者flex对页面进行布局。早期的方法，就是利用table表格来进行页面的布局。一个简单的table布局：<!DOCTYPE html><html lang="en">...
复制链接

扫一扫