马富天PHP博客

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

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

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

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<!-- 网页标题 -->
  5. 		<title>完整的HTML5页面的模板-自适应页面</title>
  6. 		<!-- 设置页面编码 -->
  7. 		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8. 		<!-- 页面关键字,用逗号隔开 -->
  9. 		<meta name="keywords" content="个人博客,博客网站,个人笔记,美文欣赏" />
  10. 		<!-- 网页描述,介绍网页的主要内容 -->
  11. 		<meta name="description" itemprop="description" content="学习笔记,人生感悟!" />
  12. 		<!-- 作者 -->
  13. 		<meta name="author" content="马富天" />
  14. 		<!-- 适配当前屏幕 -->
  15. 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  16. 		<!--禁止自动识别电话号码-->
  17. 	    <meta name="format-detection" content="telephone=no" />
  18. 	    <!--禁止自动识别邮箱-->
  19. 	    <meta content="email=no" name="format-detection" />		
  20. 		<!-- 网站头像 -->
  21. 		<link rel="shortcut icon" href="/favicon.ico" />		
  22. 		<!-- 引入jquery文件 -->
  23. 		<script src="./jquery-1.8.2.min.js"></script>
  24. 		<!-- 引入CSS文件 -->
  25.         <link href="./public.css" rel="stylesheet" type="text/css" />       
  26.         <style type="text/css">
  27. 			*{padding:0;margin:0;font-family: "Microsoft YaHei","SimHei";list-style:none;font-size:12px;}
  28. 			html{font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
  29. 			img{border: 0;}
  30. 			h1, h2, h3, h4, h5, h6{font-family: "Microsoft YaHei",SimHei;font-weight: normal;text-transform: ;}
  31. 			a{text-decoration:none;}
  32. 			
  33. 			.h2{width:100%;border:1px solid #CCC;line-height:30px;}
  34. 			.l,.r{width:30%;height:100px;border:1px solid #CCC;}
  35. 			.l{float:left;}
  36. 			.r{float:right;}
  37. 			.header{min-height:100px;}
  38. 			.body{min-height:600px;}
  39. 			.footer{min-height:100px;}
  40. 			.header,.body,.footer{border:1px solid #ABABAB;margin:10px auto;text-align:center;width:95%;}
  41. 			.clear{clear:both;}
  42. 			@media only screen and (min-width: 375px){
  43.  		 			
  44. 			}
  45. 			@media only screen and (min-width: 768px){
  46.  		 			
  47. 			}
  48. 			@media only screen and (min-width: 992px){
  49.  		 		.header,.body,.footer{width:800px;}
  50. 			}
  51. 			@media only screen and (min-width: 1200px){
  52.  		 		
  53. 			}
  54. 			@media only screen and (min-width: 1440px){
  55.  		 			
  56. 			}
  57.         </style>
  58. 	</head>
  59. 	<body>
  60. 		<div class="header">
  61. 			<h2 class="h2">Header</h2>
  62. 			<div class="l"></div>
  63. 			<div class="r"></div>
  64. 			<div class="clear"></div>
  65. 		</div>
  66. 		<div class="body">
  67. 			<h2 class="h2">body</h2>
  68. 			<div class="l"></div>
  69. 			<div class="r"></div>
  70. 			<div class="clear"></div>			
  71. 		</div>
  72. 		<div class="footer">
  73. 			<h2 class="h2">footer</h2>
  74. 			<div class="l"></div>
  75. 			<div class="r"></div>
  76. 			<div class="clear"></div>			
  77. 		</div>		
  78. 		<script type="text/javascript" src="./public.js"></script>
  79. 		<script type="text/javascript" src="./index.js"></script>
  80. 	</body>
  81. </html>

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

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

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《完整的HTML5页面的模板-自适应页面》

本文链接地址:http://www.mafutian.net/72.html

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

2

0

上一篇《 PHP如何将数据存到CSV文件中,并读取CSV文件中的数据 》 下一篇《 PHP使用递归实现无限分类 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码