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. Centos7上安装使用locate

    centos7上默认没有locate命令,需先安装locate yum install mlocate 注意是mlocate,如果是yum install locate系统会提示没有安装包 安装完成后 ...

  2. MySQL字符串相关函数学习一

    这里总结一下常用的或者有可能用到的一些字符串内建函数 ① ASCII() :返回字符的ASCII码 如果输入的不是一个字符而是一个字符串呢?ascii()会只取第一个字符作为计算的参数,如: ② CH ...

  3. Python当前文件路径与文件夹删除操作

    前言: Python的文件操作跟Java存在部分差异.由于项目需要,近期使用python进行模块开发时遇到一些常见的文件操作便上网搜罗了一番,感觉众说纷纭.因此,结合自身的使用场景,贴一段python ...

  4. iOS 关于退出键盘两种方法和避免遮挡

    退出键盘: 方法1:不使用代理,直接使用: -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self.textFi ...

  5. 【漏洞分析】dedecms有前提前台任意用户密码修改

     0x00 前言 早上浏览sec-news,发现锦行信息安全发布了一篇文章<[漏洞分析] 织梦前台任意用户密码修改>,看完之后就想着自己复现一下. 该漏洞的精髓是php的弱类型比较,'0. ...

  6. Python的Django框架完成一个完整的论坛（源码以及思路）

    一个完整的论坛,登录.注册.发表.头像.点赞.评论.分页.阅读排行等 使用Django2,Python3.5 开发工具:Pycharm5 需要的知识:Python基础知识,Django原理的理解以及使 ...

  7. Java学习笔记27（集合框架一：ArrayList回顾、Collection接口方法）

    集合:集合是java中提供的一种容器,可以用来存储多个数据 集合和数组的区别: 1.数组的长度是固定的,集合的长度是可变的 2.集合中存储的元素必须是引用类型数据 对ArrayList集合的回顾 示例 ...

  8. Maven 环境配置

    1. 解压maven 2. 配置MAVEN_HOME环境变量 MAVEN_HOME   D:\maven\apache-maven-3.0.5-bin\apache-maven-3.0.5 path  ...

  9. dom4j 间隔插入节点 处理复杂的xml文档

    前几周跟着老师做了一个小项目,个人主要负责xml文档处理,处理过程还是比较复杂的.此外这篇文章并不是讲基本的dom4j读写xml文档, 所以阅读此文的前提是你已经有了dom4j或jdom等处理xml文 ...

  10. 搭建LNMP;搭建WIKI

    #!/bin/bash#lnmp搭建#搭建WIKI 1.系统检测,系统环境优化 搭建版本: nginx-1.8.1.tar.gzmysql-5.5.32-linux2.6-x86_64.tar.gzl ...