好看的网站自适应图片文字广告位代码

上边是图片广告位，下边是文字广告位，适用于所有网站。

发现了一些问题进行了修复，修复内容：图片广告位如果图片小显示会异常，

文字存在下划线。一个好的广告位不仅不会拉低网站的颜值，还会增加广告主选择你的机会。

广告位代码适配一下自己的网站效果会更好哦。

1. <div class="ad">
2. <!--图片横幅广告-->
3. <a href="https://www.baidu.com" target="_blank" ><img src="https://y.gtimg.cn/music/photo_new/T053M000003UUUus1HuyfW.gif" width="100%"></a>
4. <!--自适应文字广告-->
5. <li><a href="https://www.baidu.com" target="_blank" style="line-height:60px;height:60px;color:#fff;background:#01AAED;text-align:center;font-size:24px;">广告招商 虚位以待</a></li>
6. <li> <a href="https://www.baidu.com"  target="_blank" style="line-height:60px; height:60px ;color:#fff; background:#2F4056; text-align:center; font-size:24px;" >广告招商 虚位以待</a></li>
7. </div>
8.  
9. <div class="txtguanggao">
10. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
11. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
12. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
13. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
14. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
15. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
16. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
17. <a href="https://www.baidu.com" target="_blank" class="dh">超低价文字广告位</a>
18.  
19. </div>
20. <style>
21. /**广告位**/
22. .ad{background:#fff;overflow:hidden;clear:both;border-radius: 6px;}
23. .ad a{margin:5px;display:block;border-radius:3px;}
24. .ad img{max-width:100%;}
25. .ad li{float:left;width:50%;list-style:none;}
26. @media(max-width:999px) {
27. .ad{margin: 0 0 10px 0;}
28. .ad li{width:100%;}
29. }
30. /**新增文字广告**/
31. .txtguanggao{
32.     width: 100%;
33.     overflow: hidden;
34.     display: block;
35.     box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
36. }
37. .txtguanggao a{
38.     width: calc((100% - 20px) / 4);
39.     float: left;
40.     border-radius: 2px;
41.     line-height: 35.35px;
42.     height: 35.35px;
43.     text-align: center;
44.     font-size: 14px;
45.     color: #fff;
46.     display: inline-block;
47.     background-color: rgb(255, 153, 159);
48.     margin: 2.5px;
49.     
50.     transition-duration: .3s;
51. }
52. .txtguanggao a:nth-child(1) {
53.     background-color: #dc3545;
54. }
55. .txtguanggao a:nth-child(2) {
56.     background-color: #007bff;
57. }
58. .txtguanggao a:nth-child(3) {
59.     background-color: #28a745;
60. }
61. .txtguanggao a:nth-child(4) {
62.     background-color: #ffc107;
63. }
64. .txtguanggao a:nth-child(5) {
65.     background-color: #28a745;
66. }
67. .txtguanggao a:nth-child(6) {
68.     background-color: #ffc107;
69. }
70. a {
71.  
72.   text-decoration: none;
73.  
74. }
75. .txtguanggao a:nth-child(7) {
76.     background-color: #dc3545;
77. }
78. .txtguanggao a:nth-child(8){
79.     background-color: #007bff;
80. }
81. .txtguanggao a:hover{
82. background:#FF2805;color:#FFF
83. }
84. @media screen and (max-width: 1000px) {
85. .txtguanggao a{
86.    width: calc((100% - 10px) / 2);
87.     float: left;
88.     border-radius: 2px;
89.     line-height: 35.35px;
90.     height: 35.35px;
91.     text-align: center;
92.     font-size: 14px;
93.     color: #fff;
94.     display: inline-block;
95.     background-color: rgb(255, 153, 159);
96.     margin: 2.5px;
97.     transition-duration: .3s;
98. }
99. }
100.   @media screen and (min-width: 1000px) {
101.     .txtguanggao a{
102.     width: calc((100% - 20px) / 4);
103.     }}
104. </style>