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

HTML代码：

1. <div class=“ad”>
2. <!–图片横幅广告–>
3. <a href=“https://www.njymz.com/” target=“_blank”><img src=“图片地址”></a>
4. <!–自适应文字广告–>
5. <div class=“zuo text-ad”><a href=“https://www.njymz.com/” target=” _blank”=“” style=“background:#01AAED;”>广告招商虚位以待</a></div>
6. <div class=“you text-ad”><a href=“https://www.njymz.com/” 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. }
10. .ad img {
11. max-width: 100%;
12. }
14. .ad .text-ad {
15. width: 50%;
16. }
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. }
28. .zuo {
29. float: left;
30. }
32. .you {
33. float: right;
34. }
36. @media(max-width:999px) {
37. .ad .text-ad {
38. width: 100%;
39. }
40. }