Flex:Holy Grail

<html>

<head>

<style type="text/css">

body,div,header,main,nav,aside,

footer{

  border: solid 1px red;

}

.HolyGrail {

  display: flex;

  min-height: 90vh;

  flex-direction: column;

}

header,

footer {

  flex: 1;

  background-color:#00ffff;

  text-align:center;

}

.HolyGrail-body {

  display: flex;

  flex: 1;

}

.HolyGrail-content {

  flex: 1;

}

.HolyGrail-nav, .HolyGrail-ads {

  /* 两个边栏的宽度设为12em */

  flex: 0 0 12em;

}

.HolyGrail-nav {

  /* 导航放到最左边 */

  order: -1;

}

如果是小屏幕，躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) {

  .HolyGrail-body {

    flex-direction: column;

    flex: 1;

  }

  .HolyGrail-nav,

  .HolyGrail-ads,

  .HolyGrail-content {

    flex: auto;

  }

}

.HolyGrail-nav,.HolyGrail-ads{

   background-color:#cc33cc;

}

.HolyGrail-content{

    background-color:#FFB5C5;

}

</style>

</head>

<body class="HolyGrail">

  <header>HEADER</header>

  <div class="HolyGrail-body">

    <main class="HolyGrail-content">CONTENT</main>

    <nav class="HolyGrail-nav">MENU</nav>

    <aside class="HolyGrail-ads">AD-AD-AD</aside>

  </div>

  <footer>FOOTER</footer>

</body>

</html>

Flex: Holy Grail的更多相关文章

  1. 【CSS-flex】圣杯布局（Holy Grail Layout）、输入框的布局、悬挂式布局、固定的底栏

    1.圣杯布局(Holy Grail Layout) 其指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左 ...

  2. Holy Grail Bellman-Ford/spfa

    Holy Grail Bellman-Ford #include <bits/stdc++.h> using namespace std; , maxm = ; const int inf ...

  3. The Preliminary Contest for ICPC Asia Nanjing 2019 H. Holy Grail

    题目链接:https://nanti.jisuanke.com/t/41305 题目说的很明白...只需要反向跑spfa然后输入-dis,然后添-dis的一条边就好了... #include < ...

  4. Holy Grail【spfa求最短路】

    题目链接:https://www.jisuanke.com/contest/3004?view=challenges 题目大意: 1.一个无向图,给出六个顶点,添六条边,但是添边是有限制的.每次添边的 ...

  5. H.Holy Grail ( floyd )（The Preliminary Contest for ICPC Asia Nanjing 2019）

    题意: 给出一个有向图,再给出6条原来不存在的路径,让你在这6条路径上添加一个最小的数,使图不存在负环. 思路: 直接6遍 floyd 输出就行了. #include <bits/stdc++. ...

  6. 多次最短路反思-Holy Grail

    √ u=s[run],v=t[run]; ret=max(-d[v][u],-1000000000LL); dis[u][v]=ret;//d[u][v]= G[u].push_back(v); × ...

  7. 2019 ICPC南京站网络赛 H题 Holy Grail（BF算法最短路）

    计蒜客题目链接:https://nanti.jisuanke.com/t/41305 给定的起点是S,终点是T,反向跑一下就可以了,注意判负环以及每次查询需要添加边 AC代码: #include< ...

  8. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  9. Flex 布局2

    Flex 布局2     你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Sch ...

随机推荐

  1. ABP架构学习系列一 整体项目结构及目录

    本系列是基于aspnetboilerplate-0.8.4.0版本写的,其中原因是由于较高的版本太抽象难以理解和分析,对于还菜菜的我要花更多的时间去学习. abp的源码分析学习主要来源于 HK Zha ...

  2. Java笔记：Java 流(Stream)、文件(File)和IO

    更新时间:2018-1-7 12:27:21 更多请查看在线文集:http://android.52fhy.com/java/index.html java.io 包几乎包含了所有操作输入.输出需要的 ...

  3. python中输出内容颜色得控制

    参考:http://www.jb51.net/article/51237.htm 颜色代码 1)代码列表 格式:\[显示方式;前景色;背景色m 说明: 前景色 背景色 颜色 ------------- ...

  4. Excel数据导入至Dataset中

    public static DataSet ExcelToDataSet(string ppfilenameurl,string pptable) { string strConn = "P ...

  5. 商业智能(BI)选型手册（转载）

    摘自http://articles.e-works.net.cn/bi/Article126429.htm 1.前言 互联网时代企业数据呈现爆发式增长,全面考验着企业的数据处理和分析能力.面对大容量. ...

  6. Java学习笔记-枚举类型

    枚举类型 枚举类型就是预先定义的一类常量集合,如一周的时间.水果的类型等.需要注意的几点内容如下: 定义枚举类时,Java默认继承java.lang.Enum,所以定义的枚举类不能继承其他类型: 枚举 ...

  7. 固定底部导航菜单-续集（BottomMenu-移动端V3.0）

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  8. c/c++ 贪吃蛇控制台版

    贪吃蛇控制台版(操作系统win7 64位:编译环境gcc, vs2017通过,其它环境未测试 不保证一定通过) 运行效果: #include <iomanip> #include < ...

  9. 【次小生成树】bzoj1977 [BeiJing2010组队]次小生成树 Tree

    Description 小 C 最近学了很多最小生成树的算法,Prim 算法.Kurskal 算法.消圈算法等等. 正当小 C 洋洋得意之时,小 P 又来泼小 C 冷水了.小 P 说,让小 C 求出一 ...

  10. Spring框架入门之Spring简介

    一.Spring简介(由Rod Johnson创建的一个开源框架)        Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿 ...