【有图有说明】教你DIY自己漂亮的论坛！第8课（继续上一课的DIY教程帖）2011.4.1

前言：好久没更新教程了。X2快出了，我也本地装上了玩了一下DIY，没多大变化，我的教程同样适用X2！
之前的教程链接如下（我的DIY教程帖都会在这首发，然后再在官方发的！之前的官方教程。被官方收录在【模板教程】区的教程正在审核中！所以很多人都看不到了。。。为什么审核？因为涉嫌广告，哈哈！浏览量很高，回复也多，影响力之深远是前所未有的DIY新手教程帖，可惜了，你们再也看不到了，不过下面的链接可以带你重温我2010年末的经典教程！ - - ！）：
==========================课程说明===================
DIY课程：第1-4课：https://discuz.dismall.com/thread-1919164-1-1.html
DIY课程：第5-6课：在1-4课的帖子中的二楼！
DIY课程：第7课（可略过）：https://discuz.dismall.com/thread-1936943-1-1.html
DIY课程：第8课（很用心讲哦，推荐）：在此帖
DIY课程：第9课（X2正式版DIY心得）：https://discuz.dismall.com/thread-2289691-1-1.html
======================================================
更多DIY教程，请关注：http://www.bbww.cn/forum-80-1.html【北部湾网】的【网站建设】专版！谢谢您的支持！你的支持是我继续更新教程的动力！认为好就顶，顶的人多我就会再继续写，没人顶就算了！因为没人需要，再写也没意思！
============================================
开始上课，以下全由图文说明，其实光看图片就能会了。只要你悟性够高，不用看文字都懂了，注意看箭头就OK。

先上我论坛的DIY风格图片演示：（赏脸的点这里的链接给我送个IP，看真实的演示最好）http://www.bbww.cn/forum.php


图片有点长哈，下面我们先来分析一下DIY制作方法！看下图！
图一：分析

图一说明：1、先看红框框住的，我分析一下！先拉一个100%的框架，再拉一个1：1的框架，再拉多一个1：1的框架放在左边，同样也拉一个1：1的框架到右边。这样就形成了四个容器（我也不懂用什么语来表达了，就是可以放四个调用内容的东东，我在这说成容器吧 - - ！）
                  2、那个蓝框框住的。就是上面1所说的100%的框架，拉出来这个后你要再拉多一个100%的框架放进去，然后再继续以上的操作，要不你先拉好的1：1框架到时再拉100%的架框你很难放对位置，我也不懂怎么说了，放哪个框架先都有讲究，放对了一次性搞定，放不对的你再拉来放，很难放进去。哈哈，到时你可以试试看。看图中的框架布置理解吧。
                  3、那个绿色框架，很简单。我就不说了。看图就懂了！

图二：图片调用设置

图二说明：1、说一下放幻灯片，先拉【附件模块】放到拉好的四个容器中的第一个里！拉下后会出现【属性】选择好显示方式为【附件图片幻灯展示】再设置好高宽，为与周边调用协调，所以我设置了图中的宽度好高度，这样才与旁边的对齐，再往下看边框，可以不设置，我习惯设置为0。你设不设无所谓，不影响。但像100%框架、1：1框架，此类框架一定要设置为0，要不就会默认显示边框线！且还要设置外边距为0（意思为最大化）
                 2、再补充一点，我想你注意到了，你看到了这图片的样式设置中的【外边距】中的【上】设置为【-1】是负一，你看到这里或许会问：这是为什么呢？这个，你可以试下不设置，那样你就和旁边的调用对不齐了，差1PX，肉眼看不出，你要把你的眼球贴到屏幕前才看出来，你可以用QQ截图功能看看（使用方法请参阅我之前的教程）
                3、再往下看仔细看教程的人不难发现，【内边距】中的【上】为14？怎么不是整数10？或5或别的，怎么偏偏是14？？？难道楼主喜欢14这数字？？？我只能说你不仔细看教程了，请参阅以上说明，为了与周边调用对齐，整体效果！你又T~M~D【右】设置【-10】负十？为什么不是正十或0？？？我只能说你N~N~D没仔细看我教程，这个请参阅我以上说明，再远点来说请参阅我之前的程程，我就不再解释了！

图三：帖子调用设置

图三说明：不好意思，在写说明前发现图片中有遗漏很多，我就用文字说明吧，先说图片上框住的！
                  1、拉个【帖子模块】到容器2、3、4中，当然一个一个来，设置都是一样的，拉下来时会自动弹出【属性】显示样式中为什么是自定义的？你会发现你那里没有这个，哈哈，何为【自定义模块】？就是自己写的喽，请看图中的箭头，看【模块模板】点进去，里面有语法和语句，自己写吧。我写的只是在原基础上多加了下划虚线，代码如下，你可以直接复制进去就OK了！

1. <div class="module cl xl xl1">
   
2. <ul>
   
3. [loop]
   
4. <style>
   
5. .red-underspanne{
   
6. border-bottom:dashed 1px #B6BBC1;
   
7. display:block;
   
8. }
   
9. </style>
   
10. <li class='red-underspanne'><a href="{url}" title="[{author}]发表于{dateline}[{forumname}]：{title}[{replies}复/{views}阅]"{target}> 　 {title}</a></li>
    
11. [/loop]
    
12. </ul>
    
13. </div>

复制代码

                2、。。。。我真2。。。1说了，遗漏了很多东东，不截图我还真说不清楚，我再重截一下图传上来再说吧，请稍等！
                <柔柔了眼睛>来了，请再看下图！
图三SP1：被遗漏者

图三SP1说明：1、调用内容的样式设置，如图所示，哈哈，你是不是看到了什么？是不是你从没见过的设置方法？对，没错，你没看错，【字体】为何设置13？【链接】为何设置12?不设置不是默认12的吗？我只能说，这是我的习惯，你可以不设置。但字体一定要设置比你链接的要大1PX（只能大1PX.大2PX在IE6下就错位了）。你也许会问：这是为什么呢？我只能说，你可以成为下一个小沈阳！嘿嘿~ 只是为了美观，这样能使【行间距】高一点，看起来不那么拥挤，为了美观，当然你个人没什么审美观的话，你可以不设置。
                       2、内边距的设置，我就不再重复了，一切为了对齐，对齐为了美观！
                       3、那个1.2.3.4.5.排行的为何要用背景图片来显示？把<ul>改成<ol>不就完了？你可以试下这样做。个人爱好。

图四：发帖排行设置！

图四说明：1、拉个【会员类】的【会员模块】到100%框架中的100%框架（听得是不是不太明白？听不明白就对了，你全明白了我以后还写什么教程？那我还混个屁呀） - - ！
                  2、同样是自定义模块，为何老自定义，当然你可以不自定义，那就是直直往下排的喽，想要横排就要自定义。这个不需要自己写代码，在原基础上改就OK了！把前面的<li>去掉就OK了，后面的那个也要去掉！
                  3、那个【发帖排行】是个背景图片！设置方法请看图所示！高手莫笑，这是新手的DIY方法！

图五：最后一张图啦，真累呀，写了大半个小时了，我先洗个澡，吃杯茶泡个妞再继续！手软了。<柔了柔手>最后一张了。不容易呀！ - - ！

我来也，继续说明！图五所示：1、都为【展示类】的【静态模块】
                                                 2、右边的是广告，请选择【图片模块】或者为了方便你选择那个【站点广告】也行，后台广告那管理。我个人喜欢【图片模块】这种。因为是在前台可视化操作，要是广告太多，后台太乱，都不知道哪个是哪个。。。。当然你记性好的话能记住！反正我是记不住！有说明都没用，我记性差，老记不住我的名字叫陈思雨！哎！
                                                 3、左边的便民信息，代码如下（图片自己去我那右键保存到你本地上，说白了，偷，你总会吧？哈哈），自己研究。最简单的HTML，要是都不会你不适合做站长（其实我也没认全，哈哈）

1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
   
2.   <tr>
   
3.     <td align="center"><a href="http://www.bbww.cn/forum-90-1.html" target="_blank"><img src="/bbww/diy/bbs12.png"></a></td>
   
4.     <td align="center"><a href="http://www.bbww.cn/forum-91-1.html" target="_blank"><img src="/bbww/diy/bbs13.png"></a></td>
   
5.     <td align="center"><a href="http://www.bbww.cn/portal.php" target="_blank"><img src="/bbww/diy/bbs14.png"></a></td>
   
6.     <td align="center"><a href="http://www.bbww.cn/userapp.php" target="_blank"><img src="/bbww/diy/bbs15.png"></a></td>
   
7.     <td align="center"><a href="http://www.bbww.cn/portal-list-catid-1.html" target="_blank"><img src="/bbww/diy/bbs16.png"></a></td>
   
8.     <td align="center"><a href="http://www.bbww.cn/portal-list-catid-2.html" target="_blank"><img src="/bbww/diy/bbs17.png"></a></td>
   
9.     <td align="center"><a href="http://www.bbww.cn/portal-list-catid-3.html" target="_blank"><img src="/bbww/diy/bbs18.png"></a></td>
   
10.     <td align="center"><a href="http://www.bbww.cn/home.php" target="_blank"><img src="/bbww/diy/bbs19.png"></a></td>
    
11.     <td align="center"><a href="http://www.bbww.cn/home-magic.html" target="_blank"><img src="/bbww/diy/bbs20.png"></a></td>
    
12.     <td align="center"><a href="http://www.bbww.cn/home-medal.html" target="_blank"><img src="/bbww/diy/bbs21.png"></a></td>
    
13.   </tr>
    
14.   <tr>
    
15.     <td align="center"><a href="http://www.bbww.cn/forum-90-1.html" target="_blank">我在东兴</a></td>
    
16.     <td align="center"><a href="http://www.bbww.cn/forum-91-1.html" target="_blank">上思生活</a></td>
    
17.     <td align="center"><a href="http://www.bbww.cn/portal.php" target="_blank">全站首页</a></td>
    
18.     <td align="center"><a href="http://www.bbww.cn/userapp.php" target="_blank">好玩游戏</a></td>
    
19.     <td align="center"><a href="http://www.bbww.cn/portal-list-catid-1.html" target="_blank">人才市场</a></td>
    
20.     <td align="center"><a href="http://www.bbww.cn/portal-list-catid-2.html" target="_blank">二手交易</a></td>
    
21.     <td align="center"><a href="http://www.bbww.cn/portal-list-catid-3.html" target="_blank">房产频道</a></td>
    
22.     <td align="center"><a href="http://www.bbww.cn/home.php" target="_blank">我的家园</a></td>
    
23.     <td align="center"><a href="http://www.bbww.cn/home-magic.html" target="_blank">道具商城</a></td>
    
24.     <td align="center"><a href="http://www.bbww.cn/home-medal.html" target="_blank">勋章中心</a></td>
    
25.   </tr>
    
26. </table>

复制代码

好了。全部搞定，好累呀！！！！真累，看了一下时间，吓一跳，写了一个小时零7分钟！喜欢就顶，多人顶我会再出教程，我的教程很简单，适合新手，高手就别看了。不需要你会任何代码，你只要懂中文就能成为DIY高手。

更多纯DIY教程，请到http://x.bbww.cn （说了这么多，点一下送个IP总行吧？做一下广告也没事吧？）本人目前无业，接受纯DIY订制，只DIY，因为便宜，几百块，想要DIV+CSS做的风格那个就不简单了。哈哈。
有需要帮忙DIY风格的请加本人QQ：233051820【或点这里立即在线咨询】
  本人写什么都从不检查的。如有错别字请回复告知，如有不懂请跟帖提出，本人有时间就回（一般情况下，说通俗点就是不出任何意外的情况下会回复你的）

2011年4月1日—祝大家愚人节快乐

楼主非常给力

abcdyt2010 发表于 2011-4-1 00:36
兄第能出个本地装上了玩了一下DIY的教程吗

本地和空间装的DIY有什么不一样吗？

这个很给力！！辛苦！！

新人支持思雨教程 受惠了

你好
可以和贵站做个友连吗？
本站地址
www.uucu.net
惠东论坛
快照隔日更新
交换友情连接联系QQ81731659

在顶一下

Bad Request (Invalid Hostname)

gg81 发表于 2011-4-1 00:54
你好
可以和贵站做个友连吗？
本站地址

不好意思，我们站可能又要重新搞过。暂时不接受任何友情链接了。。。得稳定了再说吧~不好意思！