zoukankan      html  css  js  c++  java
  • 新建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- 100%;
    height: auto;
    auto9; /* 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:欢迎拍砖

  • 相关阅读:
    移动性能测试 | 持续集成中的 Android 稳定性测试
    iOS 测试 | iOS 自动化性能采集
    Google 测试总监聊如何经营成功的测试职业生涯
    浅谈一下可扩展性网站架构设计
    一条SQL执行慢的原因有哪些
    为什么在做微服务设计的时候需要DDD?
    是时候拥抱.NET CORE了
    MySql多表查询优化
    九种高性能可用高并发的技术架构
    HTTP协议总结
  • 原文地址:https://www.cnblogs.com/qqing/p/6478205.html
Copyright © 2011-2022 走看看