HTML5--混合布局

Posted on 2018-06-29 14:17  eilinge  阅读(663)  评论(0)  编辑  收藏  举报

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>