什么叫做布局？

又称为版式布局，是网页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. python中的sort方法使用详解

    Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不 ...

  2. 免密sudo su

    1.添加文件 /etc/sudoers.d/wsy_sudoers %wsy-sudoers ALL=(ALL:ALL) NOPASSWD:ALL 2.添加用户组 groupadd wsy-sudoe ...

  3. 再学Java 之 解决No enclosing instance of type * is accessible

    深夜,临睡前写了个小程序,出了点小问题 public class Test_drive { public static void main(String[] args){ A a = new A(); ...

  4. [转] 用协议分析工具学习TCP/IP

    一.前言 目前,网络的速度发展非常快,学习网络的人也越来越多,稍有网络常识的人都知道TCP/IP协议是网络的基础,是Internet的语言,可以说没有TCP/IP协议就没有互联网的今天.目前号称搞网的 ...

  5. 修改salt-minion的id后报错解决方法

    centos7使用命令 /usr/bin/salt-minion start运行报错 Error parsing configuration file: /etc/salt/master - expe ...

  6. Hive文件存储格式和hive数据压缩

    一.存储格式行存储和列存储 二.Hive文件存储格式 三.创建语句和压缩 一.存储格式行存储和列存储 行存储可以理解为一条记录存储一行,通过条件能够查询一整行数据. 列存储,以字段聚集存储,可以理解为 ...

  7. [转载]常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  8. vs未能解析此远程名称: 'api.nuget.org'

    知道了DNS地址我们就可以来修改了,点击电脑右下角的连接图标,选择“打开网络和共享中心”,当然也可以在控制面板中“网络和Internet”进入“打开网络和共享中心”:   进入“网络和共享中心”后,我 ...

  9. Ionic APP 热更新 之 产品发布状态下的热更新搭建，去local-dev-addon插件

    上一篇,我们介绍了在本地开发环境下的ionic项目热更新测试, 本文,我们将详细说明如何在去掉cordova-hot-code-push-local-dev-addon插件的情况下,实现热更新. 使用 ...

  10. MVC页面缓存

    1.OutputCache 属性 contact.cshtml    [OutputCache(Duration=10)] public ActionResult Contact()   {      ...