一款跳转警告HTML单页模板

简介: 一款跳转警告HTML单页模板

tiaozhuan_warning.png

一款跳转警告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>
相关文章
|
20天前
|
Java
有关Java发送邮件信息(支持附件、html文件模板发送)
有关Java发送邮件信息(支持附件、html文件模板发送)
23 1
|
1月前
分享82个Html经典模板,总有一款适合您
分享82个Html经典模板,总有一款适合您
19 0
|
1月前
|
前端开发 安全
分享81个Html经典模板,总有一款适合您
分享81个Html经典模板,总有一款适合您
16 2
|
1月前
|
数据可视化
分享78个Html杂七杂八模板,总有一款适合您
分享78个Html杂七杂八模板,总有一款适合您
19 3
|
1月前
分享84个Html经典模板,总有一款适合您
分享84个Html经典模板,总有一款适合您
14 0
|
1月前
|
iOS开发
分享83个Html经典模板,总有一款适合您
分享83个Html经典模板,总有一款适合您
41 7
|
1月前
分享80个Html经典模板,总有一款适合您
分享80个Html经典模板,总有一款适合您
10 0
|
1月前
|
存储 安全
分享69个Html杂七杂八模板,总有一款适合您
分享69个Html杂七杂八模板,总有一款适合您
18 1
|
1月前
|
存储 数据挖掘
分享68个Html杂七杂八模板,总有一款适合您
分享68个Html杂七杂八模板,总有一款适合您
15 1
|
1月前
|
数据管理 数据挖掘 iOS开发
分享67个Html杂七杂八模板,总有一款适合您
分享67个Html杂七杂八模板,总有一款适合您
19 6