分享一个双列自适应广告代码 可横幅 可文字

七夏

分享一个双列自适应广告代码 可横幅 可文字

HTML代码：

1.     <div class="ad">
   
2.         <!--图片横幅广告-->
   
3.         <a href="https://www.hbd0.cn" target="_blank"><img src="图片地址"></a>
   
4.         <!--自适应文字广告-->
   
5.         <div class="zuo text-ad"><a href="https://www.hbd0.cn" target=" _blank"="" style="background:#01AAED;">广告招商虚位以待</a></div>
   
6.         <div class="you text-ad"><a href="https://www.hbd0.cn" target=" _blank"="" style="background:#2F4056;">广告招商虚位以待</a></div>
   
7.     </div>

复制代码

CSS代码：

1.     /**广告位CSS**/
   
2.     .ad {
   
3.         background: #fff;
   
4.         overflow: hidden;
   
5.         clear: both;
   
6.         margin: 10px 0 0;
   
7.         padding: 8px;
   
8.     }
   
9. 
   
10.     .ad img {
    
11.         max-width: 100%;
    
12.     }
    
13. 
    
14.     .ad .text-ad {
    
15.         width: 50%;
    
16.     }
    
17. 
    
18.     .ad .text-ad a {
    
19.         margin: 6px 0 0;
    
20.         display: block;
    
21.         height: 60px;
    
22.         line-height: 60px;
    
23.         color: #fff;
    
24.         font-size: 24px;
    
25.         text-align: center;
    
26.     }
    
27. 
    
28.     .zuo {
    
29.         float: left;
    
30.     }
    
31. 
    
32.     .you {
    
33.         float: right;
    
34.     }
    
35. 
    
36.     @media(max-width:999px) {
    
37.         .ad .text-ad {
    
38.             width: 100%;
    
39.         }
    
40.     }

复制代码

zhang1109

冲啊    网站做起来，弟弟们

SanS三石

滴~学生卡，打卡成功！楼主辛苦了，祝楼主：财源滚滚🧡，打卡时间：2024年06月29日 12:18:51