html5--6-67 阶段练习8-弹性三列布局

学习要点

  • 运用弹性盒子模型完成一个三列布局，加深对学过知识点的综合应用能力。
  • 了解用百分比设置元素高度的方法。

 @charset="UTF-8";

 *{

     margin:;

     padding:;

 }

 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:;

     display: flex;

     flex-flow: row;

 }

 article{

     min-width: 500px;

     flex:;

     background: orange;

 }

 nav,aside{

     width: 180px;

     background: rgba(80,20,20,0.8);

 }

 body{

     display: flex;

     flex-flow: column;

 }
 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>6-67课堂演示</title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <header> 页面头部</header>

     <section>

         <nav>左导航栏</nav>

         <article>内容部分</article>

         <aside>右边栏</aside>

     </section>

     <footer>页面底部</footer>

 </body>

 </html>

html5--6-67 阶段练习8-弹性三列布局的更多相关文章

  1. html5 css练习，弹性三栏布局

    *{    margin: 0;    padding: 0;} body,html{    width: 100%;    height: 100%;        font: bold 24px ...

  2. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  3. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  4. CSS三列布局之左右宽度固定，中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

  5. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  6. 【css】css2实现两列三列布局的方法

    前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...

  7. flex实现三列布局

    css3新引入的flex在某些情况下布局非常实用 因为它是弹性盒子所以自适应效果会很棒 不过各项布局方案还是各有优劣 <!DOCTYPE html> <html lang=" ...

  8. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  9. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

随机推荐

  1. 使用icomoon把svg图片生成字体图标

    今天看了使用icomoon来将svg转换成图标字体,本来是不会使用别人给的svg,也不清楚具体的好处是什么,查了svg以后,越来越懵,svg挺好的为什么要转成图标字体呢. 一.SVG介绍 SVG 是一 ...

  2. Spring 详解（二）------- AOP关键概念以及两种实现方式

    目录 1. AOP 关键词 2. AOP 的作用 3. AOP 的通知类型 4. 基于 xml 的配置方式 5. 基于注解的配置方式 6. 切面的优先级 7. 重用切点表达式 8. 两种方式的比较(摘 ...

  3. easyui combobox模糊查询

    用easyui框架开发的攻城狮恐怕都遇到过这样一个问题,就是在新增页面combobox下拉框需要支持模糊查询,但是输入不是combobox中Data里面的值的时候,点击保存,依然是可以新增进去的,这样 ...

  4. 用canvas实现一个colorpicker

    http://www.cnblogs.com/ufex/p/6382982.html 每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个color ...

  5. Chrome/谷歌开发者工具分析

    Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用 ...

  6. SQL模糊查询碰到空值怎么办？

    作者:iamlaosong SQL查询语句用%来做模糊查询.程序中一般要求用户输入部分信息,依据这个信息进行模糊查询. 比如用户输入340104,以下这条语句就是查询昨天客户代码为340104开头的全 ...

  7. HDU 2108 Shape of HDU (判断是不是凸多边形 叉乘)

    Shape of HDU Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  8. 读写锁(pthread)

    读写锁: 用于对于某个给定资源的共享访问,而不是像互斥锁那样,将所有试图进入临界区的线程都阻塞住 相关内容: 线程互斥锁 分配规则:(写独占,读共享) 1.只要没有线程持有某个给定的读写锁用于写,那么 ...

  9. android经常使用正则工具类

    此类提供日常开发中经常使用的正则验证函数.比方:邮箱.手机号.电话号码.身份证号码.日期.数字.小数.URL.IP地址等.使用Pattern对象的matches方法进行整个字符匹配,调用该方法相当于: ...

  10. 使用Swift作为Glance后端存储

    原文链接 http://thornelabs.net/2014/08/03/use-openstack-swift-as-a-backend-store-for-glance.html By defa ...