自适应彩色文字广告位代码分享

鹏仔之前写的彩色文字广告代码分享给大家！

自适应手机端，并且无惧网站夜间模式！

需要几行几列，大家自行增删数量。

HTML代码

<div class="tp_advertising"> 
   <p>广告</p> 
   <div class="tp_1"> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">QQ344225443</a> 
   </div> 
   <div class="tp_2"> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">QQ344225443</a> 
   </div> 
   <div class="tp_3"> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">QQ344225443</a> 
   </div> 
   <div class="tp_4"> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">QQ344225443</a> 
   </div> 
   <div class="tp_5"> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">QQ344225443</a> 
   </div> 
   <div class="tp_6"> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">广告招租</a> 
    <a href="#" target="_blank">QQ344225443</a> 
   </div> 
  </div>

CSS代码

/*首页文字广告位样式*/
.tp_advertising{width:100%;display:flex;justify-content:space-between;background:rgba(255,255,255,.15);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{position:relative;z-index:1;width:16.66%;}
.tp_advertising a{font-size:12px;line-height:22px;text-align:center;display:block;text-decoration:none;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.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;}

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓