效果:
HTML代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5应用网页模板</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>页眉区域</header>
<section>
<article>1.主体内容区域</article>
<nav>2.导航栏</nav>
<aside>3.其他栏目</aside>
</section>
<footer>页脚区域</footer>
</body>
</html>
CSS代码:
@CHARSET "UTF-8";
/*基本样式*/
*{/*重置所有标签默认样式,清除缩进,启动标准式解析*/
margin: 0;
padding: 0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border;
box-sizing:border-box;
}
html,body{/*强制页面撑开,满屏显示*/
height:100%;
color: #fff;
}
body{/*强制页面撑开,满屏显示*/
min-width: 100%;
}
header,section,article,nav,aside,footer{/*html5标签默认没有显示类型,统一其基本样式*/
display: block;
text-align: center;
text-shadow: 1px 1px 1px #444;
font-size: 1.2em;
}
header{/*页眉框样式:限高、限宽*/
background-color: hsla(200,10%,20%,.9);
min-height: 100px;
padding: 10px 20px;
min-width: 100%
}
section{/*主体区域框样式:满屏显示*/
min-width: 100%;
}
nav{/*导航框样式:固定宽度*/
background-color: hsla(200,10%,20%,.9);
padding: 1%;
width: 220px;
}
article{/*文档框样式*/
background-color: hsla(200,10%,50%,.9);
padding: 1%;
}
aside{/*侧边栏样式:弹性宽度*/
background-color: hsla(200,10%,80%,.9);
padding: 1%;
width: 220px;
}
footer{/*页脚样式:限高、限宽*/
background-color: hsla(200,10%,80%,.9);
min-height:60px;
padding: 1%;
min-width: 100%;
}
/*flexbox样式*/
body{
/*设置body为伸缩容器*/
display: -webkit-box;/*老版本:IOS 6-, Safari 3.1-6*/
display: -moz-box;/*老版本:Firefox 19-*/
display: -ms-flexbox;/*混合版本:IE10*/
display: -webkit-flex;/*新版本:Chrome*/
display: flex;/*标准规范:Opera 12.1 Firefox 20+*/
/*伸缩项目换行*/
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-direction:normal;
-webkit-box-direction:normal;
-moz-box-lines:multiple;
-webkit-box-lines:multiple;
-webkit-flex-flow:column wrap;
-ms-flex-flow:column wrap;
flex-flow:column wrap;
}
/*实现stick footer效果*/
section{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-flex:1;
-webkit-flex:1;
flex:1;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-direction:normal;
-webkit-box-direction:normal;
-moz-box-lines:multiple;
-webkit-box-lines:multiple;
-webkit-flex-flow:row wrap;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-moz-box-align:seretch;
-webkit-box-align:seretch;
-ms-flex-align:seretch;
-webkit-align-items:seretch;
align-items:seretch;
}
/*文章区域伸缩样式*/
article{
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-flex:1;
-webkit-flex:1;
flex:1;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
/*侧边栏伸缩样式*/
aside{
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
-ms-flex-order:3;
-webkit-order:3;
order:3;
}