什么叫做布局？

又称为版式布局，是网页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. Java之IO(一)InputStream和OutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6964702.html 1.前言 计算机的IO操作一直都是比较重要的一环,IO顾名思义,就是输入输出流.不管是磁盘 ...

  2. 巧用border特性实现聊天气泡效果

    利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class ...

  3. Mysql 断电数据损毁恢复

    error log: Database page corruption on disk or a failed 处理: /etc/my.cnf 设置 innodb_force_recovery = 6 ...

  4. SearchView去掉下划线

    SearchView calSearchView = (SearchView) findViewById(R.id.sv_search_text); if (calSearchView != null ...

  5. Linux 搭建Hadoop集群错误锦集

    一.Hadoop集群配置好后,执行start-dfs.sh后报错,一堆permission denied zf sbin $ ./start-dfs.sh Starting namenodes on ...

  6. Mac 硬盘中各个文件夹详解

    打开Macintosh HD你会发现内中有四个文件夹(一般情况下,隐藏文件夹是不可见的,而且,可能会更多,比如安装xcode后会有developer文件夹). 分别有——应用程序(Applicatio ...

  7. Docker数据管理(数据卷&数据卷容器)

    生产环境中使用Docker的过程中,往往需要对数据进行持久化,或者需要在多个容器之间进行数据共享,这必然涉及容器的数据管理操作. 容器中管理数据主要有两种方式: 数据卷(Data Volumes):容 ...

  8. Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in E:\\PHP\\wamp\\www\\lsr\\lsr.php on line 42

    类似于这样的错误: 其实大多数的情况下,都是SQL语句书写错了,特别是这种情况: select * from order; 应该写成: select * from `order`;(那不是单引号,而是 ...

  9. 学习笔记---log4j的使用与配置

    Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式. 日志信息的优先级从高到低有OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL,分别用来 ...

  10. 表单提交.serialize()方法

    html中<form id="myForm" action="..." method='POST'> <div><input ty ...