页面简洁、设计美观的404错误页面代码

发布时间：2018-08-18 07:17:26 所属栏目：交互来源：站长网

导读：收集了一个页面简洁、设计美观的404错误页面代码给大家，在这个页面上只有一张图片，页面整体结构设计的不错，非常简洁，我喜欢的风格，希望大家也喜欢哦。演示代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR

　　收集了一个页面简洁、设计美观的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=gb2312" /> <title>您找的页面不存在</title> <style type="text/css"> <!-- BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 35px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 12px Arial, Helvetica, sans-serif; COLOR: #333; PADDING-TOP: 35px} A {COLOR: #007ab7; TEXT-DECORATION: none} A:hover {COLOR: #007ab7; TEXT-DECORATION: none} A:hover {COLOR: #de1d6a} .hidehr {DISPLAY: none} .show12 {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; PADDING-TOP: 0px} .show13 {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; PADDING-TOP: 0px} .show12 A { BORDER-RIGHT: #bfdeed 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #bfdeed 1px solid; DISPLAY: inline-block; PADDING-LEFT: 6px; BACKGROUND: #d8ebf4; PADDING-BOTTOM: 2px; OVERFLOW: hidden; BORDER-LEFT: #bfdeed 1px solid; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BORDER-BOTTOM: #bfdeed 1px solid; HEIGHT: 16px} .show13 A { BORDER-RIGHT: #bfdeed 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #bfdeed 1px solid; DISPLAY: inline-block; PADDING-LEFT: 6px; BACKGROUND: #d8ebf4; PADDING-BOTTOM: 2px; OVERFLOW: hidden; BORDER-LEFT: #bfdeed 1px solid; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BORDER-BOTTOM: #bfdeed 1px solid; HEIGHT: 16px} .show12 A:hover {BORDER-RIGHT: #ea5e96 1px solid; BORDER-TOP: #ea5e96 1px solid; BACKGROUND: #fce8f0; BORDER-LEFT: #ea5e96 1px solid; COLOR: #de1d6a; BORDER-BOTTOM: #ea5e96 1px solid; TEXT-DECORATION: none} .show13 A:hover {BORDER-RIGHT: #ea5e96 1px solid; BORDER-TOP: #ea5e96 1px solid; BACKGROUND: #fce8f0; BORDER-LEFT: #ea5e96 1px solid; COLOR: #de1d6a; BORDER-BOTTOM: #ea5e96 1px solid; TEXT-DECORATION: none} .show12 A { FONT-WEIGHT: normal; FONT-SIZE: 12px} .show13 A { BORDER-RIGHT: #ed268c 1px solid; BORDER-TOP: #ed268c 1px solid; BACKGROUND: #dd137b; BORDER-LEFT: #ed268c 1px solid; COLOR: #fff; BORDER-BOTTOM: #ed268c 1px solid} .img404 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/uploads/allimg/1105/404dat.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 80px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 90px} H2 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 16px; FLOAT: left; PADDING-BOTTOM: 25px; MARGIN: 0px; WIDTH: 80%; LINE-HEIGHT: 0; PADDING-TOP: 25px; BORDER-BOTTOM: #ccc 1px solid; POSITION: relative} H3.wearesorry {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 10px; LEFT: 117px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #ccc; LINE-HEIGHT: 10px; PADDING-TOP: 0px; POSITION: absolute; TOP: 70px} .content {CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; LEFT: 80px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 80%; LINE-HEIGHT: 19px; PADDING-TOP: 0px; POSITION: relative; TOP: -30px} .content UL {PADDING-RIGHT: 35px; PADDING-LEFT: 35px; PADDING-BOTTOM: 20px; MARGIN: 0px; PADDING-TOP: 10px} .show12 UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 20px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none} .show14 UL LI {MARGIN-BOTTOM: 5px} /* 资源来自：烈火下载 http://www.veryhuo.com/down */ </style> </head> <body> <H1 class=hidehr>当前页不存在，或你输入的网址不正确，我们会原谅您的手下之误！</H1> <DIV class=img404></DIV> <H2>抱歉，找不到您要的页面……</H2> <H3 class=wearesorry>We're sorry but the page your are looking for is Not Found...</H3> <DIV class=content>仔细找过啦，没有发现你要找的页面。最可能的原因是： <UL> <LI>在地址中可能存在键入错误。 <LI>当你点击某个链接时，它可能已过期。 </LI></UL> <STRONG>点击以下链接继续浏览其它内容</STRONG>（<a href="http://www.baidu.com/" target="_blank">http://www.baidu.com/</a>）： <DIV class=show14> <UL> <LI><A title=返回首页 href="http://www.veryhuo.com/">返回烈火学院首页</A> <LI><A title=返回上一页 href="javascript:history.back(-1)">返回上一页</A></LI> </UL></DIV> 要不，我们去<A href="http://bbs.liehuo.net/" target=_blank>论坛</A>看看吧…… </DIV> <SPAN style="VISIBILITY: hidden"></SPAN> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!