首页 > 其他 > 详细

新建pc端页面的模板

时间:2017-02-28 13:44:40      阅读:114      评论:0      收藏:0      [点我收藏+]

pc端页面,要做兼容。新建pc端模板时,先要初始化浏览器的样式,我命名为reset.css

@charset "utf-8";

/* 取消链接高亮  */
body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article, 
aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
/* 设置HTML5元素为块 */
article, aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section {display: block;}
/* 图片自适应 */
img {
max-width: 100%;
height: auto;
width:auto\9; /* ie8 */
-ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/
}
/* 初始化 */
body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article, 
aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{margin:0; padding:0; border:none;}
*{padding: 0;margin: 0;}
body{font-family: Microsoft YaHei,Tahoma,Arial,sans-serif; color:#525252; background-color:#fff;font-size: 18px;}
em,i{font-style:normal;}
strong{font-weight: normal;}
a{text-decoration:none; color:#676767; font-family: Microsoft YaHei,Tahoma,Arial,sans-serif;}
ul,ol{list-style:none;}
h1, h2, h3, h4, h5, h6{ font-size:100%; font-family: Microsoft YaHei,Tahoma,Arial,sans-serif;;}
img{ border:none; display:block;/*img底部空白*/}
textarea{ resize:none;}
input,area{ outline:none;border:0 none; font-family:  Microsoft YaHei,Tahoma,Arial,sans-serif;}/* 谷歌浏览器表单元素外框 */
table{border-collapse: collapse;}/*table的重叠边框合并*/

  然后新建html页面

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>

	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<![endif]-->
	<!--[if lte IE 8]> 
		<noscript>
  			<style>.html5-wrappers{display:none!important;}</style>
   			<div class="ie-noscript-warning">
   				您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
   			</div>
		</noscript>
	<![endif]-->
</head>
<body>
	<header></header>
	<footer></footer>
</body>
</html>

  好了,基本就是这样了。

 

新建pc端页面的模板

原文:http://www.cnblogs.com/qqing/p/6478205.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!