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. SQL DATEDIFF语法及时间函数 Sql 查询当天、本周、本月记录

    SQL DATEDIFF语法及时间函数 Sql 查询当天.本周.本月记录 转:http://blog.csdn.net/Json1204/article/details/7863801?locatio ...

  2. 错误提示”void is an invalid type for the variable“

    今晚做android作业,出现错误提示:void is an invalid type for the variable, invalid:无效的  variable:变量,在网上找了一下后知道是 方 ...

  3. 批量删除QQ空间说说

    第一步:用电脑打开浏览器登录你的QQ空间 第二步:点击你的说说栏目 第三步:按下电脑的F12键或者点击右上角的菜单一栏,点击开发者工具 第四步:看到右半边屏幕,找到一个叫Console的菜单,并且点击 ...

  4. mysql 将null转代为0(转)

    1.如果为空返回0 select ifnull(null,0) 2.如果为空返回0,否则返回1 select if(isnull(col),0,1) as col. MYSQL 中的IFNULL函数 ...

  5. 浅谈SQL Server中的三种物理连接操作(Nested Loop Join、Merge Join、Hash Join)

    简介 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所选数据的选择性转化为Loop Join,Merge J ...

  6. 解决 maven 项目中加入了 lombok 库后依然报错的问题

    平时我们采用 maven 引入第三方库,可以方便的管理第三方 jar 包,然加入 lombok 后启动 eclipse 依然报错,这是由于 lombok 是通过反射在运行时自动生成 getter(). ...

  7. baidu-aip-SDK node.js 身份证识别

    最近项目中客户需要实现身份证识别功能,合理计划了之后决定使用百度ai的身份证识别. 身份证识别是文字识别的一种,类似的功能有很多比如驾驶证识别等等,原理都是相同的. 对于前端初学者来说,如果要实现这种 ...

  8. 在使用angular和swiper插件中的一些问题

    在使用angular获取swiper图片的时候swiper就不会轮播. 解决方法: 1.使用计时器的方法,不是最优 settimeOut(function(){ mySwiper = new Swip ...

  9. vue-router配置

    首先在App.vue中 1.使用router-link组件来导航,通过‘to'属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签 <route ...

  10. 我的Android开发之路——百度地图开源工具获取定位信息

    定位技术在现在的移动设备上是必不可少的,许多app都会使用定位功能. 通常定位方式有两种:GPS定位:网络定位. Android系统对这两种定位方式都提供了相应的API支持,但是因为google的网络 ...