【DIY图解 for X1.5】教你怎么DIY做漂亮的风格~【已更新到第9课2011-8-1】
本帖最后由 xin_ruoli 于 2013-1-3 20:01 编辑AD：新版DIY风格，演示：http://www.liuzhou520.com/ 适用于X2.5及以后的更新X3，有需要请留言联系，或点这里查看：http://www.liuzhou520.com/forum.php?mod=viewthread&tid=358，混口饭吃，谢谢支持！
注明：假如你已看过前三课，请直接看二楼的第四课第五课。
下面教几个本人DIY的心得！新手请仔细看哈，不懂请跟帖提问，有问必答！
==========================课程说明===================
DIY课程：第1-4课：在此帖此楼
DIY课程：第5-6课：在此帖二楼
DIY课程：第7课（可略过）：https://discuz.dismall.com/thread-1936943-1-1.html
DIY课程：第8课（很用心讲哦，推荐）：https://discuz.dismall.com/thread-2289691-1-1.html
DIY课程：第9课（X2正式版DIY心得）：https://discuz.dismall.com/thread-2289691-1-1.html
======================================================
第一课，先教大家DIY72泾帖子（如下图）
第1步：进入版块内点击右上角的DIY（如下图，注：静态化无法DIY，请取消静态化）
第2步：拉好框架（先放3:1的，再将后两个框架放入其中）如下图所示（下面说的都无需再拉多个框架，这一步已把该拉的红框都拉好了）：
第3步：设好红框（就是指向出现红色的框架，在这我将其称为红框）的样式参数（如下图，对比看说明）
图中1：边框，请将默认的【大小】改成0（因为这样不会显示边框线，不选则会显示官方默认的边框线）
图中2：边框一定要为0，这样是最大化，0和不填是不一样的！
图中3：边框一定要为10，这样是和下方框体的距离，若填0则会连在一起！
图中4：此处请一定不要选择【无边框框架】否则你用TAB框架则在标题加链接时会成白色，留空不选即可！
第4步：先DIY右边的。请拉一个红框的框架到图中右边的框架内，然后点击样式，如图：
图中1：边框线颜色为：1PX。我用的是粉红色！根据自己的爱好选色！
图中2：上为0（但官方默认的是1PX的距离，所以该处请填0，其它的请设置为1）
第5步：红框的边框线，粉红的（如下图）
图中1：请设为4PX（想更粗请设大点）
图中2：左10PX（是与左边的框架保持10PX的距离，要不会连在一起）
第6步：拉一个论坛类的帖子模块放在上一步设置好的红框内，点样式设置参数（如下图）
图中1：链接字体，12PX是官方默认的，可以留空。后面的是字体颜色！
图中2：请选边框为0，也可以留空（这里和红框不一样，留空也不会有官方的默认边线）。
图中3：外边距设置和内边距有所不一样，自己理解，请看图中设置，假如你把图中右10PX输入到下面的内边距的话，标题就偏了~最好这样搞！
图中4：内边距的下2PX是为了对平左边框架，所以才设置为2，你可以根据右边的边框线对平（这里请善用QQ截图功能，最后我会教你如何用QQ截图进行DIY较正）
第7步：标题，我在这用的方法是不正规设置方法，主要是考虑到美化，用的是图片（看下图）
图中1：你看错了，那不是空的，是在智能ABC（我打五笔的）输入V+1这是空格白键，无字体的，但是会有字体一样，因为官方是默认无字体的话是无法设置标题的，所以用这招骗过官方！
图中2：图片路径，为不平铺！
0K，左边的DIY完成，先讲到这，顶的人多，再教你DIY另一边的~
最后说一下我DIY用到的常用工具：
1：QQ截图，我设置了快键（ALT+Q）方便截图及对齐边框，效果如下，自己理解。
2：取色器，方便实用，仿站最好工具，需要的请下载！
下载：
=====================================================
第二课：教你如何DIY左边的（郁闷，花了半小时打好的，一卡死得重打，哎，DZ的保存没用的）
效果如下：
=====================================================
第一步：点击拉好的1:1红框架的样式，出如如下图：
图中1：为了和右边的框架相符合，所以设置了4PX的边线（粉红色的）
图中2：外边距为最大化（即是0）
第二步：拉好幻灯片及主题和分割线（如下图所示）
详细说明1：幻灯片
图中1：外边距为最大化！
图中2：为了美观及与周边的框架相对齐，因此设置了非整数。
图中3：一定要减-10，否则即便你IE8正常，IE6有可能会将右边的框架顶下去（除非你图片够窄）-10是刚好减到该图片的边缘~
（*注明：请善用负数来调试在IE6.7.8下对齐的问题，这就是为什么有些新手说在IE8下正常，IE6下错位的了）
详细说明2：主题调用的样式（请选择好主题+摘要的调用方式）
出现样式后看：
图中1：18PX说明主题的标题是18PX大小的字体，颜色是橙色！
图中2：全是0是最大化，左是25表示与幻灯片相隔25PX
图中3：为了与周边的框架对齐所以设置非整数！
详细说明3：分割线（如下图）
图中1：只是为了与周边框架及上下主题对齐而设置的，你自己看着设吧！
详细说明4：标题（如下图）
图中1：并非是空，不要相信你的眼睛，这一步请参阅第一课的第七步！
完成；最后点击保存后出现下图一样的效果：
第三课：教你如何DIY广播台（效果如下）
演示：http://www.72jing.com/thread-544-1-1.html
第三课开始：=======================================
第一步：先拉好两个框架。一个100%的一个1:1的。将1:1的框架放入到100%的框架中（如图）
第二步：点击打开那个100%框架的样式，出现下图：
图中1：这是边框线，请选择1PX。颜色看自己爱好！
图中2：除下边距是10外全为0。因为要和帖子保持10PX的距离，因此下边距要填10PX。其它别填！
第三步：点击1:1框架的样式，出现下图所示：
图中1：就是淡粉红色的边线，要粗一点，所以我设置了4PX。
图中2：为何第一个是0边距，其它的是1？请参阅第一课的第4步！
图中3：请看箭头指向的，那就是DIY好后的出现在左边的热点回顾图片背景！请选为不平铺！
第四步：看下图，注意看箭头的指向，自己理解其关系！
图中1：外边距最大化。则填0
图中2：为何上是10下是0则因为你旁边还有调用帖子，在帖子的内边距下填10即可，不用两边填，所以这是0，上是10PX即是表示和上的边框线保持10PX距离。左边何是32PX？是因为左边有个【热点回顾】这个背景图片，所以得设的距离远一点，要不会挡住该背景图片，右为何是-10（负数）请参阅之前讲过的。不知在哪讲过自己看吧！
第五步：拉个调用帖子的蓝框到右边的1:1的红框中，请选回复数调用后点击该样式，如下图所示：
图中1：字体大小为14PX（请不要选13PX。就算选12PX也不要选13PX。原因是13PX在IE下和14PX差不多，但在IE8下有所不同，为了美观请在12PX或14PX两者间选择）。
图中2：最大化则是0
图中3：全离10PX。因为这里不用考虑任何对齐不对齐的问题，只有一个框架。
图中4：如何做到请看下一步说明！
第六步：调用个性化，请看清箭头指向，如图所示：
图中1：调用的代码，看不懂，请看图中2的说明！
图中2：代码变量说明。
图中3：往下拉更多！
图中4：在标题前加多个版块名称外加[ ] 括号，这是为了美观！
图中5：加多几个中文，为了知道这些数字是啥意思。。。
OK。第三课讲完。
第四课预览，请看下图：演示：http://www.72jing.com/group-index.html
注明：如果对你有用请顶一下，这样我会再出下一课的教程，没人顶的话就证明没用，所以也没必要出了！
AD：新版DIY风格，演示：http://www.liuzhou520.com/ 适用于X2.5及以后的更新X3，有需要请留言联系，或点这里查看：http://www.liuzhou520.com/forum.php?mod=viewthread&tid=358，混口饭吃，谢谢支持！
本帖最后由 xin_ruoli 于 2010-10-9 05:16 编辑
第七课以后的请直接拉到三楼！
第四课开始：
课前分析：图中1所示，之前有讲过，在这就不讲了。这课来讲如何DIY图中2和3~
第一步：先拉一个100%的红框架放好。再拉一个【展示类】--【静态模块】选择【HTML】自己写好HTML代码放入（连HTML都不会你还做什么网站呢？自己学吧，我就不提供了）
如下图所示：
第二步：箭头所指的就是之前已拉好的100%红框体，你无需再拉（下图说明：
图中1：无边框线。
图中2：框架最大化。
图中3：那就是靠最左边的背景图像。
第三步：第一步的静态模块设置，如下图：
图中1：字体颜色，你只需在链接字体填入字体颜色即可，不用学我哈，我是忘了删除的！
图中2：连红，淡灰就行~
图中3：左为152，为什么要这么多？因为左边的背景图片这么宽，所以为了不挡住他才拉这么远。
图中4：背景图片，1PX宽的，所以要横向铺平。
第四步：看箭头理解！
图中1：边框线。
图中2：边距。
图中3：背景色！
第五步：【查看更多】的标题。
图中1：标题不是空的，是V+1（智能ABC下打出来的）详情请看之前的课程！
图中2：点击后的链接。
图中3：查看更多的图标，我这是为了好看才用图标来，你也可以不用这么搞，直接给标题输入查看更多。但效果不是很好看哈！
图中4：是【朋友聊什么】的背景图片。为不平铺！
第六步：搜索群组的代码！
第七步：搜索的设置，如下图：
图中1：外边距为最大化。
图中2：内边距上下为10，左28只是为了考虑对齐其周边环境！请用QQ截图较正！
图中3：背景色。
第四课完成。下一课教大家如何DIY钦州港72泾网【朋友圈子】的【谁是泾男&泾女】
演示如下图，或点击：http://www.72jing.com/group-index.html
第五课开始：--------------------------------------======》》
说明一下。这一节我就不再详细教了，必竟DIY这段比较复杂，除了用到PLUS这个工具外还要插入其它的一些HTML。不懂HTML的话看也看不懂，所以这一节课我大概分析一下我的框架就OK。其它的自己去理解！请看图中标题的数字后再看下面的说明：
图中整体框架：在3:1的基础上再放入1:1的框架，分上下两部份，现在说一下上部份，背景图片为向下平铺！内外边距要求控制比较麻烦，请用QQ截图正行较正！
图中1：那是背景图片~
图中2：有图中1一样是标题！
图中3：不是标题，而是展示类的静态模版的图片~
图中4：HTML~
图中5：标题左~
图中6：标题右~
图中7：标题左~
图中8：标题右~
图中9：HTML~
图中10：HTML~
图中11：HTML~
图中12：HTML~
图中13：Plus调用~
图中14：Plus调用~
泾女那一段和泾男的一样。你可以导出红框再导入就OK了。不用再重D。
完成~~~这一节不细讲哈，重点讲下一节，有朋友点名要讲这一节，以后就不自己在这自言自语了，自己点播吧，去http://www.72jing.com/看，哪一段不懂DIY的截图以回复我的形式跟帖发给我，我会看到的！谢谢支持！
下一节预览（网友点播），详细教你DIY这一段：
第六课开始：------------》》
第一步：看图，让我们先分析一下框架。图中所示：是先放入一个3:1的框架再放入一个1:1的框架到左边。
第二步：先看左边的，都是重复的。所以在这我只讲一边。另一边也是一样的方法。他们之间的关系如下图所示，我就不多说了~
第三步：图文的调用
图中1：标题不能太长，20表示10个汉字或20个字母或数字，自己算算能显示多少就填多少！
图中2：内容的长度和标度一样，字数不要太多，要不会拉长页面，这样就不美观了。
图中3：图片的大小，请根据实际情况设置！
第四步：给图片加边框。
注意看图中的下划红线~那就是给图片加边框的，当然这种方法对新手而言较麻烦，您可以用以下这种方法给图片加边框！
style="padding: 1px; border: 1px solid #CCC; background: #FFF;" />
将以上这段代码插入到类似于
<img src="{pic}" width="{picwidth}" height="{picheight}"在这里空一格，然后将以上代码添加到这。"/这个符号就不要多，一个就好/>
第五步：主题调用，在这我说明一下红框中为何是401，其实你可以打一万，官方默认是40的。所以我加多个1意思是主题显示最长化~~~要不默认40的话，21个汉字时就会显示...（这一招只限主题调用，图文啥的不要这样做，或你把<li>换成<p>也不要这样做。
第六步：美化主题显示，看图自己理解其中的关化，我之前的课程有说过了！
第七步：看图中数字对照以下说明。
图中1：字体，即是没有链接的字体大小~
图中2：带链接的字体~
图中3：最大化就填0~你留空和填0是不同的效果！
图中4：内边距，一般设为10。下是5是因为下边框本身就有默认值~不心过大，设不设都无所谓~但最好设置一下，设小一点就行~
第八步：会员展示模块。
第九步：给会员头像加上边框，请参照第四步做法~
第十步：记得右边距减10，之前有说过，当然你可以不减，你不减我不能保证你在IE6下不会错位。
下一节教你如何DIY人才频道！（官方没有的哦）该教程请关注三楼！
本帖最后由 67wing 于 2010-10-5 17:42 编辑
这么好的贴，不顶对不去自己，感谢分享，此贴必火 本帖最后由 xin_ruoli 于 2010-10-21 09:53 编辑
课程索引帖：
该帖无法再编辑了，图片太多，太卡，以后每出一节教程就另开一帖，请关注此楼
该楼只为第七课以后的DIY教程做索引，请看过之前的教程的请进入该帖后直接到本楼层点击下一节课的链接，谢谢！
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
第一课至第六课------------------------在本帖！（最后更新时间：2010年10月9日）
第七课（DIY房产频道）---------------请点击：（等待编辑，近期推出，本来打算10号写的，但最近没啥时间，请见谅！我会更新的！详情请关注：www.bbww.cn 正在建一个DIY网！目前正在DIY19楼风格！完成19楼再继续写教程，19楼风格演示：http://x.bbww.cn 正在DIY中，很乱，非最终结果。如果你想学DIY请往下看。。。）
看完教程，给您一点作业吧（哈哈）-----------------------------------------------------------
看下图，你能D出来吗？纯DIY状态下！请先分析好这是如何D出来的~很简单的，这也D不出的话你无法D复杂的站！
请先自己学着D一下，不会请点这下载后自己回去研究！下载地址：http://bbww.cn/thread-71-1-1.html （本人有过声明，不会再在官方分享任何风格版模，请见谅是外链！）不懂的可加本人QQ：1355121876（注明：DIY）本人很忙，加了不一定能解答您的问题，请见谅！有空的话会解答一下的。谢谢！
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
已更新至第七课：https://discuz.dismall.com/thread-1936943-1-1.html （教您DIY人才频道）
顺便问一下，diy的时候，模块的位置怎么设置呀，都不能移动到自己想要的位置，是需要用别的例如css设置的吗？ w我要非常支持 太感谢了，楼主！ (EM:166:)顶一个~
苏州客前来。 放眼整个坛子，能有这种贡献精神的太少了，非常感谢楼主。看你网站，好像你本人在南宁的吧？有空请你到中三街喝两杯！ 67wing 发表于 2010-10-5 18:02 static/image/common/back.gif
顺便问一下，diy的时候，模块的位置怎么设置呀，都不能移动到自己想要的位置，是需要用别的例如css设置的吗 ...
DIY无需CSS。框架组合即可~