HTML5应用网页模板

效果：

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;
}

HTML5应用网页模板

猜你喜欢