超级简洁大方的网站404页面HTML模板 - 慕轲博客-建立自己的个人自媒体博客

心情碎语:等雨停的时候往往雨不会停,等人来的时候往往人不会来。

您的位置:慕轲博客 >建站心得> 超级简洁大方的网站404页面HTML模板

超级简洁大方的网站404页面HTML模板

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

170321_404.png

具体实现方法

只需要替换以下代码中的 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="http://www.amuker.com">返回首页</a></li>
                        <li><a href="http://www.amuker.com/say.html">留言反馈</a></li>
                        <li><a href="http://www.amuker.com/links.html">提交友情链接</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


具体效果请点击:好看的网站 404 页面

---

转载请注明本文标题和链接:《超级简洁大方的网站404页面HTML模板

发表评论

28 + 23 =
路人甲 表情
Ctrl+Enter快速提交

网友评论(5)

很不错,谢谢分享了
北彩论坛 2年前 (2017-07-26) 回复
很漂亮的404页面,收藏了
面试技巧 3年前 (2017-04-10) 回复
很棒啊
捕鱼游戏 3年前 (2017-04-07) 回复
很不错,谢谢分享了
战略 3年前 (2017-04-07) 回复
@战略:感谢来访
amuke123 3年前 (2017-04-07) 回复