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

最新推荐文章于 2024-05-24 16:55:01 发布

kingwebo'sZone

最新推荐文章于 2024-05-24 16:55:01 发布

阅读量4.5w

点赞数 1

分类专栏： Html

原文链接：https://www.daixiaorui.com/read/114.html

版权

Html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

推荐一个简单而又漂亮的网站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的路径即可。

kingwebo'sZone

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
一个简单而又漂亮的404页面源码

推荐一个简单而又漂亮的网站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-eq
复制链接

扫一扫