学习Discuz! X3.2记录:又一个幻灯的代码
2016-02-23 09:41
309 查看
<style> .bi_ws { float:left; width:450px; height:270px; background-color:#999999; overflow:hidden; }/*幻灯片的整体大小*/ .pi_cx { display:inline; position:relative; float:left; width:337px; height:258px; overflow:hidden; margin:6px 0 6px 6px; }/*大图片区域样式*/ .pi_cx div img { width:337px; height:258px; }/*大图片的大小*/ .bi_ws_op { margin-left: 8px; position:absolute; left:5; bottom:0px; width:322px; height:70px; color:#FFF; }/*字幕区定义*/ .bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:337px; height:78px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }/*标题区背景 透明度50%*/ .bi_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; }/*文章标题样式*/ .bi_ws_op h2 a:hover { text-decoration:none; }/*文章标题鼠标经过样式*/ .bi_ws_btn { width:106px; height:270px; float:right;}/*右侧缩略图区域样式*/ .bi_ws_btn div {float:left; width:106px; height:60px; cursor:pointer; margin:6px 0px 0; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70); }/*右侧缩略图区域中每个缩略图区域样式*/ .bi_ws_btn img { width:90px; height:54px; margin:2px 7px 0 ; border:1px solid #ffffff; }/*缩略图样式(非焦点缩略图)*/ .bi_ws .bi_ws_btn .on{ background:url(/forum/static/image/common/1-1.png) no-repeat 0 0; width:103px; height:60px; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦点缩略图样式*/ .bi_ws_right { float:right; width:490px;} </style> <div class=" bi_ws slidebox"> <div class="pi_cx slideshow"> [loop] <div> <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a> <div class="bi_ws_opdiv"></div> <div class="bi_ws_op"> <ul> <li> <h2><a href="{url}"{target}>{title}</a></h2> <p><span style="font-size: 12px">{summary}</span></p> </li> </ul> </div> </div> [/loop] </div> <div class="bi_ws_btn slidebar" mevent="mouseover" > [loop1] <div><img src="{pic}" /></div> [/loop1] </div> <script type="text/javascript">runslideshow();</script> </div>
这个直接编辑前面的模块模板“DIY幻灯片BY_CBQ”代码为上面的代码即可。图片宽度设置为450×270。
原来代码的地址:http://www.discuz.net/thread-2499609-1-1.html
相关文章推荐
- 深入理解C语言
- JAVA_面向对象_练习_封装_02_EncapsulationDaemon02.java
- JAVA_面向对象_练习_封装_02_EncapsulationDaemon02.java
- C++中define与const的区别
- Struts2动态方法调用
- 常用代码备份--字符串处理
- 【转】java中三个类别加载器的关系以及各自加载的类的范围
- JAVA_面向对象_练习_封装_01_EncapsulationDaemon01.java
- JAVA_面向对象_练习_封装_01_EncapsulationDaemon01.java
- C语言中 time函数和difftime函数
- PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
- C/C++基础——inline 与 宏
- c语言基础学习
- JRE与JDK的区别
- IOC
- C/C++关键字 typedef 的使用说明
- matlab 小知识点
- delphi开发中的菜单及权限
- Heredoc.php
- C# winform程序怎么打包成安装项目(图解)