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. Java的按位操作符

    本文参考:Java的位操作符 Java的位操作符用来操作整数基本数据类型中的单个"比特"(bit),即代进制位.而我们知道比特就是0和1,那么,位操作就是对这些数据进行基本的操作. ...

  2. Jenkins远程部署SpringBoot应用

    一般Web工程通过Jenkins远程部署到Tomcat,可以采用Maven的tomcat-maven-plugin插件进行部署.最近接触到Spring Boot工程的部署,由于Spring Boot应 ...

  3. [Micropython]TPYBoardV102 Dfu固件烧写教程

    TPYBoardv10x固件烧写一直是大家比较关心的问题,上次教大家用SWD接口烧写TPYBoard的固件,这次教大家用另一种方式烧写我们TPYBoardv10x的固件,直接用dfu模式烧写固件. 用 ...

  4. 如何处理导出的csv无法查看身份证后三位的情况？

    如何处理导出的csv无法查看身份证后三位的情况? 原因:excel中如果是常规格式无法显示那么多位数,改成文本格式就可以. 简单步骤,导入数据------>选择数据来源------>选择编 ...

  5. contain_of宏定义

    Container_of在Linux内核中是一个常用的宏,用于从包含在某个结构中的指针获得结构本身的指针,通俗地讲就是通过结构体变量中某个成员的首地址进而获得整个结构体变量的首地址. 实现方式: co ...

  6. JAVA实用案例之文件导出（JasperReport踩坑实录）

    写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六 ...

  7. 51Nod 1016 水仙花数 V2(组合数学,枚举打表法)

    1016 水仙花数 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 160         难度:6级算法题                水仙花数是指一个 n 位数 ( n≥3 ) ...

  8. [bzoj4410] [Usaco2016 Feb]Fence in

    根据ccz181078大爷的题解可得(QAQ,每次肯定是断掉连续一行||一列的栅栏... 贪心地想,一个格子与外面联通,显然是先把短的边界断掉(就像mst那样 但是比较蛋疼的是,因为我们每次断的时候, ...

  9. git工作流程一览

    Git是分布式版本控制系统,没有中央服务器,每个人的电脑就是一个完整的版本库,工作的时候不需要联网了,因为版本都在自己电脑上.协同的方法是这样的:比如说自己在电脑上改了文件A,其他人也在电脑上改了文件 ...

  10. Function方法和属性图