HTML頁面佈局

時間 2020-06-20

標籤 html 頁面佈局欄目 HTML 简体版

原文原文鏈接

合理的頁面佈局，是全部HTML頁面的一個基礎。html

1.能夠利用表格，構建頁面的佈局，在進行內容的填充。佈局

2.使用div，配合float或者flex對頁面進行佈局。flex

早期的方法，就是利用table表格來進行頁面的佈局。spa

一個簡單的table佈局：code

<!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>

　　顯示效果：htm

　　用div佈局：blog

<!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一樣的效果：ci

<!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>

頁面顯示效果：頁面佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。