xin_ruoli 发表于 2012-6-8 22:15:30

时隔一年,再出DIY教程,用DIY制作自己漂亮的网站第十课,欢迎学习探讨,谢谢!

本帖最后由 xin_ruoli 于 2013-1-3 20:00 编辑

前言:快一年没更新教程了。X2.5出来好久了,DIY依然强大!我依然走我的纯DIY路线,用DIY去做做,自己动手!将站做大,一年了,由于不懂“做人”被D和谐了!

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

注明:汕尾市民网全站都只安装了X2.5,没有安装第三方程序,也没有用到CSS+DIV,就只用了X2.5自带的DIY功能实践的!

之前的教程链接如下:
==========================课程说明===================
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课(很用心讲哦,推荐):https://discuz.dismall.com/thread-2289691-1-1.html
DIY课程:第9课(X2正式版DIY心得):https://discuz.dismall.com/thread-2289691-1-1.html
DIY课程:第10课(在此帖)觉得好就顶,我会再出下一课!谢谢支持!
======================================================
开始上课:作业(利用DIY做出以下效果:汕尾市民网帖子页的广播台~

整个过程分三块来做,每一块,DIY好图片!



第一步:拉好框架:如下图所示



一个在外一个在内,放在左右或右边随意,只需放一个,另外一个到时直接复制左边的到右边就OK,因为左右的框架是一样的,所以可以直接复制过用(下面会说到如何复制,请细看)

第二步:设置好边距边框之类的!如下图所示!

看图就能明白,很简单的。我就不多说了。就是起到美化作用!

第三步:拉模块进去调用!

上图中说的很清楚了,图片有边框的代码如下,请复制进你的图片模块那里的【模块模板里】点击属性可以看到!如下图所示:

代码:(红色部份是多加进的代码,就是图片带边框的效果代码)
<div class="module cl ml">
<ul>

<li style="width: {picwidth}px;">
      <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" style="padding: 1px; border: 1px solid #CCC; background: #FFF;" /></a>
      <p><a href="{url}" title="{title}"{target}>{title}</a></p>
</li>

</ul>
</div>
第四步:设置好图片高度和宽度及边距(需注重细节,否则错位)

图中所示,一定要设置好右边距有-10(负十)否则IE6下错位,IE8不设置负十也没事。其它输入0为最大化的意思!

图片设置高度为(如上图所示)OK,图片部文完成,接下来DIY图片旁边的标题部份!
第二块:DIY好标题!
第五步:设置好边距!

为何要没带链接的为15?行高会拉高点,显的美观些,这是细节哦~
左边的全完成,如下图所示:

最后一步,将左边的复制导出再导入拉到右边即可,如下图所示:



第十课完成,若喜欢请顶一下,你的一顶就是我继续出下一课的动力,谢谢支持!
有什么不懂的以回帖的形式问我,看到必回,谢谢!

另再打下广告:
AD:新版DIY风格,演示:http://www.liuzhou520.com/ 适用于X2.5及以后的更新X3,有需要请留言联系,或点这里查看:http://www.liuzhou520.com/forum.php?mod=viewthread&tid=358,混口饭吃,谢谢支持!


秋ら味 发表于 2012-6-8 22:17:50

学习下了。www.111dy.net www.jjrrw.com

nawanla 发表于 2012-6-9 02:04:01

本帖最后由 nawanla 于 2012-6-9 02:14 编辑

防城港北部湾网有很多人都免费发布了,楼主,你的风格可以降价了,便宜点,交易安全一点,售后保证一点,我买。。
看我 发的帖子,前几天还上当买了一套不能用的风格还被威胁了,唉

开心小猪 发表于 2012-6-9 09:06:12

防城港北部湾网有很多人都免费发布了,楼主,你的风格可以降价了,便宜点,交易安全一点,售后保证一点,我买。。{:1_130:}

xin_ruoli 发表于 2012-6-9 09:30:32

开心小猪 发表于 2012-6-9 09:06 static/image/common/back.gif
防城港北部湾网有很多人都免费发布了,楼主,你的风格可以降价了,便宜点,交易安全一点,售后保证一点,我 ...

我可以很便宜卖你,但售后时间将缩短。一分钱一分货,不可能几十块你要我保你一年吧。几十块一年也太那个了吧?有意加Q详谈!有买了的客户免费分享的,该客户不再提供任何服务了,这种人是拿别人辛苦的劳动成果分享给他人,怪不得中国软件业或电脑行业都不发达,没人支持正版。哎。我是无业的全职做站的,网站暂没收入只能贱卖自己站的风格为生,可别人不想让我生存下去,无能为力。我吃都吃不饱,哪有时间做什么站?

lhn045 发表于 2012-6-9 09:44:13

xin_ruoli 发表于 2012-6-9 09:30 static/image/common/back.gif
我可以很便宜卖你,但售后时间将缩短。一分钱一分货,不可能几十块你要我保你一年吧。几十块一年也太那个 ...

支持!!

凝视着你 发表于 2012-6-9 10:46:41

IP 已送,首页模版不错 http://www.longanba.com

xin_ruoli 发表于 2012-6-9 10:51:58

nawanla 发表于 2012-6-9 02:04 static/image/common/back.gif
防城港北部湾网有很多人都免费发布了,楼主,你的风格可以降价了,便宜点,交易安全一点,售后保证一点,我 ...

那你说多少钱合适呢?你开个价吧。我觉得做得过就卖~谢谢支持!

lopping 发表于 2012-6-9 11:30:17

做记号先,很实用,另外,楼主论坛的风格很不错,共享呗

华中人才李汉斌 发表于 2012-6-9 11:34:32

www.111zph.com
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 时隔一年,再出DIY教程,用DIY制作自己漂亮的网站第十课,欢迎学习探讨,谢谢!