什么叫做布局？

又称为版式布局，是网页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>

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>

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>

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>

5、网格布局

如何使用CSS进行网页布局（HTML/CSS）的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  3. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  4. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

  5. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  6. 一、HTML和CSS基础--网页布局--如何用css进行网页布局

    什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...

  7. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  8. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

  9. css的网页布局案例

    常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...

  10. css实现网页布局随滚轮变化响应移动

    _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); 1.第一句代码 _position:abs ...

随机推荐

  1. (转)Mysql技术内幕InnoDB存储引擎－表&索引算法和锁

    表 原文:http://yingminxing.com/mysql%E6%8A%80%E6%9C%AF%E5%86%85%E5%B9%95innodb%E5%AD%98%E5%82%A8%E5%BC% ...

  2. 安卓开发——ListView控件（初始化ListView、列表刷新、长按添加menu）

    前言: ListView——列表,它作为一个非常重要的显示方式,不管是在Web中还是移动平台中,都是一个非常好的.不开或缺的展示信息的工具.在Android中,ListView控件接管了这一重担,在大 ...

  3. linux中的tar命令的使用

    参考网址: https://www.cnblogs.com/newcaoguo/p/5896975.html https://www.cnblogs.com/xccjmpc/p/6035397.htm ...

  4. attachEvent和addEventListener区别总结

    1.attachEvent与addEventListener的区别 支持的浏览器不同.attachEvent在IE9以下的版本中受到支持.其它的都支持addEventListener. 参数不同.ad ...

  5. 《Mysql技术内幕，Innodb存储引擎》——Innodb体系结构

    Innodb体系结构 Innodb存储引擎主要包括内存池以及后台线程. 内存池:多个内存块组成一个内存池,主要维护进程/线程的内部数据.缓存磁盘数据,修改文件前先修改内存.redo log 后台线程: ...

  6. ES6-Iterator & for...of循环

    依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...

  7. springcloud-05-ribbon中不使用eureka

    ribbon在有eureka的情况下, 可以不使用eureka, 挺简单, 直接上代码 application.xml server: port: spring: # 设置eureka中注册的名称, ...

  8. redis集群与分片（1）-redis服务器集群、客户端分片

    下面是来自知乎大神的一段说明,个人觉得非常清晰,就收藏了. 为什么集群? 通常,为了提高网站响应速度,总是把热点数据保存在内存中而不是直接从后端数据库中读取.Redis是一个很好的Cache工具.大型 ...

  9. 使用C# 开始第一个QQ机器人

    本示例将会使用”嘤鹉学舌”这个小插件的实现来演示如何使用Newbe.Mahua实现第一个机器人插件. 插件功能 自动将发送者的消息回发给发送人,嘤鹉(Parrot,其实是说嘤嘤嘤怪)学舌. 开发环境要 ...

  10. win7 iis7 asp.net 编译器错误消息: CS0016:

    编译器错误消息: CS0016: 未能写入输出文件“c:/Windows/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/root ...