什么叫做布局？

又称为版式布局，是网页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. Exception message: /bin/bash: line 0: fg: no job control

    这个错误是 我本地idea 远程调试hadoop集群出现的 Diagnostics: Exception from container-launch. Container id: container_ ...

  2. 【C#小知识】C#中一些易混淆概念总结（五）---------深入解析C#继承

    目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...

  3. Javac语法糖之其它

    1.变长参数 class VarialbeArgumentsDemo { public static void doWork(int... a) {//可变参数 } public static voi ...

  4. LetExpr表达式解读

    Integer a = 0; a++; 举个例子,如下: package com.test19; public class BugReport<T> { private T n; publ ...

  5. SearchView去掉下划线

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

  6. Chrome插件下载地址

    www.crx4chrome.com可以直接下载 Chrome Store 插件 在chrome web store好像只能安装插件.

  7. EF Core 实现多租户

    目录 SAAS 和多租户 多租户数据隔离方案 使用 EF Core 简单实现多租户 单数据库实现 多数据库实现 源代码 参考 SAAS 和多租户 SaaS(软件及服务)区别于其他应用程序的主要特征就是 ...

  8. 五个步骤教你理清Redis与Memcached的区别

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由Super发表于云+社区专栏 memcached和redis,作为近些年最常用的缓存服务器,相信大家对它们再熟悉不过了.前两年还在学校 ...

  9. springMVC中ModelAndView学写笔记

    api介绍: 构造函数摘要 ModelAndView()           bean样式用法的默认构造函数:填充bean属性,而不是传递构造函数参数. ModelAndView(Object vie ...

  10. elasticSearch6源码分析(2)模块化管理

    elasticsearch里面的组件基本都是用Guice的Injector进行注入与获取实例方式进行模块化管理. 在node的构造方法中 /** * Constructs a node * * @pa ...