如何使用CSS進行網頁佈局（HTML/CSS）

時間 2019-11-21

標籤如何使用 css 進行網頁佈局 html 欄目 CSS 简体版

原文原文鏈接

什麼叫作佈局？html

又稱爲版式佈局，是網頁UI設計師將有限的視覺元素進行有機的排列組合。ide

題目：假設高度已知，請寫出三欄佈局，其中左欄和右欄寬度各爲300px，中間自適應佈局

一、浮動佈局flex

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.float .left {
        float: left;
        width: 300px;
        background: red;
      }
      .layout.float .right {
        float: right;
        width: 300px;
        background: blue;
      }
      .layout.float .center {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <section class="layout float">
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>浮動解決方案</h1>
          <p>
            這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分
          </p>
        </div>
      </article>
    </section>
  </body>
</html>

View Code

二、絕對定位佈局flexbox

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.absolute .left-center-right>div {
        position: absolute;
      }
      .layout.absolute .left {
        left: 0;
        width: 300px;
        background: red;
      }
      .layout.absolute .center {
        left: 310px;
        right: 310px;
        background: yellow;
      }
      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <section class="layout absolute">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>絕對定位解決方案</h1>
          <p>
            這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

View Code

三、flexbox佈局url

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.flexbox .left-center-right {
        display: flex;
      }
      .layout.flexbox .left {
        width: 300px;
        background: red;
      }
      .layout.flexbox .center {
        flex: 1;
        background: green;
      }
      .layout.flexbox .right {
        width: 300px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <section class="layout flexbox">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>flexbox解決方案</h1>
          <p>
            這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

View Code

四、表格佈局spa

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.table .left-center-right {
        width: 100%;
        display: table;
        height: 100px;
      }
      .layout.table .left-center-right>div {
        display: table-cell;
      }
      .layout.table .left {
        width: 300px;
        background: black;
      }
      .layout.table .center {
        background: green;
      }
      .layout.table .right {
        width: 300px;
        background: burlywood;
      }
    </style>
  </head>
  <body>
    <section class="layout table">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>表格佈局解決方案</h1>
          <p>
            這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分 這是三欄佈局中間部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>