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

  • 时间:
  • 浏览:275
  • 来源:无双科技

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


具体实现方法

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

<!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.wswlyx.com/">返回首页</a></li>

                        <li><a href="https://www.wswlyx.com/wangzhankafazhizuo/">网站建设</a></li>

                        <li><a href="https://www.wswlyx.com/wangzhanweihushengji/">系统升级维护</a></li>

                    </ol>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>



猜你喜欢

深圳网站建设新站上线前的准备及友情链接交换购买的技巧

你的站是新站,考核期还没有过,所以百度不会给你好的排名,即使现在买了高权重的外链,起到的作用仍然不大。建议你过了新手期之后再买高权重的友链,如果买的时间长那就算了。1、准备几百

2019-01-24

新站上线前的准备友情链接交换购买的技巧SEO优化

深圳网站建设中的企业网站建设核心重点

   1.主题​网站应有一个核心焦点,最失败的站点所具有的首个特性便是没有自己的焦点,也便是没有主题。假如站点没有自己的焦点主题,此中就会充满着很

2019-01-22

企业网站建设核心的核心重点深圳网站建设

【家居行业】深圳网站建设用案例来告诉你!

案例分享:这个网站主要是做一些家具以及家具设计的网站,接下来小编就用这个例子来告诉大家应如何设计“家居行业”网站。1、网站首页的banner图是我们的设计师根据企业的相关业务进

2019-01-14

龙华网站制作深圳网站建设家居行业网站案例行业建站分析

深圳网站建设如何判断公司网站代码是否符合优化的标准

在网站制作中,更符合Web2.0标准的网页无外乎DIV+CSS布局方式了。事实上,网站制作无外乎四个主页面,首页、频道页、栏目页、文章页。下面结合HTML实例为你逐一解析:如何

2019-01-06

符合优化标准的网站代码营销型网站建设深圳网站建设