完整的HTML5页面的模板-自适应页面

学习笔记马富天 2016-04-27 17:17:51 164 0

【摘要】很多时候我们需要写静态页面，但是每次都得重新一行一行写，缺点就是花费时间去写一些无用的代码，不足之处就是会有一些代码是不完整的，考虑没有这么周全，我总结了一个比较完整的HTML页面模板，有需要的可以参考。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<!-- 网页标题 -->

		<title>完整的HTML5页面的模板-自适应页面</title>

		<!-- 设置页面编码 -->

		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

		<!-- 页面关键字，用逗号隔开 -->

		<meta name="keywords" content="个人博客，博客网站，个人笔记，美文欣赏" />

		<!-- 网页描述，介绍网页的主要内容 -->

		<meta name="description" itemprop="description" content="学习笔记，人生感悟!" />

		<!-- 作者 -->

		<meta name="author" content="马富天" />

		<!-- 适配当前屏幕 -->

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!--禁止自动识别电话号码-->

	    <meta name="format-detection" content="telephone=no" />

	    <!--禁止自动识别邮箱-->

	    <meta content="email=no" name="format-detection" />

		<!-- 网站头像 -->

		<link rel="shortcut icon" href="/favicon.ico" />

		<!-- 引入jquery文件 -->

		<script src="./jquery-1.8.2.min.js"></script>

		<!-- 引入CSS文件 -->

        <link href="./public.css" rel="stylesheet" type="text/css" />

        <style type="text/css">

			*{padding:0;margin:0;font-family: "Microsoft YaHei","SimHei";list-style:none;font-size:12px;}

			html{font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}

			img{border: 0;}

			h1, h2, h3, h4, h5, h6{font-family: "Microsoft YaHei",SimHei;font-weight: normal;text-transform: ;}

			a{text-decoration:none;}

			.h2{width:100%;border:1px solid #CCC;line-height:30px;}

			.l,.r{width:30%;height:100px;border:1px solid #CCC;}

			.l{float:left;}

			.r{float:right;}

			.header{min-height:100px;}

			.body{min-height:600px;}

			.footer{min-height:100px;}

			.header,.body,.footer{border:1px solid #ABABAB;margin:10px auto;text-align:center;width:95%;}

			.clear{clear:both;}

			@media only screen and (min-width: 375px){

			@media only screen and (min-width: 768px){

			@media only screen and (min-width: 992px){

 		 		.header,.body,.footer{width:800px;}

			@media only screen and (min-width: 1200px){

			@media only screen and (min-width: 1440px){

        </style>

	</head>

	<body>

		<div class="header">

			<h2 class="h2">Header</h2>

			<div class="l"></div>

			<div class="r"></div>

			<div class="clear"></div>

		</div>

		<div class="body">

			<h2 class="h2">body</h2>

			<div class="l"></div>

			<div class="r"></div>

			<div class="clear"></div>

		</div>

		<div class="footer">

			<h2 class="h2">footer</h2>

			<div class="l"></div>

			<div class="r"></div>

			<div class="clear"></div>

		</div>

		<script type="text/javascript" src="./public.js"></script>

		<script type="text/javascript" src="./index.js"></script>

	</body>

</html>

以上的页面设计总体框架是我自己写的，如果有什么地方不足，请您给我指正，我会改改，这是一个纯HTML页面模板。

可以用于快速开发，快速写一个静态页面出来。

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶2

踩0