什么叫做布局？

又称为版式布局，是网页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. IKAnalyzer 独立使用 配置扩展词典

    有三点要注意(要不然扩展词典始终不生效): 后缀名.dic的词典文件,必须如使用文档里所说的 无BOM的UTF-8编码保存的文件.如果不确定什么是  无BOM的UTF-8编码,最简单的方式就是 用No ...

  2. 开源微信支付SDK

    应该有一年多没在博客园上写文章了,毕竟是一个记录自己技术成长的平台,没能将写博客长期坚持下来,说起来也是挺惭愧的.对于自己的近况而言,确实平常加班也比较多,时间会比较压缩,所以到后来博客也基本停止了更 ...

  3. spring boot中使用JdbcTemplate

    本文将介绍如何将spring boot 与 JdbcTemplate一起工作.Spring对数据库的操作在jdbc上面做了深层次的封装,使用spring的注入功能,可以把DataSource注册到Jd ...

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

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

  5. 3DES在Android、Ios 和Java 平台的加密解密

      DES简介:      DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法, 算法的入口参数有三个:Key.Data.Mode.      K ...

  6. sql 保留两位小数

    select convert(decimal(18,2),1800.2669)

  7. 11 - JavaSE之GUI

    GUI(念法 gu yi) AWT AWT(Abstract Window Toolkit 抽象窗口开发包,在C# 或者 linux窗口开发类之上又封装一层,达到跨平台的目的)包括了很多类和接口,用于 ...

  8. pandas 去除NAN

    df = df.dropna(axis=0, how='any')

  9. PHP PSR 标准

    引用他人文章:http://www.cnblogs.com/52php/p/5852572.html PHP中PSR-[0-4]代码规范 PHP-FIG 在说啥是PSR-[0-4]规范的之前,我觉得我 ...

  10. ibatis Dynamic总结(ibatis使用安全的拼接语句，动态查询)

    ibatis中使用安全的拼接语句,动态查询,ibatis比JDBC的优势之一,安全高效 说明文字在注释中 一.引入 一个小例子  <select id="selectAllProduc ...