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

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

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

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">QQ1234567</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">QQ1234567</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">QQ1234567</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">QQ1234567</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">QQ1234567</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">QQ1234567</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;}