两个简洁的页面：404和Loading

2019独角兽企业重金招聘Python工程师标准>>>

(1)404页面

在学习Nginx时，访问错误URL时，跳转到nginx自带的404页面，发现太简单了一丢丢。于是，找到了下面的这个很简洁的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>Demo</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="http://www.rumoss.cn">返回首页</a></li><li><a href="#">留言反馈</a></li><li><a href="#">联系站长</a></li></ol></div></div></div></div></div>
</body>
</html>

(2)Loading页面：

在项目中，有一个加载过程，想提供一个给用户感觉比较好的方式展示，而不是一片空白，于是找到一个比较好的Demo，并应用到了项目中：

html:

<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" c>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"><table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"><tr><form name=loading><td align=center><p><font color=gray>正在加速跳转,请稍候...</font></p><p><input type=text name=chart size=46style="font-family: Arial; font-weight: bolder; color: gray; background-color: white; padding: 0px; border-style: none;"><br> <input type=text name=percent size=46style="font-family: Arial; color: gray; text-align: center; border-width: medium; border-style: none;"><script>var bar = 0var line = "||"var amount = "||"count()function count() {bar = bar + 2amount = amount + linedocument.loading.chart.value = amountdocument.loading.percent.value = bar + "%"if (bar < 99) {setTimeout("count()", 100);} else {window.location = "http://www.rumoss.cn/";}}</script></p></td></form></tr></table>
</body>
</html>

每天进步一点点。

转载于:https://my.oschina.net/javamaster/blog/1584763

两个简洁的页面：404和Loading相关推荐

react-router browserHistory刷新页面404问题解决
2019独角兽企业重金招聘Python工程师标准>>> 使用React开发新项目时,遇见了刷新页面,直接访问二级或三级路由时,访问失败,出现404或资源加载异常的情况,本篇针对此问题 ...
页面404？找不到页面咋整？
解决页面404 ----------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:2019年6 ...
关于vue-admin-element在切换角色登入后权限不足致使页面404
这几天在用vue-element-admin撸后台,发现一个问题,在一个用户登出后如果他停留在只有他的权限可以使用的页面,另一个权限稍低的用户登入后因为会默认转到之前的页面因为权限不足导致页面404, ...
freemarker模板引擎,页面404,没有任何错误信息提示
一.问题描述 freemarker模板引擎,页面404,没有任何错误信息提示,如下图所示,404首先排除页面是否存在,这个肯定是存在的,在一个排除下路径是否写错了,这个也没有问题,前面都能访问好好的, ...
如何使得按确定和取消按纽转到两个不同的页面！
问: 如何使得按确定和取消按纽转到两个不同的页面! confirm(),后面的具体参数是什么? ____________________________________________________ ...
joomla3.6.5 nginx下前台页面404错误
正常安装 joomla3.6.5后后台可以打开前台页面404 百度后发现是没有配置 nginx的伪静态规则 joomla官方提供了配置文件地址:http://docs.joomla.org/N ...
vue 打包html静态页面,Vue.js打包部署到服务器路径资源和页面404
默认根目录路径在我们开发完vue项目后进行代码执行npm run build命令后,默认index文件引用静态资源路径是在/static下的,如下图: 更改根目录路径找到build/config/ ...
记录kylin成功启动，访问页面404问题
⚠️报错: kylin成功启动,访问页面404 查看/opt/module/kylin/logs目录下kylin.log,报以下错误: Failed to find metadata store by ...
【字节网盘】九款超好看不同页面404源码
九款不同页面404源码每款样式都超好看 9个源码做404页面是非常好看的,右键记事本打开即可修改! 下载地址: http://www.bytepan.com/JSOe1qAMSvL
h5 uniapp history模式下刷新页面404
h5 uniapp history模式下刷新页面404 问题:uniapp 的history 把#去掉了,但是当刷新页面的时候出现404 解决方案需要服务端支持如果 URL 匹配不到任何静态资源, ...

两个简洁的页面：404和Loading

(1)404页面

(2)Loading页面：

两个简洁的页面：404和Loading相关推荐

最新文章

热门文章