网站广告位块状渐变文字广告美化版代码分享 - 小浣熊博客

网站广告位块状渐变文字广告美化版代码分享

发布者: 小浣熊

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

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

这篇文章总字数为:2349 字,有 0 张图存于本站服务器

效果预览:

块状渐变文字广告美化版

前言:

这个块状文字广告位代码,列数为5列,行数不限制,反正五个五个加,你想放多少行都行。

实现代码:

<style>

	.text-block{

		width: 100%;

		overflow: hidden;

		background: rgba(255,255,255,.6);

		display: flex;

		justify-content: space-between;

		flex-wrap: wrap;

	}

	.text-block a{

		color: rgba(0,0,0,.6);

		font-size: 14px;

		font-weight: bold;

		line-height: 30px;

		text-align: center;

		text-decoration: none;

		display: block;

		width: 19.5%;

		height: 30px;

		overflow: hidden;

		position: relative;

		margin: 1px 0;

	}

	.text-block a div{

		width: 100%;

		height: 60px;

		padding: 0 5px;

		box-sizing: border-box;

		position: absolute;

		top: 0;

		left: 0;

		transition: all .3s;

	}

	.text-block a:hover div{

		transition: all .3s;

		color: #fff;

		top: -30px;

		text-shadow: 0 2px 3px rgba(0,0,0,.6);

	}

	.text-block p{

		width: 100%;

		white-space: nowrap;

	    overflow: hidden;

	    text-overflow: ellipsis;

	}

	.text-block a div :nth-child(1){

	    background: linear-gradient(to right,#b4b4ff, #aedefc);

	}

	.text-block a div :nth-child(2){

	    background: linear-gradient(to right,#aedefc,#b4b4ff);

	}


</style>



<div class="text-block">

	<a target="_blank" href="javascript:;">

		<div>

			<p>小高教程网</p>

			<p>点击访问</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>百变鹏仔</p>

			<p>点击访问</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>百变鹏仔</p>

			<p>点击访问</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>百变鹏仔</p>

			<p>点击访问</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>百变鹏仔</p>

			<p>点击访问</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>广告招租</p>

			<p>点击咨询</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>广告招租</p>

			<p>点击咨询</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>广告招租</p>

			<p>点击咨询</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>广告招租</p>

			<p>点击咨询</p>

		</div>

	</a>

	<a target="_blank" href="javascript:;">

		<div>

			<p>广告招租</p>

			<p>点击咨询</p>

		</div>

	</a>

</div>

 

分享到:
打赏
-版权声明-

阅读时间:  发布于:2020-6-3
文章标题:《网站广告位块状渐变文字广告美化版代码分享》
本文链接:https://www.mua222.cn/206.html
本文编辑: 小浣熊,转载请注明超链接和出处小浣熊博客
收录状态:[百度已收录][360已收录][搜狗已收录]

评论

     快速回复: 支持 感谢 学习 不错 高兴 给力 加油 惊喜
切换注册

登录

忘记密码?

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

切换登录

注册

网站广告位块状渐变文字广告美化版代码分享

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏