现在的位置: 首页 -> 前端学习 -> JS前端 -> 一个简单而又漂亮的404页面源码

一个简单而又漂亮的404页面源码

2014-08-26 19:48评论数 2 ⁄ 被浏览 20682 views+

推荐一个简单而又漂亮的网站404页面,也是我网站用的。


页面的风格效果:


网站404页面


源码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>404-对不起!您访问的页面不存在</title>

<style type="text/css">

.head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/head404.png) no-repeat; }

.txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/txtbg404.png) no-repeat;}

.txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}

.txtbg404 .txtbox p {margin:5px 0; line-height:18px;}

.txtbg404 .txtbox .paddingbox { padding-top:15px;}

.txtbg404 .txtbox p a { color:#eee; text-decoration:none;}

.txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}

</style>

</head>


<body bgcolor="#494949">

    <div class="head404"></div>

    <div class="txtbg404">

  <div class="txtbox">

      <p>对不起,您请求的页面不存在、或已被删除、或暂时不可用</p>

      <p class="paddingbox">请点击以下链接继续浏览网页</p>

      <p>》<a style="cursor:pointer" onclick="history.back()">返回上一页面</a></p>

      <p>》<a href="https://www.daixiaorui.com">返回网站首页</a></p>

    </div>

  </div>

</body>

</html>


复制以上源码,保存到本地为html,就可以看效果了。为了保持好的访问效果,建议下载 head404.png和txtbg404.png 这两张图片到本地,再改一下css里面对应background的路径即可。

 

文章出自:https://www.daixiaorui.com/read/114.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 2 条评论  @我要评论

  1. 2楼何恺说 : 2019-07-28 03:11:09 评论说: @回复

    为什么自己用的时候,返回上一页功能会失效呢,php站点

  2. 1楼何恺说 : 2019-07-20 00:30:49 评论说: @回复

    真棒 我要设置为自己站点的404页面

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *