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. alpha rarefaction using qiime

    shannon菌群多样性指数 H=-∑(Pi)(㏑Pi) Pi=样品中属于第i种的个体的比例,如样品总个体数为N,第i种个体数为ni,则Pi=ni/N: 各种之间,个体分配越均匀,H值就越大.如果每一 ...

  2. Lucene.net(4.8.0) 学习问题记录三: 索引的创建 IndexWriter 和索引速度的优化

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

  3. [SharePoint Online]SharePoint Designer无法打开世纪互联版sp online站点得解决方法，报错信息：请安装更新后再重新打开

    现象描述: 装了个x64版SharePoint designer 2013, 没有装SP1,在打开国际版得office 365 online得时候完全没有问题,但是在打开世纪互联版得时候就打不开,让安 ...

  4. Android 根据字符串动态获取资源ID

    1.常用方法public int getResId(String name,Context context){ Resources r ＝ context.getResources(); int id ...

  5. HTTP 错误 500.19 - Internal Server Error 0x80070005 0x80070003

    IIS发布时错误 错误代码 0x80070005 一.权限:设置文件权限--属性-安全-添加everyone的读取权限(注意是给整个发布文件设置权限而不是config) 二.查看物理路径中是否存在中文 ...

  6. Canvas-图片旋转

    Canvas-图片旋转 众所周知canvas是位图,你可以在里面渲染你要的东西,不过你只能操作canvas的属性来进行编辑.就是说你并不能操作画进canvas的东西,例如我在canvas里添加一幅画, ...

  7. .NET Core单文件发布静态编译AOT CoreRT

    .NET Core单文件发布静态编译AOT CoreRT,将.NET Core应用打包成一个可执行文件并包含运行时. 支持Windows, MacOS and Linux x64 w/ RyuJIT ...

  8. 在ASP.NET Core 2.0中使用CookieAuthentication

    在ASP.NET Core中关于Security有两个容易混淆的概念一个是Authentication(认证),一个是Authorization(授权).而前者是确定用户是谁的过程,后者是围绕着他们允 ...

  9. 关于java中,json字符串转集合和对象,或者集合转json字符串的解决方法

    1 List集合转成json字符串 //Java集合 List<String> list = new ArrayList<String>(); list.add("a ...

  10. 树莓派搭建WEB服务器

    树莓派搭建WEB的教程网上有许多,但感觉每一篇都有一些问题,这次我将网上的教程汇总,并亲身实践,将注意的问题都写进去,方便新手学习! 目录:1,安装nginx+sqlite+php5打造轻量级服务器, ...