<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{

        margin:0;padding:0;

    }

    .container{

        display: flex;

        height: 100vh;

        flex-direction: column;

    }

    header{

        background: #000;

    }

    section{

        flex:1;

        background: pink;

        display: flex;

    }

    footer{

        background: #000;

    }

    .left{

        background: red;

        flex:0 0 100px;

    }

    .center{

        flex:1;

        background: blue;

    }

    .right{

        flex:0 0 100px;

        background: red;

    }

    </style>

</head>

<body>

<div class='container'>

    <header>头部</header>

    <section>

        <div class='left'>左</div>

        <div class='center'>中</div>

        <div class='right'>右</div>

    </section>

    <footer>底部</footer>

</div>

</body>

</html>

flex实现圣杯布局的更多相关文章

  1. flex的圣杯布局记录 （flex : 0 0 80px）

  2. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

  3. flex 圣杯布局

    基本思路 圣杯布局分为3段:上.中.下.  中段被分为:左.中.右3块. 1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column) 2:上.中.下3块弹性项 ...

  4. flex做的圣杯布局

    now,给大家分享一个用flex写的圣杯布局,大家可以参考一下子 首先圣杯布局是两列固定宽度,中间自适应. 我直接说一下步骤,上图,上图 1.步骤1 2.步骤2 上面就是基本的步骤,下面我把代码给大家 ...

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

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

  6. vue-cli中圣杯布局失效问题

    众所周知vue2在前端框架越来越流行,vue-cli这个脚手架工具是我们前端开发必用的,大大的提升了我们的开发效率.当然对于前端小白来说,有些遇到的问题需要和大家分享一下. 移动端页面经常都是需要圣杯 ...

  7. css布局 -双飞翼布局&圣杯布局

    一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. css——圣杯布局

    圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...

  9. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  10. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

随机推荐

  1. Codeforces Round #817 (Div. 4)

    CF传送门 因为洛谷题库未更新,所以给出的题面都是CF的. 现场打真是太卡了(梯子挂了,codeforc.es也崩了),所以五六分钟才打开题目 \(qwq\) A. Spell Check 萌萌题,把 ...

  2. ubuntu undefined reference to

    温馨提示,请使用ctrl+F进行快速查找 libdl.so undefined reference to `dlsym' undefined reference to `dlopen' undefin ...

  3. ifconfig命令的使用

    ifconfig命令 用途:配置或显示TCP/IP网络的网络接口参数. *1.通过--help学习ifconfig的使用 点击查看代码 [root@rocky8 ~]# ifconfig --help ...

  4. winform datagridview行头添加序号

    1.使用datagirdview的RowPostPaint事件 2.datagirdview命名为dgv.(当然这个名字随意,开心就好) 3.贴代码 private void dgv_RowPostP ...

  5. i春秋wanna to see your hat?

    打开题目网页发现是个选择帽子的网页,点击超链接进入一个网页让我们输入我们的name然后匹配帽子颜色(其实不管怎么填都是绿色的)这里也有个注册窗口 先查看源码没什么特别发现,再试试抓包吧 在这个界面抓包 ...

  6. YeserCMS

    这道题直接让我们查网站根目录的flag,我首先想到的是一句话木马,但是奈何找不到上传的接口啊,只好作罢, 在下载发现有个cmseasy的标识,明显是要提示我们这里是easycms,百度easycms的 ...

  7. vulnhub靶场之Chronos：1

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Chronos,下载地址:https://download.vulnhub.com/chronos/Chronos.ova,下载后直接vbox打 ...

  8. 集群部署看过来，低代码@AWS智能集群的架构与搭建方案

    为了帮助充分利用AWS的托管服务快速构建起一套集群环境,彻底去掉"单一故障点",实现最高的可用性,我们准备了<低代码智能集群@AWS的架构与搭建方案>看完本文,带你掌握 ...

  9. MySQL进阶实战3，mysql索引详解，上篇

    一.索引 索引是存储引擎用于快速查找记录的一种数据结构.我觉得数据库中最重要的知识点,就是索引. 存储引擎以不同的方式使用B-Tree索引,性能也各有不同,各有优劣.例如MyISAM使用前缀压缩技术使 ...

  10. 【Java并发入门】03 互斥锁（上）：解决原子性问题

    原子性问题的源头是线程切换 Q:如果禁用 CPU 线程切换是不是就解决这个问题了? A:单核 CPU 可行,但到了多核 CPU 的时候,有可能是不同的核在处理同一个变量,即便不切换线程,也有问题. 所 ...