admin

单文件纯html css写的一个404/502页面
收集几个单文件纯html的代码
扫描右侧二维码阅读全文
18
2017/08

单文件纯html css写的一个404/502页面

收集几个单文件纯html的代码

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>index</title>
<style>
@charset "utf-8";
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); font-size:14px!important; color:#fff!important;}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.keTitle{ height: 60px; line-height: 60px; font-size: 28px; font-family: '微软雅黑'; color: #444; text-align: center; background: url(../images/bodyBg1.gif) repeat-x left bottom; font-weight: normal; position: fixed; width: 100%; left: 0; top: 0; z-index: 999; padding: 0px 0px 8px; opacity:0.8; }
.keBottom{ color: #444; height: 60px; text-align: center; background: url(../images/bodyBg2.gif) repeat-x left top; position: fixed; width: 100%; left: 0; bottom: 0; z-index: 999; font: 18px/60px "微软雅黑"; padding: 3px 0px 5px;opacity:0.8; }
.keBottom a,.keBottom a:hover{color:#444;}
body {
background-color: #ECECEC;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #3c3c3c;
}

.demo p:first-child {
text-align: center;
font-family: cursive;
font-size: 150px;
font-weight: bold;
line-height: 100px;
letter-spacing: 5px;
color: #fff;
}

.demo p:first-child span {
cursor: pointer;
text-shadow: 0px 0px 2px #686868,

0px 1px 1px #ddd,
0px 2px 1px #d6d6d6,
0px 3px 1px #ccc,
0px 4px 1px #c5c5c5,
0px 5px 1px #c1c1c1,
0px 6px 1px #bbb,
0px 7px 1px #777,
0px 8px 3px rgba(100, 100, 100, 0.4),
0px 9px 5px rgba(100, 100, 100, 0.1),
0px 10px 7px rgba(100, 100, 100, 0.15),
0px 11px 9px rgba(100, 100, 100, 0.2),
0px 12px 11px rgba(100, 100, 100, 0.25),
0px 13px 15px rgba(100, 100, 100, 0.3);

-webkit-transition: all .1s linear;
transition: all .1s linear;
}

.demo p:first-child span:hover {
text-shadow: 0px 0px 2px #686868,

0px 1px 1px #fff,
0px 2px 1px #fff,
0px 3px 1px #fff,
0px 4px 1px #fff,
0px 5px 1px #fff,
0px 6px 1px #fff,
0px 7px 1px #777,
0px 8px 3px #fff,
0px 9px 5px #fff,
0px 10px 7px #fff,
0px 11px 9px #fff,
0px 12px 11px #fff,
0px 13px 15px #fff;

-webkit-transition: all .1s linear;
transition: all .1s linear;
}

.demo p:not(:first-child) {
text-align: center;
color: #666;
font-family: cursive;
font-size: 20px;
text-shadow: 0 1px 0 #fff;
letter-spacing: 1px;
line-height: 2em;
margin-top: -50px;
}

</style>
</head>
<body>
<h1 class="keTitle">访问的站点不存在</h1>
<!--效果html开始-->
<div class="demo">

<p align="center"><span>4</span><span>0</span><span>4</span></p>
<p align="center">该页面不存在(´・ω・`)</p>

</div>
<!--效果html结束-->
<div class="keBottom"> 基于Vultr,by leiyanhui.com
</div>
</body>
</html>

Last modification:October 16th, 2018 at 03:01 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

captcha
请输入验证码