如何实现彩色文字带标签的广告的代码分享

图片来自网络

如何实现文字广告,并且是彩色字体

话不多说,直接开始贴入代码:

<style> 
.tp_advertising{ 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    background: #fff; 
    position: relative; 
    box-shadow: 0 0 3px rgba(0,0,0,.2);
 } 
.tp_advertising p{ 
color: #fff; 
font-size: 14px; 
line-height: 22px; 
background: #6F8EC5; 
position: absolute; 
bottom: 0; right: 0; 
margin: 0; 
padding: 0 8px; 
border-top-left-radius: 10px; 
opacity: .3; 
} 
.tp_advertising div{ 
width: 16.66%; 
position: relative; 
z-index: 1; 
} 
.tp_advertising a{ 
font-size: 12px; 
line-height: 22px; 
text-align: center; 
display: block; 
text-decoration: none; 
white-space:nowrap; 
} 
.tp_advertising a:hover{ 
font-weight: bold; 
font-size: 14px; 
text-shadow: 0px 0px 1px rgba(0,0,0,.5);
 } 
.tp_1 a{ 
color: #FF0033; 
} 
.tp_2 a{ 
color: #9400D3; 
} 
.tp_3 a{ 
color: #00BFFF; 
} 
.tp_4 a{ 
color: #FF1493; 
} 
.tp_5 a{ 
color: #FF4500; 
} 
.tp_6 a{ 
color: #5fb878; 
} 
</style> 
<div class="tp_advertising"> 
<p>广告</p> 
<div class="tp_1"> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
 <a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
 </div> <div class="tp_2"> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
</div> <div class="tp_3"> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
 <a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
 <a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
</div> <div class="tp_4"> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a> 
<a href="https://jq.qq.com/?_wv=1027&k=PAo1UxsV" target="_blank">by.怡然一记</a>
</div>
怡然一记
如何实现彩色文字带标签的广告的代码分享
https://xsunhua.cn/121.html
THE END
分享
二维码
打赏
海报
如何实现彩色文字带标签的广告的代码分享
图片来自网络 如何实现文字广告,并且是彩色字体 话不多说,直接开始贴入代码: <style> .tp_advertising{ width: 100%; display: flex; ……
<<上一篇
下一篇>>
文章目录
关闭
目 录