Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

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

  [复制链接]
xin_ruoli 发表于 2011-4-1 00:18:55 | 显示全部楼层 |阅读模式
本帖最后由 xin_ruoli 于 2011-8-3 18:09 编辑

前言:好久没更新教程了。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
或点这里立即在线咨询
  
本人写什么都从不检查的。如有错别字请回复告知,如有不懂请跟帖提出,本人有时间就回(一般情况下,说通俗点就是不出任何意外的情况下会回复你的)


评分

9

查看全部评分

xixqq 发表于 2011-4-1 00:29:59 | 显示全部楼层
2011年4月1日—祝大家愚人节快乐
回复

使用道具 举报

lian26680 发表于 2011-4-1 00:38:28 | 显示全部楼层
楼主非常给力
回复

使用道具 举报

 楼主| xin_ruoli 发表于 2011-4-1 00:39:37 | 显示全部楼层
abcdyt2010 发表于 2011-4-1 00:36
兄第能出个本地装上了玩了一下DIY的教程吗

本地和空间装的DIY有什么不一样吗?
回复

使用道具 举报

wsyp 发表于 2011-4-1 00:49:12 | 显示全部楼层
这个很给力!!辛苦!!
回复

使用道具 举报

當我們聚在一起 发表于 2011-4-1 00:50:31 | 显示全部楼层
新人支持思雨教程 受惠了
回复

使用道具 举报

gg81 发表于 2011-4-1 00:54:43 | 显示全部楼层
你好
可以和贵站做个友连吗?
本站地址
www.uucu.net
惠东论坛
快照隔日更新
交换友情连接联系QQ81731659
回复

使用道具 举报

zxm360 发表于 2011-4-1 02:54:04 | 显示全部楼层
在顶一下
回复

使用道具 举报

Jeavi_·` 发表于 2011-4-1 03:30:43 | 显示全部楼层
Bad Request (Invalid Hostname)
回复

使用道具 举报

 楼主| xin_ruoli 发表于 2011-4-1 09:55:05 | 显示全部楼层
gg81 发表于 2011-4-1 00:54
你好
可以和贵站做个友连吗?
本站地址

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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-12-23 09:43 , Processed in 0.025275 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表