[分享] 三格广告位（带有图标）反正文字说不清，进来看看~

郑爽中文网

效果图：

下載 (31.61 KB)

2012-12-28 03:38

经过测试，7.2可用~

1. <style type="text/css">
   
2. <!--
   
3. .div_02{width:958px;overflow:hidden;height:92px;}
   
4. .aadc{width:968px;over-flow:hidden;border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;padding:0;background-color:#f9f9f9}
   
5. .nav_01{float:left;width:38px;height:92px;}
   
6. .nav_02{width:283px;height:92px;float:left;position:relative}
   
7. .nav_03{width:10px;height:92px;float:left}
   
8. .nr_01{width:75px;height:75px;position:absolute}
   
9. .nr_01 img{width:75px;height:75px;}
   
10. .nr_02{width:113px;height:73px;position:absolute;color:#666666;font-size:12px;line-height:18px;text-align:left}
    
11. .nr_02 span{width:113px;overflow:hidden;font-size:14px;font-weight:bold}
    
12. .nr_02 span a{color:#666666;text-decoration:none}
    
13. .nr_02 span a:hover{text-decoration:underline}
    
14. .nr_02 .color_01{color:#b6c5be;font-weight:normal;font-size:10px}
    
15. .nr_03{width:61px;height:25px;position:absolute;font-size:12px;text-align:center;line-height:25px;color:#666666;}
    
16. .nr_03 a{width:61px;height:25px;display:block;color:#666666;text-decoration:none;background:url(图片所在目录/bt1.jpg) center center no-repeat}
    
17. .nr_03 a:hover{width:61px;height:25px;display:block;text-decoration:none;background:url(图片所在目录/bt2.jpg) center center no-repeat}img{border:0}
    
18. -->
    
19. </style>
    
20. 
    
21. <div class="aadc" style="width:958px"><div class="div_02">
    
22. <div class="nav_01"> </div>
    
23. <div class="nav_02">
    
24. <div class="nr_01" style="LEFT: 12px; TOP: 8px">
    
25. <a title="十年一剑" target="_blank" href="http://www.zmd5.com/userapp.php?mod=app&id=1060932">
    
26. <img alt="十年一剑" src="http://appicon.manyou.com/advlogos/1060932"></a></div>
    
27. <div class="nr_02" style="LEFT: 97px; TOP: 9px">
    
28. <a target="_blank" href="http://www.zmd5.com/userapp.php?mod=app&id=1060932">
    
29. 十年一剑</a>
    
30. <p>拥有完整的世界观和扑朔迷离的剧情
    
31. 
    
32. <span class="color_01">2010/11/26</span></p>
    
33. </div>
    
34. <div class="nr_03" style="LEFT: 216px; TOP: 33px">
    
35. <a target="_blank" href="http://www.zmd5.com/userapp.php?mod=app&id=1060932">
    
36. 开始游戏</a></div>
    
37. </div>
    
38. <div class="nav_03"> </div>
    
39. <div class="nav_02">
    
40. <div class="nr_01" style="LEFT: 12px; TOP: 8px">
    
41. <a title="弹弹堂" target="_blank" href="http://bbs.zmd5.com/userapp.php?mod=app&id=1040624">
    
42. <img alt="弹弹堂" src="http://appicon.manyou.com/logos/1040624"></a></div>
    
43. <div class="nr_02" style="LEFT: 97px; TOP: 9px">
    
44. <a target="_blank" href="http://bbs.zmd5.com/userapp.php?mod=app&id=1040624">
    
45. 弹弹堂</a>
    
46. <p>最Q的Flash界面，画面精美，声音悦耳。
    
47. 
    
48. <span class="color_01">2010/11/18</span></p>
    
49. </div>
    
50. <div class="nr_03" style="LEFT: 216px; TOP: 33px">
    
51. <a target="_blank" href="http://bbs.zmd5.com/userapp.php?mod=app&id=1040624">
    
52. 开始游戏</a></div>
    
53. </div>
    
54. <div class="nav_03"> </div>
    
55. <div class="nav_02">
    
56. <div class="nr_01" style="LEFT: 12px; TOP: 8px">
    
57. <a title="QQ七雄争霸" target="_blank" href="http://bbs.zmd5.com/userapp.php?mod=app&id=1063034">
    
58. <img alt="QQ七雄争霸" src="http://appicon.manyou.com/logos/1063034"></a></div>
    
59. <div class="nr_02" style="LEFT: 97px; TOP: 9px">
    
60. <a target="_blank" href="http://bbs.zmd5.com/userapp.php?mod=app&id=1063034">
    
61. QQ七雄争霸</a>
    
62. <p>招兵买马、称霸全国，成就乱世枭雄。
    
63. 
    
64. <span class="color_01">2011/07/19</span></p>
    
65. </div>
    
66. <div class="nr_03" style="LEFT: 216px; TOP: 33px">
    
67. <a target="_blank" href="http://bbs.zmd5.com/userapp.php?mod=app&id=1063034">
    
68. 进入游戏</a></div>
    
69. </div>
    
70. </div>
    
71. </div>

複製代碼

把文字、链接地址、图标地址改成你自己的了就行了
更多代码请进
青春九零网代码频道