discuz原生模板 獨立DIY 圖片展示 求大佬幫忙改一下代碼

xilushequ

1. <style>
   
2. .moqu8_com_24_pics-wrap {
   
3.         width: 100%
   
4. }
   
5. .moqu8_com_24_pics-wrap li {
   
6.         float: left;
   
7.         margin: 0 2% 15px 0
   
8. }
   
9. .moqu8_com_24_pics-wrap li a {
   
10.         display: block;
    
11.         position: relative
    
12. }
    
13. .moqu8_com_24_pics-wrap li span {
    
14.         display: none;
    
15.         position: absolute;
    
16.         left: 0;
    
17.         bottom: 0;
    
18.         background: url(http://www.banban.so/new/bang/uploads/146597357377255.png) repeat-x;
    
19.         text-indent: 10px;
    
20.         width: 100%;
    
21.         height: 50px;
    
22.         color: #fff;
    
23.         text-align: left;
    
24.         font: 400 16px/60px "microsoft yahei"
    
25. }
    
26. .moqu8_com_24_pics-wrap li span i {
    
27.         margin: 0 5px
    
28. }
    
29. .moqu8_com_24_pics-wrap li em {
    
30.         position: absolute;
    
31.         right: 0;
    
32.         bottom: 30px;
    
33.         width: 50px;
    
34.         height: 24px;
    
35.         text-align: center;
    
36.         color: #fff;
    
37.         font: 400 12px/24px "microsoft yahei";
    
38.         background: rgba(0,0,0,.4);
    
39. filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#66000000', endColorstr='#66000000')
    
40. }
    
41. .moqu8_com_24_pics-list-a {
    
42.         width: 47.5%
    
43. }
    
44. .moqu8_com_24_pics-list-b, .moqu8_com_24_pics-list-c {
    
45.         width: 26%
    
46. }
    
47. .moqu8_com_24_fl {
    
48.         float: left
    
49. }
    
50. .moqu8_com_24_pics-wrap ul {
    
51.         list-style: none;
    
52.         padding: 0;
    
53.         margin: 0
    
54. }
    
55. .moqu8_com_24_pics-wrap li:hover span {
    
56.         display: inline
    
57. }
    
58. </style>
    
59. <div class="moqu8_com_24_pics-wrap">
    
60.         <ul class="moqu8_com_24_pics-list-a moqu8_com_24_fl">
    
61.                     [index=1]
    
62.                 <li style="width:98%"><a href="{url}" target="_blank"><img height="340" alt="{title}" src="{pic}" width="100%"> <span></span><em>{picnum}張</em></a></li>
    
63.         [/index]
    
64.         [index=2]
    
65.         <li style="width:38%"><a href="{url}" target="_blank"><img height="288" alt="{title}" src="{pic}" width="100%"> <span></span><em>{picnum}張</em></a> </li>
    
66.         [/index]
    
67.         [index=3]
    
68.         <li style="width:58%"><a href="{url}" target="_blank"><img height="288" alt="{title}" src="{pic}" width="100%"> <span></span><em>{picnum}張</em> </a></li>
    
69.          [/index]
    
70.     </ul>
    
71.         <ul class="moqu8_com_24_pics-list-b moqu8_com_24_fl">
    
72.                      [index=4]
    
73.                 <li style="width:98%"><a href="{url}" target="_blank"><img height="194" alt="{title}" src="{pic}" width="100%"> <span></span><em>{picnum}張</em> </a></li>
    
74.         [/index]
    
75.         [index=5]
    
76.         <li style="width:98%"><a href="{url}" target="_blank"><img height="434" alt="{title}" src="{pic}" width="100%"> <span></span><em>{picnum}張</em> </a></li>
    
77.         [/index]
    
78.     </ul>
    
79.         <ul class="moqu8_com_24_pics-list-c moqu8_com_24_fl" style="float:right;">
    
80.                      [index=6]
    
81.                 <li style="width:98%"><a href="{url}" target="_blank"><img height="434" alt="{title}" src="{pic}" width="100%"> <span></span><em>{picnum}張</em></a> </li>
    
82.         [/index]
    
83.         [index=7]
    
84.         <li style="width:98%"><a href="{url}" target="_blank"><img height="194" alt="{title}" src="{pic}" width="100%"> <span></span><em>{picnum}張</em> </a></li>
    
85.         [/index]
    
86.     </ul>
    
87. </div>

復制代碼

從某網站下載的圖片DIY   ，但是修改后  顯示效果不理想，求IT大佬幫忙修改一下。修改完跟帖，方便各位站長。

xilushequ

6666666666666

xilushequ