把代码复制到想要放的地方
html/PHP代码
<!--首页文字广告--> <div class="tp_advertising"> <p>广告</p> <div class="tp_2"> </span> <span style="color:#2BA20C;"><a href="" target="_blank" rel="noopener"style="color: #2BA20C;">广告位招租</a></span> <span style="color:#0CA295;"><a href="" target="_blank" rel="noopener"style="color:#0CA295;">广告位招租</a></span> <span style="color:#EF5F19 ;"><a href=""target="_blank" rel="noopener"style="color: #EF5F19;">广告位招租</a></span> <span style="color:#0C73A2;"><a href="" target="_blank" rel="noopener"style="color:#0C73A2;">广告位招租</a></span> </div> <div class="tp_2"> <span style="color:#0C73A2;"><a href="" target="_blank" rel="noopener"style="color:#0C73A2;">广告位招租</a></span> <span style="color:#0C73A2;"><a href="" target="_blank" rel="noopener"style="color:#0C73A2;">广告位招租</a></span> <span style="color:#0C73A2;"><a href="" target="_blank" rel="noopener"style="color:#0C73A2;">广告位招租</a></span> <span style="color:#7A37DC;"><a href=" " target="_blank" rel="noopener"style="color:#7A37DC;">广告位招租</a></span> </div> <div class="tp_2"> <span style="color:#FF0000;"><a href="" target="_blank" rel="noopener" style="color:#FF0000;">广告位招租</a></span> <span style="color:#FF0000;"><a href="" target="_blank" rel="noopener" style="color:#FF0000;">广告位招租</a></span> <span style="color:#FF0000;"><a href="" target="_blank" rel="noopener" style="color:#FF0000;">广告位招租</a></span> <span style="color:#00FFCA;"><a href=" " target="_blank" rel="noopener" style="color:#00FFCA;">广告位招租</a></span> </div> <div class="tp_2"> <span style="color:#608E01;"><a href=" " target="_blank" rel="noopener" style="color:#608E01;">广告位招租</a></span> <span style="color:#8E0101;"><a href=" " target="_blank" rel="noopener" style="color:#8E0101;">广告位招租</a></span> <span style="color:#608E01;"><a href=" " target="_blank" rel="noopener" style="color:#608E01;">广告位招租</a></span> <span style="color:#8E0101;"><a href=" " target="_blank" rel="noopener" style="color:#8E0101;">广告位招租</a></span> </div> </div>
css代码
.tp_advertising{/*文字广告css*/ width: 100%; display: flex; justify-content: space-between; background: #fff; position: relative; box-shadow: 0 0 3px rgba(0,0,0,.2); margin-bottom:5px; } .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); }
[/rihide]