一款跳转警告HTML单页模板,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
代码如下
<!DOCTYPE html>
<html>
<!--QQ沐编程 www.qqmu.com 学习QQ群:290987565 域名抢注 33210.jm.cn -->
<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>