一款跳转警告HTML单页模板,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
代码如下
DOCTYPE html>
<html>
<head>
<title>Warning!title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
* {
box-sizing: border-box;
}
body {
background: #F4696A;
margin: 0;
}
body div {
position: absolute;
top: calc(50% - 207px);
width: 100%;
}
body div i {
font-style: normal;
width: 200px;
height: 200px;
line-height: 200px;
border-radius: 100%;
display: block;
margin: 0 auto;
background: #fff;
text-align: center;
color: #F4696A;
font-size: 6em;
font-family: "Microsoft YaHei";
}
body div p,
body div h2 {
color: #fff;
text-align: center;
margin: 0;
margin-top: 20px;
}
body div blockquote {
background: #fff;
text-align: center;
max-width: 352px;
margin: 0 auto;
margin-top: 20px;
border-radius: 6px;
padding: 10px;
overflow-y: auto;
color: #5a5f69;
}
body div blockquote::-webkit-scrollbar {
width: 6px;
height: 6px;
}
body div blockquote::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #888;
}
body div a,
body div a:hover,
body div a:focus {
transition: all .35s;
width: 100px;
display: block;
color: #fff;
margin: 0 auto;
margin-top: 20px;
text-decoration: none;
outline: none;
border: 1px solid #fff;
border-radius: 6px;
text-align: center;
line-height: 33px;
}
body div a:hover {
background: rgba(255, 255, 255, .2);
}
style>
head>
<body>
<div>
<i>!i>
<h2>警告h2>
<p>小伙子，前面的路很危险，你确定要继续向前吗？p>
<blockquote>https://www.qqmu.com/blockquote>
<a href="https://www.qqmu.com/">继续深♂入a>
div>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103