xiuno修罗php程序网站首页自适应广告栏（图片+文字+滚动文字）

admin

xiuno修罗php程序网站首页自适应广告栏（图片+文字+滚动文字）

代码如下：

1. <!--图片广告区域开始-->
   
2. <div style="background-color:#fff;box-shadow:0px 0px 10px #ff2d51;padding:5px;margin-top:5px;margin-bottom:5px;">
   
3. 
   
4.         <h3 class="fly-panel-title" style="border-bottom:1px dotted #ff2d51;margin-bottom:10px;">
   
5.                 赞助商广告 <a style="float:right;color:#1685a9;" href="http://jinhei.com/" target="_blank">广告招商</a>
   
6.         </h3>
   
7. <!--图片广告区域开始-->
   
8. <a class="adplan" data-id="15" style="display:block;width:100%;margin-bottom:10px;" rel="nofollow" target="_blank" href="http://jinhei.com/" title="图片广告说明"> <img src="/advert/jlyhl.png" style="max-height:150px;width:100%;border-radius:4px;" width="644" height="150" title="" align="" alt="" /></a> <!--图片广告区域结束-->        
   
9. <!--顶部双排广告第二行-->
   
10. <style>
    
11.     #nr{
    
12.             font-size:20px;
    
13.             margin: 0;
    
14.         background: -webkit-linear-gradient(left,
    
15.             #ffffff,
    
16.             #ff0000 6.25%,
    
17.             #ff7d00 12.5%,
    
18.             #ffff00 18.75%,
    
19.             #00ff00 25%,
    
20.             #00ffff 31.25%,
    
21.             #0000ff 37.5%,
    
22.             #ff00ff 43.75%,
    
23.             #ffff00 50%,
    
24.             #ff0000 56.25%,
    
25.             #ff7d00 62.5%,
    
26.             #ffff00 68.75%,
    
27.             #00ff00 75%,
    
28.             #00ffff 81.25%,
    
29.             #0000ff 87.5%,
    
30.             #ff00ff 93.75%,
    
31.             #ffff00 100%);
    
32.         -webkit-background-clip: text;
    
33.         -webkit-text-fill-color: transparent;
    
34.         background-size: 200% 100%;
    
35.         animation: masked-animation 2s infinite linear;
    
36.     }
    
37.     @keyframes masked-animation {
    
38.         0% {
    
39.             background-position: 0 0;
    
40.         }
    
41.         100% {
    
42.             background-position: -100%, 0;
    
43.         }
    
44.     }
    
45. </style>
    
46.         <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-top:10px;margin-bottom:0px;">
    
47.                 <marquee>
    
48.             <b id="nr">滚动公告专区；可输入自定义文字</b> </marquee>
    
49.         </div>
    
50. <!--顶部双排广告第二行-->
    
51. <style>
    
52. .txtguanggao{width: 100%;overflow: hidden;display: block;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}.txtguanggao a{width: 31%;float: left;border-radius: 2px;line-height: 35.35px;height: 35.35px;text-align: center;font-size: 13px;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: 45.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;}}
    
53. </style>
    
54. <div class="txtguanggao">
    
55. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
56. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
57. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
58. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
59. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
60. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
61. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
62. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
63. <a href="http://jinhei.com/" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
    
64. </div>
    
65. </div>
    
66. <!--文字广告结束-->

复制代码