如何使用CSS进行网页布局（HTML/CSS）

时间：2017-12-30 00:22:31 阅读：292 评论：0 收藏：0 [点我收藏+]

什么叫做布局？

又称为版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。

题目：假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应

1、浮动布局

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

2、绝对定位布局

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

3、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.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

4、表格布局

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

View Code

5、网格布局

如何使用CSS进行网页布局（HTML/CSS）

标签：sed nbsp splay 部分布局 add 方案 round 中间

原文地址：https://www.cnblogs.com/fengxiongZz/p/8146641.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行