WordPress外链跳转插件跳转页面美化

原页面

美化后页面

代码详解

HTML部分

我们先创建一个标准HTML页面

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

</body>
</html>

随后在<body></body>中创建四个div块并配置好

<div class="card">
		<!-- LOGO -->
		<div align="center">
		<img src="https://z3.ax1x.com/2021/10/31/Iprs4e.png" style="width: 260px; height: 65px; padding-top: 10px;">
		</div>
		<!-- 说明文字 -->
		<div align="center" style="padding-top: 5px;">
			<h3 style="color: red;">即将离开本网站,请注意账号财产安全</h2>
			<h3 style="color: red;">本页面暂未完善...</h2>
			<h3 style="color: red;">站长QQ:2370085842</h2>
			<hr class="layui-border-black" style="padding-top: 8px; width: 350px;">
			<p class="link"><?php echo $link ?></p>
			
		</div>

		<!-- 按钮 -->
		<div align="center" style="padding-top: 150px;">
			<a style="color: #28FF28;" href="<?php echo $link ?>" rel="nofollow"><button class="btn">继续访问</button></a>
		</div>

	
	</div>

根据块中的class值去写新建一个css文件夹,并且创建一个style.css的文件

最后在html中引入一下css文件

	<link rel="stylesheet" type="text/css" href="css/card.css">
	<link rel="stylesheet" type="text/css" href="css/layui.css">

这里引入layui的原因是分割符使用了layui的样式

CSS部分

先给Body定一个css样式

body{
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-direction: column;  /*弹性盒元素的方向,垂直一个一个*/
	justify-content: center;  /*居中排列*/
	background: url("../img/bg2.jpeg");
	background-size: cover;
	background-position: center; /*背景图像的起始位置居中*/

随后给card写上对应css

.card{
	width: 800px;
	height: 600px;
	background: rgb(255, 255, 255, 0.2);
	border-radius: 20px;  /*边角导角*/
	backdrop-filter: blur(6px);  /*背景模糊度*/
	box-shadow: 0 25px 25px rgba(0, 0, 0, 0.4);  /*卡片阴影*/
	border-top: 1px solid rgb(255, 255, 255, 0.8);
	transition: 0.5s;
}
.card:hover{ /*鼠标移动碰到*/
	transform: scale(1.1);  /*卡片缩放*/
}
.card .info{
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.card .info img{
	height: 100px;
	width: 100px;
	border-radius: 25px;
	border: 8px solid rgb(255, 255, 255, 0.2);
	margin-right: 40px;
}
.card .info .txt{
	display: flex;
	flex-direction: column;
	line-height: 2;
}
.card .info .txt span:nth-child(1){
	font-size: 24px;
	font-weight: bold;
}

最后还有一个按钮样式(按钮来源于语雀文档),直接写在html的head里面,方便一点

在<head></head>中写入<style></style>并在其中写入按钮样式

	<style>
	        *{
            margin: 0;
            padding: 0;
            font-family: 'montserrat',sans-serif;
        }

        body{
            height: 100vh;/* ==100% */
            display: flex;
            align-items: center;/* flex下使用,四面居中 */
            justify-content: center; /* 顶格居中*/
        }

        .btn{
            width: 180px;
            height: 50px;
            background: none;/* ==transparent */  
            border: 4px solid;
            color: #3498db;
            font-weight: 700; /* ==bold */
            text-transform: uppercase;/* 字母大写 */
            cursor: pointer;/* 手指指示 */
            font-size: 15px;
            position: relative; /* 相对定位 */
        }

        .btn::before,
        .btn::after{
            content: '';/* 与 :before 及 :after 伪元素配合使用,来插入生成内容。 */
            position: absolute;/* 绝对定位 */
            width: 25px;
            height: 5px;
            background: #353b48;
            transform: skewX(50deg);/* 沿X轴的2D倾斜转换正50度*/
            transition: .4s linear;/* 线性过渡特效 */
        }

        .btn::before{
            top: -4px;
            left: 10%;
        }

        .btn::after{
            bottom: -4px;
            right: 10%;
        }

        .btn:hover::before{
            left: 80%;
        }

        .btn:hover::after{
            right: 80%;
        }

	</style>

最终代码汇总

HTML部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>酒窝博客|跳转提醒...</title>
	<link rel="stylesheet" type="text/css" href="css/card.css">
	<link rel="stylesheet" type="text/css" href="css/layui.css">
	<style>
	        *{
            margin: 0;
            padding: 0;
            font-family: 'montserrat',sans-serif;
        }

        body{
            height: 100vh;/* ==100% */
            display: flex;
            align-items: center;/* flex下使用,四面居中 */
            justify-content: center; /* 顶格居中*/
        }

        .btn{
            width: 180px;
            height: 50px;
            background: none;/* ==transparent */  
            border: 4px solid;
            color: #3498db;
            font-weight: 700; /* ==bold */
            text-transform: uppercase;/* 字母大写 */
            cursor: pointer;/* 手指指示 */
            font-size: 15px;
            position: relative; /* 相对定位 */
        }

        .btn::before,
        .btn::after{
            content: '';/* 与 :before 及 :after 伪元素配合使用,来插入生成内容。 */
            position: absolute;/* 绝对定位 */
            width: 25px;
            height: 5px;
            background: #353b48;
            transform: skewX(50deg);/* 沿X轴的2D倾斜转换正50度*/
            transition: .4s linear;/* 线性过渡特效 */
        }

        .btn::before{
            top: -4px;
            left: 10%;
        }

        .btn::after{
            bottom: -4px;
            right: 10%;
        }

        .btn:hover::before{
            left: 80%;
        }

        .btn:hover::after{
            right: 80%;
        }

	</style>
</head>
<body>
	<div class="card">
		<!-- LOGO -->
		<div align="center">
		<img src="https://z3.ax1x.com/2021/10/31/Iprs4e.png" style="width: 260px; height: 65px; padding-top: 10px;">
		</div>
		<!-- 说明文字 -->
		<div align="center" style="padding-top: 5px;">
			<h3 style="color: red;">即将离开本网站,请注意账号财产安全</h2>
			<h3 style="color: red;">本页面暂未完善...</h2>
			<h3 style="color: red;">站长QQ:2370085842</h2>
			<hr class="layui-border-black" style="padding-top: 8px; width: 350px;">
			<p class="link"><?php echo $link ?></p>
			
		</div>

		<!-- 按钮 -->
		<div align="center" style="padding-top: 150px;">
			<a style="color: #28FF28;" href="<?php echo $link ?>" rel="nofollow"><button class="btn">继续访问</button></a>
		</div>

	
	</div>

</body>
</html>

 

CSS部分

body{
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-direction: column;  /*弹性盒元素的方向,垂直一个一个*/
	justify-content: center;  /*居中排列*/
	background: url("../img/bg2.jpeg");
	background-size: cover;
	background-position: center; /*背景图像的起始位置居中*/
}
.card{
	width: 800px;
	height: 600px;
	background: rgb(255, 255, 255, 0.2);
	border-radius: 20px;  /*边角导角*/
	backdrop-filter: blur(6px);  /*背景模糊度*/
	box-shadow: 0 25px 25px rgba(0, 0, 0, 0.4);  /*卡片阴影*/
	border-top: 1px solid rgb(255, 255, 255, 0.8);
	transition: 0.5s;
}
.card:hover{ /*鼠标移动碰到*/
	transform: scale(1.1);  /*卡片缩放*/
}
.card .info{
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.card .info img{
	height: 100px;
	width: 100px;
	border-radius: 25px;
	border: 8px solid rgb(255, 255, 255, 0.2);
	margin-right: 40px;
}
.card .info .txt{
	display: flex;
	flex-direction: column;
	line-height: 2;
}
.card .info .txt span:nth-child(1){
	font-size: 24px;
	font-weight: bold;
}

 

使用方法

  1. 将HTML文件改名为link.php
  2. 上传至博客根目录下路径wp-content/plugins/cp-link-open下覆盖(需要连同CSS一起上传)
  3. 新建一个文章,启用跳转插件后在文章插入一个他站链接试试

使用插件

本文使用插件为:cp-link-open

插件为CorePress主题官方开发

原站地址:https://www.lovestu.com/cp-link-open.html

本章名称:WordPress外链跳转插件跳转页面美化

本章链接:https://www.9wor.com/60.html

本站名称:酒窝博客

本站地址:www.9wor.com

本站部分内容来源于网络,仅供大家参考学习,若侵犯到了您的合法权益,请点击此处联系站长处理。

本站资源均存储至云盘,若有失效请联系处理,建议成为注册用户使用我们的CDN直连下载。

为了本站的稳定发展,希望贵站若搬运本站资源,请注明一下原站地址,真的谢谢你们了!

THE END
分享
二维码
海报
WordPress外链跳转插件跳转页面美化
原页面 美化后页面 代码详解 HTML部分 我们先创建一个标准HTML页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ……
< <上一篇
下一篇>>