首页 > 其他分享> 文章详细

一个简洁的404

2019-09-02 17:51:33 阅读：205 来源： 互联网

标签：box 简洁 4deg 一个 404 error font rotate page

效果如图:

代码如下:

<!DOCTYPE html>

<html>

<head>

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>

<h3>

<strong>404</strong>很抱歉，您要访问的页面不存在！

</h3>

<div>

<ol>

<li>网络信号差不稳定</li>

<li>找不到请求的页面</li>

<li>输入的网址不正确</li>

</ol>

</div>

<div>

<ol>

</ol>

</div>

</body>

</html>

标签：box,简洁,4deg,一个,404,error,font,rotate,page
来源： https://www.cnblogs.com/HGNET/p/11447913.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一个简洁的404