親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦!(包涵精彩圖片、文字詳情等)請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com
您需要 登錄 才可以下載或查看,沒(méi)有賬號(hào)?立即注冊(cè)
x
以下發(fā)布的作品,由互聯(lián)網(wǎng)收集若無(wú)意侵犯您了的版權(quán),請(qǐng)您聯(lián)系我們。 | 模板名稱 : css3動(dòng)感DIY模塊 | 模板作者 : 風(fēng)亂流年 | 語(yǔ)言編碼 : discuz! X2.5 Discuz! X2.0 Discuz! X1.5 Discuz! X3.0/X3.1 | 適用版本 : GBK簡(jiǎn)體 UTF8簡(jiǎn)體 BIG5繁體 UTF8繁體 | 模板色系 : 紅 橙 黃 綠 藍(lán) 紫 黑 灰 |
操作:
門戶-----》模塊管理--------》添加
001.png (36.05 KB, 下載次數(shù): 55)
下載附件
2014-12-19 15:11 上傳
第二步:
200.jpg (152.38 KB, 下載次數(shù): 61)
下載附件
2014-12-19 15:14 上傳
代碼:命名:1+8圖片展示
之后呢,把下面的代碼復(fù)制到這個(gè)紅色的框框里面,提交就可以了
- 調(diào)用代碼:
- <style>
- * { padding:0; margin:0 }
- ul, li { list-style: none; }
- a { color: #333; text-decoration: none; }
- .clear { clear: both; }
- .photo { margin: 10px auto 0px; width: 980px; }
- .photo .pic_d { float: left; height: 210px; width: 200px; position:relative; }
- .pic_d .test { position: absolute; width: 210px; height:30px; font-size: 13px; line-height: 30px; text-align: center; top:180px; background: #000000; color: #FFFFFF; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }
- .photo .pic_n { float: right; width: 772px; }
- .photo .pic_n .pic_div { float: left; width: 183px; margin-left: 10px; margin-bottom: 10px; position:relative; }
- .photo .pic_n .test { position: absolute; width: 183px; height:30px; font-size: 13px; line-height: 30px; text-align: center; top:70px; background: #000000; color: #FFFFFF; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }
- .test a { color: #FFF; text-decoration: none; }
- .test a:hover { color: #FFF; text-decoration: underline; }
- .imgft:hover img { opacity: 0.7 ;transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- -ms-transform: rotate(360deg);}
- .photo img{transition: All 0.4s ease-in-out;
- -webkit-transition: All 0.4s ease-in-out;
- -moz-transition: All 0.4s ease-in-out;
- -o-transition: All 0.4s ease-in-out;}
- </style>
- <div class="photo">
- [index=1]
- <div class="pic_d"><span class="test"><a href="{url}">{title}</a></span><a href="{url}" class="imgft"><img src="{pic}" width="210" height="210" border="0" /></a></div>
- [/index]
-
- <div class="pic_n">
- [loop]
- <div class="pic_div"><span class="test"><a href="{url}">{title}</a></span><a href="{url}" class="imgft"><img src="{pic}" width="183" height="100" border="0" /></a></div>
- [/loop]
- </div>
- <div class="clear"></div>
- </div>
復(fù)制代碼 前臺(tái),DIY---100%框架----帖子模塊----1+8-----屬性自定義---9圖片
選擇1+8圖片展示即可。
效果如下:
QQ截圖20141219151508.jpg (79.35 KB, 下載次數(shù): 54)
下載附件
2014-12-19 15:16 上傳
道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題!
如果您是道勤主機(jī)用戶,那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信:q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服!
如果您不是我們的客戶也沒(méi)問(wèn)題,點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后,我們?yōu)槟赓M(fèi)進(jìn)行無(wú)縫搬家服務(wù),讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)! |