*{
    margin: 0;
    padding: 0;
}

body,html{
    width: 100%;
    height: 100%;
        font: bold 24px 隶书;
}

header,footer{
    background: rgba(30,10,10,0.6);
    padding: 15px;
    text-align: center;
    line-height: 2em;
    color: #fff;
}

section{
    background: rgba(5,5,5,0.5);
    flex-grow: 1;
    display: flex;
    flex-flow: row;
}

article{
    background: orange;
    min-width: 500px;
    flex-grow: 1;
}
nav,aside{
    background: rgba(80,20,20,0.5);
    width: 180px;
}
body{
    display:flex;
    flex-flow: column;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性三列布局</title>
    <link rel="stylesheet" type="text/css" href="style15.css">
</head>
<body>
<header>头部</header>
<section>
    <nav>左导航</nav>
<article>内容部分</article>
    <aside>右边栏</aside>
</section>
<footer>底部</footer>

</body>
</html>

html5 css练习，弹性三栏布局的更多相关文章

  1. 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  2. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  3. 详解 CSS 七种三栏布局技巧

    作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...

  4. CSS实现三栏布局(5种)

    常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

  5. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  6. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  7. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  8. 三种方法实现CSS三栏布局

    本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

  9. css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应

    解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...

随机推荐

  1. java 图片裁剪

    图片裁剪功能,我一直以为是前端那边去做,后台不用做过多的考虑,现在我发现,前端去做裁剪好像不是太理想,我在这里简单地介绍一下我们大java的裁剪功能 前端只需要上传,x (x轴),y(y轴) , h( ...

  2. 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第5章编程练习9

    #include <iostream>using namespace std;int main(){ int num; cout<<"Enter number of ...

  3. hadoop2集群环境搭建

    在查询了很多资料以后,发现国内外没有一篇关于hadoop2集群环境搭建的详细步骤的文章. 所以,我想把我知道的分享给大家,方便大家交流. 以下是本文的大纲: 1. 在windows7 下面安装虚拟机2 ...

  4. centos 搭建git服务器和客户端

    参考资料:http://blog.feehi.com/linux/124.html 1.搭配环境 2.安装git 3.创建git用户 4.创建裸库 5.配置公钥匙 6.客户端clone代码库 1.搭配 ...

  5. GMA Round 1 新程序

    传送门 新程序 程序框图如图所示,当输入的n=时,输出结果的ans是多少? 容易看出该程序求n以内质数个数,50以内有15个. 定位:简单题

  6. BAT加密最终版

    %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a %%a ...

  7. 线段树合并+并查集 || BZOJ 2733: [HNOI2012]永无乡 || Luogu P3224 [HNOI2012]永无乡

    题面:P3224 [HNOI2012]永无乡 题解: 随便写写 代码: #include<cstdio> #include<cstring> #include<iostr ...

  8. 2018-2019-2 网络对抗技术 20165311 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165311 Exp3 免杀原理与实践 免杀原理及基础问题回答 实验内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil- ...

  9. iOS 自定义一个常规的TabBar

    #import "WJWBaseTabBarViewController.h" #import "WJWTabBarButton.h" #import &quo ...

  10. 【Python基础】lpthw - Exercise 39 字典

    1. 字典和列表的区别 对于列表,它是一些项的有序排列,只能通过数值来进行索引:对于字典,则可以通过许多东西进行索引,它采用键-值映射的方式,不存在一个特定的顺序,因此不能用类似列表的数值索引,但它的 ...