仿win10蓝屏界面个性404页面

开发 · 2018-07-06 · 更新于 2020-06-26

代码非原创，而是网上找来然后做了少许修改。

### 效果图
![WX20180706-141222@2x.png](https://storage.liesauer.net/2018/07/2928728990.png)
[效果预览](http://www.liesauer.net/404 "效果预览")

### 代码
也可在上面的[预览页面](http://www.liesauer.net/404 "效果预览")直接右键查看源代码
```html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="Shortcut Icon" href="/favicon.ico">
 <title>Oops</title>
 <style type="text/css">
 body {
 background-color: #0099CC;
 color: #FFFFFF;
 font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
 margin-left: 100px;
 }
 .face {
 font-size: 100px;
 }
 p{
 font-size: 24px;
 padding: 8px;
 line-height: 40px;
 }
 .tips {
 font-size: 16px
 }
 a:link,a:visited {
 text-decoration:none; /*超链接无下划线*/
 }
 a {
 color: #87CEFA;
 }
 
 /*针对小屏幕的优化*/
 @media screen and (max-width: 600px) { 
 body{
 margin: 0 10px;
 }
 p{
 font-size: 18px;
 line-height: 30px;
 }
 .tips {
 display: inline-block;
 padding-top: 10px;
 font-size: 14px;
 line-height: 20px;
 }
 }
 </style>
</head>
<body>
 :(
 你访问的页面未找到。 
 我们不会收集任何错误信息，然后也不会为你重新启动。 
 如果你想了解更多信息，则可以稍后: <a href="mailto:admin@liesauer.net" target="_self">性感错误，在线反馈</a>
 
</body>
</html>
```