仿csdn跳转网址页面html代码详解 -六月初技术站

仿csdn跳转网址页面html代码详解

六月初 HTML 2023-02-20 11:41:49

页面、网站之间的跳转，在所有网站中是一项必备的基础功能，完整的网站也是由这些跳转组成的。

在这些跳转中，站内的跳转对于站长来说是一项正常操作。但如果跳转到站外对于多数站长来说，既要保证即将跳转网站的真实性又需要给用户一个提示，告诉他即将离开本站。这时候关于页面跳转的中转提示、检测页面也就应运而生。

一、仿csdn网站跳转页面html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="referrer" content="always">
		<title>网站跳转中心-六月初博客站</title>
		<style>
			html,
			body {
				background: #F3F4F5;
				font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif;
				padding: 0;
				margin: 0;
				height: 100vh;
				width: 100vw;
				overflow: hidden;
			}
			a {
				text-decoration: none;
			}
			#linkPage{
				height: 100vh;
				width: 100vw;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: -10%;
			}
			.content {
				width: 450px;
				margin: auto;
				word-break: break-all;
			}
			.content .logo-img img {
				display: block;
				width: 175px;
				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 .tip2 {
				background: #ecfaf8;
			}
			.content .loading-color2 {
				color: #09a88c;
			}
			.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: #09a88c;
				border: 1px solid #09a88c;
				display: inline-block;
				box-sizing: border-box;
				padding: 6px 18px;
				border-radius: 18px;
				margin-left: 8px;
			}
			.content .cancle-btn{
				white-space: nowrap;
				font-size: 14px;
				color: #c7c7c7;
				border: 1px solid #c7c7c7;
				display: inline-block;
				box-sizing: border-box;
				padding: 6px 18px;
				border-radius: 18px;
				margin-left: 8px;
			}
			.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 {
					width: 94%;
				}
			}
		</style>
	</head>
	<body>
		<div id="linkPage" class="link-page">
			<div class="content">
				<div class="logo-img"><img src="./static/logo_text.png" alt=""></div>
				<div class="loading-item loading-others">
					<div class="flex loading-tip tip2"> <img class="loading-img"
							src="./static/warning20201108.png" alt="">
						<div class="loading-text">请注意您的账号和财产安全</div>
					</div>
					<div class="loading-topic"><span>您即将离开六月初博客站，去往：</span><a
							class="loading-color2" id="setUrl">https://tool.xuexiareas.com/</a> </div>
					<div class="flex-end">
						<a class="cancle-btn" href="javascript:window.opener=null;window.close();">取消</a> 
							<a class="loading-btn" id="setA" href="https://tool.xuexiareas.com/" target="_self">继续</a>
						</div>
				</div>
			</div>
		</div>
	</body>
</html>