好看的网站导航文章广告位代码分享

这里分享一个响应式好看的网站导航文章广告位代码,在网上可以看到很多网站,一般都会在某些位置增加一些广告来增加一点收益,代码先分享出来,以作备用。

使用:复制下方代码后,放到网页中需要显示的位置即可。

整代码

<div style="background-color:#fff;box-shadow:0px 0px 10px #dedede;padding:5px;margin-top:5px;margin-bottom:5px;">
        <h3 class="fly-panel-title" style="border-bottom:1px dotted #e2e2e2;margin-bottom:10px;">
            赞助商广告 <a style="float:right;color:#dedede;" href="/" target="_blank" onmouseover="this.style.color='#F00'" onmouseout="this.style.color='#dedede'">广告招商</a> 
        </h3>
        <a class="adplan" data-id="15" style="display:block;width:100%;margin-bottom:10px;" rel="nofollow" target="_blank" href="/"> 
        <img src="/gge/gg.png" style="max-height:70px;width:100%;border-radius:4px;" width="644" height="70" title="" align=""/></a>
         <!--图片广告区域结束-->    
            <!--顶部双排广告第二行-->
            <style>
#nr{font-size:20px;margin:0;background:-webkit-linear-gradient(left,#fff,red 6.25%,#ff7d00 12.5%,#ff0 18.75%,#0f0 25%,#0ff 31.25%,#00f 37.5%,#f0f 43.75%,#ff0 50%,red 56.25%,#ff7d00 62.5%,#ff0 68.75%,#0f0 75%,#0ff 81.25%,#00f 87.5%,#f0f 93.75%,#ff0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:masked-animation 2s infinite linear}
@keyframes masked-animation{0%{background-position:0 0}
100%{background-position:-100%,0}
}
            </style>
            <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-top:10px;margin-bottom:0px;">
                <marquee>
                    <b id="nr">公告:欢迎来到本站! </b> </marquee>
            </div>
        <!--顶部双排广告第二行-->
        <style>
        .txtguanggao{width: 100%;overflow: hidden;display: block;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}.txtguanggao a{width: 24.5%;float: left;border-radius: 2px;line-height: 35.35px;height: 35.35px;text-align: center;font-size: 14px;color: #fff;display: inline-block;background-color: rgb(255, 153, 159);margin: 2.5px;transition-duration: .3s;}.txtguanggao a:nth-child(1) {background-color: #dc3545;}.txtguanggao a:nth-child(2) {background-color: #007bff;}.txtguanggao a:nth-child(3) {background-color: #28a745;}.txtguanggao a:nth-child(4) {background-color: #ffc107;}.txtguanggao a:nth-child(5) {background-color: #28a745;}.txtguanggao a:nth-child(6) {background-color: #ffc107;}.txtguanggao a:nth-child(7) {background-color: #dc3545;}.txtguanggao a:nth-child(8){background-color: #007bff;}.txtguanggao a:hover{background:#FF2805;color:#FFF}@media screen and (max-width: 1000px) {.txtguanggao a{width: 47.96%;float: left;border-radius: 2px;line-height: 35.35px;height: 35.35px;text-align: center;font-size: 14px;color: #fff;display: inline-block;background-color: rgb(255, 153, 159);margin: 2.5px;transition-duration: .3s;}}
        </style>
        <div class="txtguanggao">
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
            <a href="/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a> 
        </div>
    </div>
    <!--文字广告结束-->