当前位置:唯爱资源网 > WordPress > 正文
唯爱网络

作者:唯爱网络

全网最全的网络资源分享网站

手机扫码查看

WordPress文章内添加特色广告代码 原创教程代码

主题添加教程

将下面的代码添加到主题的css文件,dux添加到mian.css

.feedback {
	height: 80px;
	margin: 0px -20px 0px -20px;
	color: #fff;
	overflow: hidden;
	margin-bottom: 10px;
}

.fb-primary {
	background-color: #50b7ff;
}

.fb-danger {
	background-color: #ff5f53;
}

.fb-warning {
	background-color: #f9c13e;
}

.fb-info {
	background-color: #1ac5e2;
}

.fb-purple {
	background-color: #b771e8;
}

.feedback span {
	font-size: 28px;
	float: left;
	padding: 0px 0px 0px 20px;
	line-height: 80px;
}

.feedback a {
	margin: 22px 20px 0px 0px;
	float: right;
	position: relative;
	height: 36px;
	line-height: 36px;
	border: 1px solid #fff;
	display: inline-block;
	font-size: 16px;
	padding: 0 26px;
	color: #fff;
	text-decoration: none;
}

.feedback a:hover {
	background-color: #fff;
	color: #000000;
	text-decoration: none
}

@media (max-width: 640px) {
	.feedback span {
		font-size: 12px;
		float: left;
		padding: 0px 0px 0px 20px;
		line-height: 50px;
	}

	.feedback a {
		margin: 12px 20px 0px 0px;
		float: right;
		position: relative;
		height: 26px;
		line-height: 26px;
		border: 1px solid #fff;
		display: inline-block;
		font-size: 12px;
		padding: 0 18px;
	}

	.feedback {
		height: 50px;
	}
}

前台调用样式(参考上方css演示)

<div class="feedback fb-danger">
<span>Vieu主题v2系列 专注于工体美学</span>
<a href="http://www.vizyw.com/4213.html">使用教程</a>
</div>
未经允许不得转载:

作者:唯爱网络, 转载或复制请以 超链接形式 并注明出处 唯爱资源网
原文地址:《WordPress文章内添加特色广告代码》 发布于2018-04-24

分享到:
赞(0) 打赏

评论 抢沙发

7 + 4 =


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu3.6主题

专业打造轻量级个人企业风格博客主题!
一套模板,四种风格,专注于前端开发,全站响应式布局自适应模板。
官方统一售价¥69

了解一下

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录