当前位置:首页 > 网站应用 > 正文内容

仿win10系统蓝屏的404页面

cjw1233个月前 (01-26)网站应用690
<!doctype html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>404页面</title>    
<style>    
/**全局样式*/    
body {    
	margin:0;    
	padding:0;    
	font-family:"微软雅黑";    
	font-size:14px;    
	color:#333;    
	background-color:#2068b4;    
}    
a {    
	text-decoration:none;    
	color:#fff;    
}    
a:hover {    
	text-decoration:underline;    
}    
img {    
	border:0;    
}    
text {    
	color:#fff;    
}    
p {    
	margin-block-start:0em;    
	margin-block-end:0em;    
	margin-inline-start:0px;    
	margin-inline-end:0px;    
}    
/**ul去除样式*/    
ul {    
	list-style:none;    
	margin-block-start:0em;    
	margin-block-end:0em;    
	margin-inline-start:0px;    
	margin-inline-end:0px;    
	padding-inline-start:0px;    
}    
/**ol去除样式*/    
ol {    
	list-style:none;    
	padding-inline-start:0px;    
}    
/**主要样式*/    
.main {    
	position:absolute;    
	display:flex;    
	flex-direction:column;    
	justify-content:center;    
	align-items:left;    
	height:100%;    
	margin-left:10%;    
	margin-right:10%;    
	color:#fff;    
	top:-100px;    
}    
.p1 {    
	font-size:150px;    
	/**font-weight:bold;    
	*/    
margin-top:50px;    
	margin-bottom:20px;    
}    
.p2 {    
	font-size:30px;    
	margin-bottom:15px;    
}    
.p3 {    
	font-size:25px;    
	margin-bottom:15px;    
}    
.p4 {    
	display:flex;    
	flex-direction:row;    
	justify-content:left;    
}    
.p5 {    
	font-size:25px;    
}    
.p6 {    
	margin-top:5px;    
	font-size:25px;    
}    
.x1 {    
	margin-right:20px;    
}    
</style>    
</head>    
<body>    
<div class="main">    
<p class="p1">:(</p>    
<p class="p2">404 您访问的页面不存在,请检查网页链接是否填写正确。</p>    
<p class="p3" id="p3">正在收集错误信息<span class="ds">0%</span></p>    
<br><br>    
<div class="p4">    
<img style="width: 137px; height: 137px; margin-right: 20px;" src="data:image/png;base64,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" alt="QRCODE">    
<div>    
<p class="p5">有关此问题的详细信息是:</p>    
<ul class="p6">    
<ol>1. 该页面已被管理员删除;</ol>    
<ol>2. 该页面已被管理员移动到其他位置;</ol>    
<ol>3. 该页面链接填写错误。</ol>    
</ul>    
</div>    
</div>    
</div>    
<script>    
var ds = document.querySelector('.ds');    
var timer = setInterval(function() {    
var num = ds.innerHTML;    
num = num.substring(0, num.length - 1);    
num = parseInt(num) + 1;    
ds.innerHTML = num + '%';    
if (num == 99) {    
clearInterval(timer);    
setTimeout(function () {    
       	document.getElementById("p3").innerHTML = "收集错误信息失败!";    
},1000);    
}    
}, 50);    
</script>    
</body>    
</html>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=67

分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

CSS中给背景图增加遮罩

CSS作为网页开发的重要组成部分,经常会用到遮罩层的效果,实现页面视觉上的突出和强调。那么,CSS怎样设置遮罩层呢?下面就来简单介绍一下。首先,要清楚遮罩层的定义。遮罩层是指在页面元素上添加一个半透明的罩子,使得页面元素之间的重叠效果。”遮”住页面上的元素。接下来,我们来看如何在CSS中实现遮罩层的...

js实现公告文字标题无缝向上滚动特效

<HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <TITLE>无间隙文字向上滚动特效...

js文字定时向上滚动特效代码

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

圆形浮动的导航菜单

<!doctype html>     <html>     <head>     <meta charset=...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。