好看的HTML跳转网页面，小千个人觉得，像CSDN的跳转页就做得不错。虽然说，现在大家都在吐槽CSDN社区，毫无新意、毫无亮点、啥都付费、专坑新人，欺负电脑小白，还全互联网搬运，但是，吐槽CSDN网站，与CSDN网站页面特效无关，这个既简单、又漂亮的跳转页，当真是值得收藏和分享的。废话少说，直接上代码。
教程开始
新建一个 link.php 页面，完整的代码如下
PHP
- <?php
- error_reporting(0);
- header('Content-type:text/html;charset=utf-8');
- if(!empty($_GET['url']) && strpos($_GET['url'],'http')){
- ?>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CSDN - 安全中心</title>
- <style>
- html,body{background:#F3F4F5;font-family:Arial,sans-serif;padding:0;margin:0}
- a{text-decoration:none}
- .content{padding-top:220px;width:450px;margin:auto;word-break:break-all}
- .content .logo-img img{display:block;width:175px;height:48px;margin:auto;margin-bottom:16px}
- .content .loading-item{background:#fff;padding:24px;border-radius:12px;border:1px solid #E1E1E1}
- .content .flex{display:flex;align-items:center}
- .content .flex-end{display:flex;justify-content:flex-end;align-items:center}
- .content .tip1{background:#FDF5E6}
- .content .loading-color1{color:#FC5531}
- .content .loading-tip{padding:12px;margin-bottom:16px;border-radius:4px}
- .content .loading-topic{font-size:14px;color:#222226;line-height:24px;margin-bottom:24px}
- .content .loading-img{width:24px;height:24px}
- .content .loading-btn{white-space:nowrap;font-size:14px;color:#FC5531;border:1px solid #FC5531;display:inline-block;box-sizing:border-box;padding:6px 18px;border-radius:18px;margin-left:8px}
- .content .loading-btn-github{width:121px;background:#FC5531;color:#fff}
- .content .loading-text{font-size:16px;font-weight:600;color:#222226;line-height:22px;margin-left:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
- @media (max-width:450px){.content{padding-top:50px;width:94%}}
- </style>
- </head>
- <body>
- <div class="content">
- <div class="logo-img"><img src="https://csdnimg.cn/release/link/img/logo20201108.png"></div>
- <div class="loading-item loading-others">
- <div class="flex loading-tip tip1"> <img class="loading-img" src="https://csdnimg.cn/release/link/img/warning20201108.png">
- <div class="loading-text">请注意您的账号和财产安全</div>
- </div>
- <div class="loading-topic"><span>您即将离开CSDN！</span><br>
- 去往：<a class="loading-color1"><?php echo $_GET['url']; ?></a> </div>
- <div class="flex-end"><a class="loading-btn" id="apesar-loading" href="<?php echo $_GET['url']; ?>">继续</a> </div>
- </div>
- </div>
- </body>
- </html>
- <?php
- } else {
- header('Location: /');
- exit();
- }
- ?>
完成。这么简单的代码，真的是一点套路都没有。专为外链跳转设计的，判断外链不能为空，必须包含http字符，如果是站内链接，你都使用这个跳转，那你这个站长技术欠佳啊。
调用方法
举个例子：http://你的网址/link.php?url=http://baidu.com/
调用就是这么简单，一般的跳转页面都是这么写的。当然，如果你觉得还够完美，发挥你的想象，你可以把这个代码，用得更加的有创意。如果跳转页面空白，可参考《解决PHP网页跳转新页面空白问题》一文，适当的添加页面预加载特效。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）