分享一款超级简洁大方的网站404页面HTML模板

一个好看的网站 404 页面可以有效提高用户体验，而且为了防止被有心人利用 404 页面来攻击我们的站点，我们很有必要把 404 页面做得更简洁小巧一些，所以今天就跟大家分享一款兼顾美观大方和安全小巧的 404 页面 HTML 模板，希望大家喜欢。

分享一款超级简洁大方的网站404页面HTML模板 - 第1张 - 懿古今(www.yigujin.cn)

具体实现方法

只需要替换以下代码中的 title 和相关链接地址，然后将这些代码替换我们主题的 404.php 文件代码即可。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>404错误页面不存在_懿古今</title>
<style type="text/css">
body,div,h3,h4,li,ol{margin:0;padding:0}
body{font:14px/1.5 'Microsoft YaHei','微软雅黑',Helvetica,Sans-serif;min-width:1200px;background:#f0f1f3;}
:focus{outline:0}
h3,h4,strong{font-weight:700}
a{color:#428bca;text-decoration:none}
a:hover{text-decoration:underline}
.error-page{background:#f0f1f3;padding:80px 0 180px}
.error-page-container{position:relative;z-index:1}
.error-page-main{position:relative;background:#f9f9f9;margin:0 auto;width:617px;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:50px 50px 70px}
.error-page-main:before{content:'';display:block;background:url(img/errorPageBorder.png?1427783409637);height:7px;position:absolute;top:-7px;width:100%;left:0}
.error-page-main h3{font-size:24px;font-weight:400;border-bottom:1px solid #d0d0d0}
.error-page-main h3 strong{font-size:54px;font-weight:400;margin-right:20px}
.error-page-main h4{font-size:20px;font-weight:400;color:#333}
.error-page-actions{font-size:0;z-index:100}
.error-page-actions div{font-size:14px;display:inline-block;padding:30px 0 0 10px;width:50%;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#838383}
.error-page-actions ol{list-style:decimal;padding-left:20px}
.error-page-actions li{line-height:2.5em}
.error-page-actions:before{content:'';display:block;position:absolute;z-index:-1;bottom:17px;left:50px;width:200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(-4deg);-webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);-o-transform:rotate(-4deg);transform:rotate(-4deg)}
.error-page-actions:after{content:'';display:block;position:absolute;z-index:-1;bottom:17px;right:50px;width:200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(4deg);-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);-o-transform:rotate(4deg);transform:rotate(4deg)}
</style>
</head>
<body>
<div class="error-page">
<div class="error-page-container">
<div class="error-page-main">
<h3>
<strong>404</strong>很抱歉，您要访问的页面不存在！
</h3>
<div class="error-page-actions">
<div>
<h4>可能原因：</h4>
<ol>
<li>网络信号差不稳定</li>
<li>找不到请求的页面</li>
<li>输入的网址不正确</li>
</ol>
</div>
<div>
<h4>可以尝试：</h4>
<ol>
<li><a href="https://www.yigujin.cn/">返回首页</a></li>
<li><a href="https://www.yigujin.cn/2017lyb/">留言反馈</a></li>
<li><a href="https://boke112.com/">联系站长</a></li>
</ol>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

具体效果请点击：404页面传送门

你可能感兴趣的文章

发表评论取消回复

热腾网 @回复
发表于2017-03-21 23:02 沙发

我都将设置的404自动跳转首页。
- 懿古今2017-03-22 09:03 回复
  
  @热腾网有人说跳转回首页对SEO不好，测试百度的404页也是不跳转的

闲鱼 @回复
发表于2017-03-21 23:17 板凳

确实比较简单，看着也蛮舒服的
- 懿古今2017-03-22 09:02 回复
  
  @闲鱼[呲牙] 看着舒服，而且文件才不到4KB，所以感觉挺好的

Koolight @回复
发表于2017-03-22 07:07 地板

这个很不错啊！
- 懿古今2017-03-22 09:02 回复
  
  @Koolight[呲牙] 比我原先用的好多了，而且简洁小巧很多

大仁博客 @回复
发表于2017-03-22 08:25 4楼

虽然简洁，但是还挺好看的哈。。 [赞] （我就喜欢简约不简单的）
- 懿古今2017-03-22 09:01 回复
  
  @大仁博客[呲牙] 关键才4K不到，而且看起来还不错，所以我已经换上了

瑾瑜 @回复
发表于2017-03-22 09:23 5楼

网络信号差不会导致404吧……
- 懿古今2017-03-22 11:12 回复
  
  @瑾瑜[偷笑] 这个只是列举几个原因，不用在意这个字眼的，可以自己DIY的

life in faw @回复
发表于2017-03-22 10:02 6楼

博主的技术好。
- 懿古今2017-03-22 11:11 回复
  
  @life in faw[呲牙] 这个是来自网络的，不是我原创的

神马电影网 @回复
发表于2017-03-22 15:13 7楼

不错很漂亮的404
- 懿古今2017-03-23 08:34 回复
  
  @神马电影网[呲牙] 个人感觉这个比较简洁小巧，随便刷404页面都无所谓

姜辰 @回复
发表于2017-03-23 00:29 8楼

给力~~比我梦幻辰风的404好多了
- 懿古今2017-03-23 08:28 回复
  
  @姜辰[赞] 刚才试了贵站的404，很强大
  - 橘子书2017-03-23 11:00 回复
    
    @懿古今[偷笑] 确实很强大，不过感觉加载的东西应该不少。
    - 姜辰2017-03-23 21:51 回复
      
      @橘子书就一个页面，十几kb而已
    - 懿古今2017-03-23 22:00 回复
      
      @姜辰[呲牙] 我现在用的比较简单，就4kb，有一个更简单，只有2kb。

橘子书 @回复
发表于2017-03-23 01:50 9楼

我的404就只是一个大大的404！！文字。
不过这阶段在优化的时候，顺手改为小了404的文字大小。显得更精炼。
- 懿古今2017-03-23 08:27 回复
  
  @橘子书[奋斗] 以前我的404就搞的比较复杂一点，现在感觉简洁的404更好
  - 橘子书2017-03-23 11:01 回复
    
    @懿古今[偷笑] 简洁点好，现在的网站逐渐趋于直观化，过于花俏，容易视觉疲劳。
    - 懿古今2017-03-23 14:01 回复
      
      @橘子书是的，感觉只有文字和CSS代码的是最好的

雷韵仪器 @回复
发表于2017-04-06 15:24 10楼

页面不错！！！！

具体实现方法

你可能感兴趣的文章

发表评论 取消回复

发表评论取消回复