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. 如何解读IL代码

    如何解读IL代码 关于IL代码,我有将从三个方面去揭开它神秘的面纱.IL代码是什么?我们为什么要去读懂IL代码?我们如何去读懂IL代码?这三个问题的解答,将是我解读IL代码的整体思路. IL代码是什么 ...

  2. 日期API

    Java 8 在包java.time下包含了一组全新的时间日期API.下面的例子展示了这组新API里最重要的一些部分: 1.Clock 时钟 Clock类提供了访问当前日期和时间的方法,Clock是时 ...

  3. python复习目录

    目录 一.计算机基础 二.python 2.1初始python 2.1 python基础1 2.2 python基础2 三.函数 3.1 函数进阶 3.2 函数之装饰器 3.3 递归函数之二分查找 3 ...

  4. #include stdio.h(3)

    #include <stdio.h> int main() { /* * ** *** **** ***** */ ;a<;a++) { printf("\n") ...

  5. 解决dubbo的服务发布注解@service不能和事务注解不能共用的方案

    最近在项目的开发中遇到了一个问题,就是服务提供方使用@service发布dubbo服务时候,服务消费方@Reference无法注入bean导致空指针异常的问题.分析原因为@service注解并没有将服 ...

  6. 如何利用PHP语言压缩图片？PHP入门教程

    PHP可以控制缩略图清晰度和缩略图之后产生音量的产生.下面我们就来看看如何使用PHP优化我们的压缩图像.  PHP应用程序的开发往往涉及生成缩略图,使用PHP生成缩略图的过程本身并不难,但你知道PHP ...

  7. 模拟水题，查看二维数组是否有一列都为1(POJ2864)

    题目链接:http://poj.org/problem?id=2864 题意:参照题目 哈哈哈,这个题discuss有翻译哦.水到我不想交了. #include <cstdio> #inc ...

  8. Codeforces Round #347 (Div.2)_A. Complicated GCD

    题目链接:http://codeforces.com/contest/664/problem/A A. Complicated GCD time limit per test 1 second mem ...

  9. 在vue中使用插槽 slot

    插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...

  10. SSM框架整合：转自：http://blog.csdn.net/zhshulin

    使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合 ...