码迷,mamicode.com
首页 > Web开发 > 详细

如何使用CSS进行网页布局(HTML/CSS)

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

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

什么叫做布局?

又称为版式布局,是网页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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!