精美实用！网站自适应图片文字广告位代码分享

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

复制代码

谢谢分享