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. C# 本地文件的上传和下载

    本文主要介绍一下,在APS.NET中文件的简单上传于下载,上传是将文件上传到服务器的指定目录下,下载是从存入数据库中的路径,从服务器上下载. 1.上传文件 (1)页面代码 <table alig ...

  2. JS URL解析

    function urlParse(url) { try { var hostexp = /http\:\/\/([^\/]+)/; var hoststr = url.match(hostexp)[ ...

  3. 对fastdfs 文件清单进行检查，打印无效的文件

    对fastdfs 文件清单进行检查,打印无效的文件2017年12月12日 18:37:18 守望dfdfdf 阅读数:281 标签: fastdfssftpmysql 更多个人分类: 工作 问题编辑版 ...

  4. jeecg3.8popup弹出窗口触发失去焦点事件，引发验证弹窗，影响体验问题的解决办法

    在初始化表单的代码中添加以下加粗部分,有几个popup就定义几个标志位,主要是防止第一次失去焦点时候的弹窗(此时还未来得及选择),提交表单的时候还是会正常校验的. //popup触发失去焦点事件,设置 ...

  5. Java基于jdbc链接mysql数据库步骤示列

    用JDBC来链接MYSQL数据库,基本步骤都大同小异,只不过不同的数据库之间的URL地址有些不同.其基本步骤可分为以下几点: 1.加载相应的数据库的JDBC驱动程序. 2.利用驱动管理器DriverM ...

  6. position 的属性值

    理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky |  initial | inhe ...

  7. spring mvc踩坑记

    前言 主要介绍自己在学习spring mvc过程中踩到的一些坑,涉及到当时遇到这个错误是如何思考的,对思路进行总结,下次遇到类似的错误能够提供一些思路甚至快速解决. 环境准备 jdk8,spring4 ...

  8. 心得整理之一--RDLC多数据源多表

    我将项目中的一部分提炼出来,写了这个Demo. 先说一下需求, 从 API接口, 获取数据源, 调用RDLC 生成PDF文件. (后面还有涉及到使用福昕PDf阅读器进行设置文件自定义内容,以供外部程序 ...

  9. java：xml解析

    DOM.SAX.JDOM.DOM4J四种解析:https://www.cnblogs.com/longqingyang/p/5577937.html Java解析XML文件例子:https://blo ...

  10. java之操作mysql常用方法

    一般引用mysql-connector-java这个包. package DBManager; import java.sql.Connection; import java.sql.DriverMa ...