Discuz X2.5仿厦门小鱼网论坛首页焦点切换[原创]

楼主改造的也不错

2xinxin 发表于 2011-6-15 23:22
在DZ2.0下安装不成功，切换的背景图显示不错了，切换那边鼠标移上去就会跳开

2.0的版本用下面的方法，把图片放在根目录image下，没有自己建文件夹。
代码如下
<div class="ndsns_hot">

<style type="text/css">

.ndsns_hot { background:#FFF; margin:8px 0; width:958px; border:1px solid #DADADA }

.ndsns_hot_title { background: url(image/ndsns_hot01.png) repeat-x scroll 0 0 transparent; border-bottom: 3px solid #E7001C; height: 30px; }

.ndhot_t_left { display: inline; float: left; padding-left: 20px; margin-top: 5px; }

.ndhot_t_left span { display:block; background:#F3001D; border: 1px solid #E7001C; color: #FFF; font-size: 12px; height: 24px; line-height: 24px; text-align: center; width: 70px; }

.ndhot_t_right { display: inline; float: right; padding-right: 15px; padding-top: 5px; }

.ndhot_t_right ul { list-style-type: none; margin: 0; padding: 0; }

.ndhot_t_right li { display: inline; float: left; margin-left: 10px; }

.ndhot_t_right li a { color: #035F9A; display: block; font-size: 12px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; width: 65px; }

.ndhot_t_right li a:hover { text-decoration: none; }

.ndhot_t_right li a.ndsns_hov { background: url("image/ndsns_hot02.png") no-repeat scroll 0 0 transparent; color: #FFFFFF; }

.ndsns_hot_con { padding:2px; overflow:hidden; height:222px;}

.ndhot_con_left { width:330px; height:220px; float:left; overflow:hidden }

.ndhot_con_right { width:620px; float:right;}

.ndhot_con_right .ndsns_hid { display:none; }

.ndhot_con_right ul{ margin-top:7px;}

.ndhot_con_right li { float:left; width:49%; font-size:14px; overflow:hidden; height:30px; line-height:30px; }

.ndhot_con_right li a { color:#666; }

.ndhot_con_right li span a { color:#197CBD; }

.ndhot_con_right li span.spe { font-family:'宋体'; font-weight:bold; }

.ndhot_con_right .con_hot_spe{ width:185px; float:left; padding:7px 10px 0; }

.ndhot_con_right dt { background:url(image/ndsns_hot03.png) repeat-x 0 0; border: 1px solid #D3D3D3; color: #666; font-size: 12px; line-height: 18px; text-align: center; }

.ndhot_con_right dd{ background:url({image/ndsns_hot_icon.png) no-repeat scroll 3px 6px; padding-left:16px; height:20px; line-height:20px; border-bottom:1px dashed #069; font-size:12px;}

.ndhot_con_right dd span{ float:right; color:#999;}

.ndhot_con_right dd a{ color:#127BBF; text-decoration:none;}

</style>

  <script type="text/javascript">

          function showTab(name,cur,n){

                for(i=1;i<=n;i++){

                          var menu=document.getElementById(name+i);

                        var con=document.getElementById("con_"+name+"_"+i);

                          menu.className=i==cur?"ndsns_hov":"";

                          con.className=i==cur?"":"ndsns_hid";

                }

          }

  </script>

  <div class="ndsns_hot_title">

    <h3 class="ndhot_t_left"><span>焦点图片</span></h3>

    <ul class="ndhot_t_right">

      <li><a id="hot1" onmouseover="showTab('hot',1,7)" class="ndsns_hov" >今日热门</a></li>

      <li><a id="hot2" onmouseover="showTab('hot',2,7)">最新主题</a></li>

      <li><a id="hot3" onmouseover="showTab('hot',3,7)">最新回复</a></li>

      <li><a id="hot4" onmouseover="showTab('hot',4,7)">活动看台</a></li>

      <li><a id="hot5" onmouseover="showTab('hot',5,7)">便民向导</a></li>

      <li><a id="hot6" onmouseover="showTab('hot',6,7)">新手教程</a></li>

      <li><a id="hot7" onmouseover="showTab('hot',7,7)">活跃会员</a></li>

    </ul>

  </div>

  <div class="ndsns_hot_con">

    <div class="ndhot_con_left"><!--[diy=ndsns01]-->

      <div id="ndsns01" class="area"></div>

      <!--[/diy]--></div>

    <div class="ndhot_con_right">

      <div id="con_hot_1">

        <!--[diy=ndsns02]-->

        <div id="ndsns02" class="area"></div>

        <!--[/diy]-->

      </div>

      <div id="con_hot_2" class="ndsns_hid">

        <!--[diy=ndsns03]-->

        <div id="ndsns03" class="area"></div>

        <!--[/diy]-->

      </div>

      <div id="con_hot_3" class="ndsns_hid">

        <!--[diy=ndsns04]-->

        <div id="ndsns04" class="area"></div>

        <!--[/diy]-->

      </div>

      <div id="con_hot_4" class="ndsns_hid">

        <!--[diy=ndsns05]-->

        <div id="ndsns05" class="area"></div>

        <!--[/diy]-->

      </div>

      <div id="con_hot_5" class="ndsns_hid">

        <!--[diy=ndsns06]-->

        <div id="ndsns06" class="area"></div>

        <!--[/diy]-->

      </div>

      <div id="con_hot_6" class="ndsns_hid">

        <!--[diy=ndsns07]-->

        <div id="ndsns07" class="area"></div>

        <!--[/diy]-->

      </div>

      <div id="con_hot_7" class="ndsns_hid">

        <div class="con_hot_spe">

          <!--[diy=ndsns08]-->

          <div id="ndsns08" class="area"></div>

          <!--[/diy]-->

        </div>

        <div class="con_hot_spe">

          <!--[diy=ndsns09]-->

          <div id="ndsns09" class="area"></div>

          <!--[/diy]-->

        </div>

        <div class="con_hot_spe">

          <!--[diy=ndsns10]-->

          <div id="ndsns10" class="area"></div>

          <!--[/diy]-->

        </div>

      </div>

    </div>

  </div>

</div>
复制代码
其实就是简单的把默认图片文件夹换个地方就可以了，我不明白为什么在2.0中 这个不能识别到文件。

slubbs 发表于 2011-6-16 13:36
2.0的版本用下面的方法，把图片放在根目录image下，没有自己建文件夹。
代码如下

嗯  昨晚发现是图片链接问题了，我把背景图片改成绝对地址就可以了

dz2.0不能使用呀~

yukings 发表于 2011-6-16 14:00
dz2.0不能使用呀~

试试30楼给的解决办法

也不行呀 我试了

slubbs 发表于 2011-6-16 14:05
试试30楼给的解决办法

我试了还不行呀

好像是没有css标签文件

yukings 发表于 2011-6-16 14:56
好像是没有css标签文件

我刚用了都可以啊~http://www.ahslu.com/

slubbs 发表于 2011-6-16 15:39
我刚用了都可以啊~http://www.ahslu.com/

你的也不显示呀？
能不能把你的首页页面 Discuz.htm发给我 我看下？