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. MyEclipse项目中的文件点击右键Team选项中没有提交到SVN中的选项是怎么回事

    MyEclipse项目中的文件点击右键Team选项中没有提交到SVN中的选项是怎么回事 其实你已经可以百度到很多方法: 例如下面博客提供的 http://www.xuebuyuan.com/95285 ...

  2. td标签里内容不换行

    在一些页面开发中,除自己操作外,引起换行的情况一般有: Ex一.td标签里内容长度过长引起换行: Ex二.div标签(或其他标记)里内容有文本和图片引起换行: 解决方法: 针对例子一用<nobr ...

  3. 特殊的流程控制语句break continue exit

    break语句可以结束当前的for.foreach.while.do-while.或者switch的执行. for($i=1; $i<10; $i++) { if($i == 5) { echo ...

  4. python反爬之懒加载

    # 在平时的爬虫中,如果遇到没有局部刷新,没有字体加密,右键检查也能看到清晰的数据,但是按照已经制定好的解析规则进行解析时,会返回空数据,这是为什么呢,这时可以在网页右键查看一下网页源代码,可以发现, ...

  5. ArcGIS数据存储的方式

    工作空间文件夹和地理数据库为存储和管理ArcGIS地理信息提供了主要容器.工作空间文件夹只是磁盘上的普通文件夹,它可保存大量的文件地理数据库.个人地理数据库.基于文件的数据集以及一系列ArcGIS文档 ...

  6. Java Knowledge series 5

    Interface from user, not from implementor.(DIP) Interface-Oriented Programming. Interface or Abstrac ...

  7. 转：ACCESS数据库转ORACLE数据库分享

    来源: 作者:zz 网上有很多文章介绍access转oracle数据库的方法,本人都尝试了,不是很成功,列举一下,后来人不必盲目试了,基本不成功: 1.Access-->excel-->P ...

  8. SQL获得连续的记录的统计

    SELECT TYEAR, MIN(TDATE) AS STARTDATE, MAX(TDATE), COUNT(TYEAR) AS ENDNUM --TYEAR年,STARTDATE连续记录的开始时 ...

  9. LoadRunner性能测试之常见函数及参数的说明和作用

       

  10. 利用jQuery做登录界面的验证码

    主要是为了有效防止机器恶意注册,对某一个特定已注册用户用特定程序暴力破解方式进行不断的登陆尝试.验证码是现在很多网站注册/登录时必填的, 虽然对用户可能有点麻烦,但是对网站/社区来说这个功能还是很有必 ...