新建pc端页面的模板
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页面,这里须引入jquery,其版本建议越新越好 (ps:这里是最低兼容至ie9,若想兼容更低版本,可参考我其他随笔)
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"/> <title>检测IE浏览器版本是否过低</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <script type="text/javascript" src="jquery-1.11.0.js"></script> <script type="text/javascript"> /*判断浏览器版本是否过低*/ $(document).ready(function() { var b_name = navigator.appName; var b_version = navigator.appVersion; var version = b_version.split(";"); var trim_version = version[1].replace(/[ ]/g, ""); if(b_name == "Microsoft Internet Explorer") { /*如果是IE6或者IE7或者IE8*/ if(trim_version == "MSIE7.0" || trim_version == "MSIE6.0" || trim_version == "MSIE8.0") { alert("IE浏览器版本过低,请到指定网站去下载相关版本"); //然后跳到需要连接的下载网站 //window.location.href="http://jiaoxueyun.com/download.jsp"; } } }); </script> </head> <body> </body> </html>
好了,基本就是这样了。
ps:欢迎拍砖