教您DIY做自己的站之第9课：新手需要注意的DIY细节！

AD：新版DIY风格，演示：http://www.liuzhou520.com/ 适用于X2.5及以后的更新X3，有需要请留言联系，或点这里查看：http://www.liuzhou520.com/forum.php?mod=viewthread&tid=358，谢谢支持！

===========================索引================================
1-7课教程（X1.5的）：https://discuz.dismall.com/thread-1919164-1-1.html
第8课教程（X2RC版的）：https://discuz.dismall.com/forum.php?mod=viewthread&tid=2109177
==============================================================
以下是第9课（X2正式版的教程）：教您DIY做自己的站之第9课：新手需要注意的DIY细节！
==============================================================
细节一：废物利用，将无用的【调用代码】利用起来！


如上图中所示：先说下旁边蓝色字的【点评语】是怎么做到的？请看如下调用代码，如下图中所示：

1. <div class="module cl xl xl1">
   
2. <ul>
   
3. [loop]
   
4. <li><em><a href="{url}"{target}><font color=#1D50A1>{sortname}</font></a></em><a href="{typeurl}"{target}><font color=#F54100>[{typename}]</font></a> <a href="{url}" title="{title}"{target}>{title}</a></li>
   
5. [/loop]
   
6. </ul>
   
7. </div>
   

复制代码

请看以上代码，图中的红框框住的代码：{sortname}即是分类信息名称，分类信息我们一般很少用到，假如您不是调用分类信息的话，就意味着此项空出来了，何必浪费呢？完全可以利用起来！那如何应用？作为一个地方站，首页的帖子都是推送的吧，让其自动更新的话不太好，因为我现在说的是点评语，肯定要版主加工后才会显示，所以就将无用的分类信息利用起来！请看下图的推送教程：

选择好一篇你认为好的帖子，进入到帖子拉到一楼的下面，选择【推送】如上图中所示，再看下图的推送页面：

如上图所示，点击【[推送]首页-聚焦-1】进入到推送主页面（在这里说明一下，这些命名我都起好名字的，当您创建DIY模块时，X2会强制您输入【模块标识】即名称，否则无法创建！名字随便起，只要您记住是哪个位置的DIY模块就OK！

自己看上图理解其意思，推送的主题，无论是【主题分类】【帖子标题】【链接】【分类信息】等，你看到的都可以修改您想要的，还可以给标题加粗及上色！请看上图箭头所示，我就不多说了！在此，此注意细节教程完成，请看下一细节教程！

细节二：完美利用【自定义HTML】会点HTML也能把站做得漂漂亮亮！（不会HTML请百度一下，你就知道）

上图中所示，将以下代码复制进去你就明白！并不是什么插件，你在我站（www.bbww.cn）的所有风格都是DIY，并非板模或则是插件，完全人工一个一个框架拉下来制作而成的！
注明：（所有风格都是DIY，包含其它频道，如招聘求职，购物街，房地产等，我只装了X2和XPLUS（XPLUS只是投票系统，与DIY无关）之外没再装任何别的东东，当然还有些好玩的插件，但这和我DIY无关）

1. <div style="line-height:24px;">
   
2. <p><a href="http://bbs.bbww.cn/thread-5520-1-1.html" target="_blank"><b>摩托罗拉Defy me525</b></a></p>
   
3. <p><a href="http://bbs.bbww.cn/thread-5520-1-1.html" target="_blank"><img src="ad/tg.png" width="205" height="145" style="padding: 1px; border: 1px solid #CCC; background: #FFF;" ></a></p>
   
4. <p><font color=#777777>原价：</font><font color=#333333><b>￥2100</b></font><font color=#777777> 元；折扣：</font><font color=#F54100><b>9.3</b></font> <font color=#777777>折</font></p>
   
5. <p><font color=#FF0000><font size="5px"><b>￥1950.00</b></font></font>
   
6. &nbsp;&nbsp;&nbsp;<a href="http://bbs.bbww.cn/thread-5520-1-1.html" title="点击参加团购" target="_blank"><img src="template/bbww/common/diyimg/sy/sy10.png" onmouseover="this.src='template/bbww/common/diyimg/sy/sy11.png'" onmouseout="this.src='template/bbww/common/diyimg/sy/sy10.png'"></a></p>
   
7. </div>
   
8. <SPAN id=span_dt_dt></SPAN>
   
9. <SCRIPT language=javascript>
   
10. <!--
    
11. //document.write("");
    
12. function show_date_time(){
    
13. BirthDay=new Date("7/30/2011 22:22:22");//【月/日/年；时:分:秒】
    
14. today=new Date(); var span_dt_dt = document.getElementById("span_dt_dt");
    
15. timeold=(BirthDay.getTime()-today.getTime());
    
16. if(timeold<0)
    
17. {
    
18. span_dt_dt.innerHTML="团购结束！请关注下次团购！";
    
19. return;
    
20. }
    
21. window.setTimeout("show_date_time()", 1000);
    
22. sectimeold=timeold/1000
    
23. secondsold=Math.floor(sectimeold);
    
24. msPerDay=24*60*60*1000
    
25. e_daysold=timeold/msPerDay
    
26. daysold=Math.floor(e_daysold);
    
27. e_hrsold=(e_daysold-daysold)*24;
    
28. hrsold=Math.floor(e_hrsold);
    
29. e_minsold=(e_hrsold-hrsold)*60;
    
30. minsold=Math.floor((e_hrsold-hrsold)*60);
    
31. seconds=Math.floor((e_minsold-minsold)*60);
    
32. span_dt_dt.innerHTML="离线束还有"+daysold+"天 "+hrsold+"小时 "+minsold+"分钟 "+seconds+"秒 "+"
    
33. " ;
    
34. }
    
35. show_date_time();
    
36. //-->
    
37. </SCRIPT>
    

复制代码

此细节不再多说，再继续看下一细节！

细节三：DIY时框架的标题无法是正常字体（默认是粗体的）如何解决？
如下图所示：你能用纯DIY把字体变细吗？能的话就略过此教程！不能就乖乖听我道来！

分析一下，看下图所示！

用HTML代码来实践，详情请看下图！

为何要加一个长宽为1的图片（该图片必须为透明的图片，大小都为1）为何？其实我想独立来讲这段，不过还是算了，以我目前的表达能力，三言两语说不清，只好一句话代过，为何要1X1大小的图片，我在这称之为DIY的小BUG（在此也希望官方解决一下）什么BUG呢？听我分析下没此图片和有此图片的后果！
无此透明小图片的后果：当您下面的调用上边框是10时，则会默认将其顶到下面10，是根据您下面的边距而改变（我也不懂如何说，我想您也听不明白，哎呀呀）总之一句话，没它不行！
有此透明小图片的作用：解决因下面的框架的样式边框改变而改变的问题，不会再有影响！好了，此步就说到这，你可以试下无图片的后果，请看下面的标题如何搞细的！

看上面所示，代码看下面，自己研究，我就不多说了，以下代码意思是一部份文字在左，一部份靠右，就这么简单。

1. <table width="100%"><tr width="100%">
   
2.         <td align="left" width="20%"><img src="template/bbww/common/diyimg/fc/fc24.png" style="position:relative; top:6px;">&nbsp;<a href="http://bbs.bbww.cn/forum.php?mod=forumdisplay&fid=55&filter=typeid&typeid=87" target="_blank"><b>装修设计</b></a></td>
   
3.      <td width="80%" align="right">
   
4. <a href="http://bbs.bbww.cn/forum.php?mod=forumdisplay&fid=75&filter=typeid&typeid=124" target="_blank">家居街</a>&nbsp;&nbsp;
   
5. <a href="http://bbs.bbww.cn/forum.php?mod=forumdisplay&fid=56&filter=typeid&typeid=50" target="_blank">促销</a>&nbsp;&nbsp;
   
6. <a href="http://bbs.bbww.cn/forum.php?mod=forumdisplay&fid=56&filter=typeid&typeid=178" target="_blank">打折</a>&nbsp;&nbsp;
   
7. <a href="http://bbs.bbww.cn/forum.php?mod=forumdisplay&fid=55&filter=digest&digest=1&typeid=87" target="_blank">设计欣赏</a></td>
   
8. </tr></table>
   

复制代码

假如你实在懒得搞，请看下图所示，直接用图片方式将字体变小。

在此，第9课讲解完成，如果喜欢请顶，多人顶的话我会再继续出教程！再友情提醒一下：
===========================索引================================
1-7课教程（X1.5的）：https://discuz.dismall.com/thread-1919164-1-1.html
第8课教程（X2RC版的）：https://discuz.dismall.com/forum.php?mod=viewthread&tid=2109177
==============================================================

AD：新版DIY风格，演示：http://www.liuzhou520.com/ 适用于X2.5及以后的更新X3，有需要请留言联系，或点这里查看：http://www.liuzhou520.com/forum.php?mod=viewthread&tid=358，谢谢支持！

xin_ruoli 发表于 2011-8-1 09:31
占楼解答疑问，有不懂的尽管问，有问必答，谢谢支持！

不错 支持下

占楼解答疑问，有不懂的尽管问，有问必答，谢谢支持！

不错，学习了！

楼主的网站的。
这个导航可以分享下吗？

非常不错
网站进步很大啊！

请问楼主，loop循环里面如何使用 $i++ 来获取$i的值啊

前排支持下

neol123 发表于 2011-8-1 10:45
楼主的网站的。
这个导航可以分享下吗？

不可以，抱歉~

Tigerlover 发表于 2011-8-1 11:50
请问楼主，loop循环里面如何使用 $i++ 来获取$i的值啊

？完全不知所云，高手，膜拜下！

xin_ruoli 发表于 2011-8-1 15:01
？完全不知所云，高手，膜拜下！

就是获取是第几条记录，那个数字