1.先上效果图,大家来看看

2.代码如下:

<!doctype html>

<meta charset='utf-8' content='text/html' />

<head>

<title>应用网页模板</title>

<style content='text/css'>

*  {

 margin:0px;

 padding:0px;

 -moz-box-sizing:border-box;

 -webkit-box-sizing:border-box;

 box-sizing:border-box;

 }

html,body  {

 width:100%;

 background:#fff;

   }

body {

 min-width:100%;

  }

header,section,nav,article,aside,footer {

 display:block;

 text-align:center;

 text-shadow:1px 1px 1px #444;

 font-size:1.2em;

          }

header {

 background-color:hsla(200,10%,20%,0.9);

 min-height:100px;

 min-width:100%;

 padding:10px 20px;

  }

footer {

 background-color:hsla(250,50%,80%,0.9);

 min-width:100%;

 padding:1%;

 min-height:60px;

  }

section {

 min-width:100%;

 min-height:800px;

  }

section nav {

 background-color:hsla(300,60%,20%,.9);

 padding:1%;

 width:220px;

 }

section article {

 background-color:hsla(120,50%,50%,.9);

 padding:1%;

  }

section aside {

 background-color:hsla(20,80%,80%,.9);

 padding:1%;

 width:220px;

  }

body {

 display:flex;

 display:-ms-flex;

 -ms-flex-flow:column wrap;

 flex-flow:column wrap;

  }

section {

 display:-ms-flex;

 display:flex;

 -ms-flex:1;

 flex:1;

 -ms-flex-flow:row wrap;

 flex-flow:row wrap;

 -ms-flex-align:stretch;

 align-items:stretch;

  }

nav {

 flex:1;

 -ms-flex-order:0;

 order:0;

 }

article {

 -ms-flex:1;

 flex:1;

 -ms-flex-order:2;

 order:2;

  }

aside {

 flex:1;

 -ms-flex-order:3;

 order:3;

  }

</style>

</head>

<body>

<header>页眉区域</header>

<section>

 <article>1.主体内容区域</article>

    <nav>2.导航栏</nav>

    <aside>3.侧边栏</aside>

</section>

<footer>页脚区域</footer>

</body>

HTML5--混合布局的更多相关文章

  1. html5 基本布局+新标签+新选择器 + 线性渐变

    html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  3. Qt 5.4正式发布！引入WP，支持HTML5混合开发

    北京时间12月11日消息,Digia全资子公司The Qt Company在其 官方博客上宣布,正式发布Qt 5.4,支持HTML5混合开发,引入对于Windows Phone的支持,以及众多跨桌面. ...

  4. CSS 实现流布局以及多列混合布局

    基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...

  5. Android + HTML5 混合开发

    摘要: 对于 Android + HTML5 混合开发以下的观点仅仅是我的个人观点,如果有什么不对的地方请指正 简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一 ...

  6. Swing 混合布局

    案例一:Border边境边界 package swing; /** * swing 混合布局 */ import java.awt.*; import javax.swing.*; public cl ...

  7. 慕课笔记利用css进行布局【混合布局】

    <html> <head> <title>混合布局学习</title> <style type="text/css"> ...

  8. html5 弹性布局

    html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...

  9. doT.js实现混合布局，判断，数组，函数使用，取模，数组嵌套

    doT.js实现混合布局 数据结构 { "status": "1", "msg": "获取成功", "info ...

  10. RecyclerView实现混合布局

    PS:好长时间不写博客了,起初是不知道写些什么,后来接触了到了很多东西,原本看似简单的东西,背后都隐藏着巨大的秘密,想handler的使用,一般情况下会引起内存泄漏问题,想着找到方法结局不就得了吗,可 ...

随机推荐

  1. as3.0 动态文本属性大全

    var my_fmt = new TextFormat();//常用样式 my_fmt.align = "center"; my_fmt.blockIndent = 50; //区 ...

  2. 一些实用的浏览器meta

    标签: 兼容性 meta 通用 <!--声明文档使用的字符编码--> <meta charset='utf-8′> <!--viewport定义--> <me ...

  3. pdf word excel ppt 在线预览方案收集

    https://www.idocv.com/docs.html http://www.cnblogs.com/wolf-sun/p/3569960.html http://coolwanglu.git ...

  4. 零基础逆向工程35_Win32_09_临界区_CRITICAL_SECTION结构

    1 引入 为什么会存在临界区这中机制呢?是为多线程同时访问全局变量而引入的.也就是上一篇帖子的末尾流出的问题程序的解决办法. 看懂了上面的,那么我们再罗嗦总结一下: 1.多线程访问全局变量时,存在线程 ...

  5. Cordova各个插件使用介绍系列（七）—$cordovaStatusbar手机状态栏显示

    在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...

  6. zabbix3.0问题及解决方法

    一.问题:Zabbix agent on T2 is unreachable for 5 minutes         解决:1.进入zabbix service端 vim /etc/zabbix/ ...

  7. Hive建模

    Hive建模 1.介绍 Hive作为数据仓库,同关系型数据库开发过程类似,都需要先进行建模,所谓建模,就是对表之间指定关系方式.建模在hive中大致分为星型.雪花型和星座型.要对建模深入理解,首先需要 ...

  8. Tensorflow ValueError: Protocol message RewriterConfig has no "layout_optimizer" field

    I changed models/research/object_detection/exporter.py line 71/72 from: rewrite_options = rewriter_c ...

  9. 【js基础修炼之路】— null和undefined的区别

    在近期的复习期间遇到null和nudefined,于是通过查找资料,想写一篇文章来说明他们的区别.. javaScript高级程序设计: 在使用var声明变量但未对其加以初始化时,这个变量的值就是un ...

  10. ABAP Netweaver和Hybris Enterprise Commerce Platform的登录认证

    ABAP Netweaver 在我的博客Learn more detail about Standard logon procedure里有详细介绍. Hybris ECP Hybris Admini ...