index.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <link rel="icon" href="../favicon.ico" />
  6. <title>抱歉,无法兼容您的IE浏览器</title>
  7. </head>
  8. <body>
  9. <div class="header">
  10. <h2>我们不支持 IE 浏览器</h2>
  11. <h3>It appears you’re using an unsupported browser</h3>
  12. </div>
  13. <div class="content">
  14. <p>
  15. 为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等。
  16. 如果您使用的是360浏览器或搜狗浏览器等,请关闭兼容模式,选择极速模式。
  17. </p>
  18. <div class="logos">
  19. <div class="img_box">
  20. <img src="./images/logo_chrome.png" alt="chrome" />
  21. <!-- <a href="">点击下载</a> -->
  22. </div>
  23. <div class="img_box">
  24. <img src="./images/logo_firefox.png" alt="firefox" />
  25. <!-- <a href="">点击下载</a> -->
  26. </div>
  27. <div class="img_box">
  28. <img src="./images/logo_ie.png" alt="ie" />
  29. <!-- <a href="">点击下载</a> -->
  30. </div>
  31. </div>
  32. </div>
  33. </body>
  34. <style type="text/css">
  35. body {
  36. color: #666;
  37. text-align: center;
  38. font-family: Helvetica, "microsoft yahei", Arial, sans-serif;
  39. margin: 0;
  40. width: 800px;
  41. margin: auto;
  42. font-size: 14px;
  43. }
  44. h1 {
  45. font-size: 56px;
  46. line-height: 100px;
  47. font-weight: normal;
  48. color: #456;
  49. }
  50. h2 {
  51. font-size: 24px;
  52. color: #666;
  53. line-height: 1.5em;
  54. }
  55. h3 {
  56. color: #456;
  57. font-size: 20px;
  58. font-weight: normal;
  59. line-height: 28px;
  60. margin: 15px 0;
  61. }
  62. hr {
  63. margin: 18px 0;
  64. border: 0;
  65. border-top: 1px solid #eee;
  66. border-bottom: 1px solid white;
  67. }
  68. a {
  69. color: #17bc9b;
  70. text-decoration: none;
  71. }
  72. </style>
  73. <style type="text/css">
  74. body {
  75. width: 560px;
  76. background: #fafafa;
  77. }
  78. .header {
  79. margin: 150px auto 24px;
  80. }
  81. .logo {
  82. width: 64px;
  83. height: 64px;
  84. border-radius: 50%;
  85. }
  86. h2 {
  87. margin: 24px 0 4px;
  88. color: #4a4a4a;
  89. font-size: 28px;
  90. font-weight: 500;
  91. }
  92. h3 {
  93. margin: 0;
  94. color: #9b9b9b;
  95. }
  96. .content {
  97. border: 1px solid rgba(0, 0, 0, 0.1);
  98. -webkit-border-radius: 4px;
  99. -ms-border-radius: 4px;
  100. -moz-border-radius: 4px;
  101. border-radius: 4px;
  102. -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  103. -ms-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  104. -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  105. -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  106. box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  107. }
  108. .content p {
  109. margin: 22px 20px 20px;
  110. color: #6d6d6d;
  111. font-size: 14px;
  112. line-height: 22px;
  113. text-align: left;
  114. }
  115. .content .logos {
  116. margin-bottom: 30px;
  117. }
  118. .content .logos .img_box {
  119. display: inline-block;
  120. }
  121. .content .logos .img_box img {
  122. display: block;
  123. width: 80px;
  124. height: 80px;
  125. margin: 0 50px;
  126. }
  127. .content .logos .img_box a {
  128. color: #6d6d6d;
  129. font-size: 14px;
  130. cursor: pointer;
  131. margin: 10px 0;
  132. display: block;
  133. text-decoration: underline;
  134. outline: 0;
  135. }
  136. .content .logos .img_box a:hover {
  137. color: #66b1ff;
  138. }
  139. </style>
  140. </html>