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>
好了,基本就是这样了。
原文:http://www.cnblogs.com/qqing/p/6478205.html