教你美化你的模版 + 新个性时间

教你美化你的模版 + 新个性时间
2009-06-22 22:51

这里公布下关于模版边框设计的代码:
.modbox{paddin g:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}
.modtl{background:url(http://hiphotos.baidu.com/fableking/pic/item/459fd6ca81aa0246f21fe7aa.jpg) no-repeat top left;line-height:1px}
.modtc{background-color: #813533;
background-image: url(
http://hiphotos.baidu.com/fableking/pic/item/fbdbd1a22e103eadcaefd034.jpg);
background-position: right;
background-repeat: no-repeat;
filter:Chroma(Color=white)
}
.modtr{background:url(http://hiphotos.baidu.com/fableking/pic/item/9ea67acbf127fa1fbe09e6aa.jpg) no-repeat top right;line-height:1px}
.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}
.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}
.modbr{background:transparent;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

现在开始教大家如何美化边框:
看一下.modbox{}
这个其实就是模版当中一大块主体的代码:
其中的:
border-left:1px solid #813533;border-right:1px solid #813533
其实就是模版左右两边边框线的设置代码,border-left是设置左边的边框线,border-right是设置右边的边框线
其中的
1px就是设置边框线粗细的,大家如果不想要边框线,设置0就可以了
其中的solid是设置边框线的样式的,它的作用就是指定边框为实线边框,这还有更多的样式介绍:
dotted: 点线
dashed :  虚线
double :  双线边框
groove :  3D凹槽
ridge :  菱形边框
inset :  3D凹边
outset :  3D凸边
如果大家不想要solid的样式,只要把它换成上面你想要的样式的代码就可以了,不过这里要说一下,上面第3个到最后一个的样式,也就是从双线边框3D凸边的样式都取决于边框线的粗细来显示效果的,如果边框线的粗细小于3px,一般是看不出来效果的
#813533
就是边框的颜色设置,大家可以换成自己喜欢的颜色代码上去的
这里已经对边框的三个参数1pxsolid以及#813533
做出了解释,之后提及的边框属性将不再对这些参数作解释

接着来看下:
.modbl{}
.modbc{}
.modbr{}
这三个就是分别设置模版左下角,底边中央,右下角的代码:
.modbl{}中的
border-left:是设置左下角左边框的属性的,border-bottom是设置左下角底边的边框属性的
.modbc{}中的border-bottom:是设置边框当中一段底边属性的
.modbr{}中的border-right:是设置右下角右边框的属性的,border-bottom是设置右下角底边的边框属性的

这就是美化边框的简单教程,相信经常来我空间学习的朋友们应该都能看得懂它了,我实在懒得做更多的解释了,如果每一篇文章都解释的那么详细,真的很 没必要,而且很累。。所以这里只能跟那些初次来我空间学习的朋友们说声不好意思了,如果看不懂的话,建议先去翻看下我之前的文章,从头学一点,或许会有些 帮助。。。
之后的教程我也会扼要的解释,不过我觉得经常来的朋友应该都能看得懂些了,看不懂可以自己琢磨琢磨,这样有助于理解代码,也有助于以后可以设计出有自己个性的百度空间,毕竟以后我不可能每次都写教程的。。

接着我们来说一下如何美化模版的标题栏:(若不懂作图以及对代码不熟悉的朋友请勿尝试,不然后果自负)
之前已经有很多朋友问过我的标题栏上的天涯&枫叶&书塾的是怎么做的,那个时候因为感觉有点难度,而且涉及到作图,所以没写,现在决定写 出来,希望大家如果没有自信做好它的,请不要胡乱尝试,因为这个标题栏的设计,自己看到的效果跟别人看到的效果是完全两样的
下面我先解释下代码:
标题栏的设置关键就是这三个:
.modtl{}
.modtc{}
.modtr{}
这三个中分别都有设置背景图的代码,我把这三个背景图贴出来,大家就应该差不多明白标题栏的秘密了
他们分别是以下三张图:
教你美化你的模版 + 新个性时间 - 凡哥(尘士留缘) - 网络帝国大世界  教你美化你的模版 + 新个性时间 - 凡哥(尘士留缘) - 网络帝国大世界  教你美化你的模版 + 新个性时间 - 凡哥(尘士留缘) - 网络帝国大世界

当中那张就是我自己用photoshop设计的图片,左右两边的图被我变过颜色了,原本是淡蓝色的,当中的图设计尺寸很讲究,高度是24px,宽度 最好不要超过我的图的宽度,而且这图当中的图案,也就是从“天”字到“塾”字的左右两边空出的距离一定要跟我的一样,多一点或少一点,可能都会毁了你的标 题栏,可能你们觉得我说的很夸张,不过等你们试过之后就知道为什么我会这么说了
会photoshop的朋友可以拿我上面的图去自己对照着尺寸来做自己风格的图片

做好图片后,记得要把.modtc{}中的background-color这里的颜色代码改成你做的图片的色调的颜色代码,不然会不协调的

然后这里就要开始说重点了:
当你图做好,代码也写好后,预览的效果是很糟糕的,标题栏上很乱很乱,其实这个就是这样的。
我在上面就说过了,自己看到的效果跟别人看到的效果是完全两样的
所以,如果你要想知道别人看到的效果的话,就必须要先保存修改,然后退出登录,再以游客的身份查看你自己的空间,才能看到别人看到的效果是什么样子的,所以这个一定要多尝试,而且必须要勇于尝试以及要对相关技术都有一定的熟悉才能做到的

好了,这个教程就到这里结束吧

现在说一下有关分割线的事情,很多朋友问我怎么做分割线,其实这个之前已经有很多人写过以及转过了,我觉得我没必要再写了,所以大家如果要学怎么做分割线的话,就去看看别人的教程吧

2.

然后发现虽然这个提供时间图的网站并没有关闭,可是它并不支持一些参数,也就是我之前写过的一篇个性时间,only me文章中的参数,所以这个地址的效果会少一点,感觉总是不是很爽,于是到网上又查找了一番,终于找到了一个支持原文章全参数的地址:http://danjo.ca/cgi-sys/Count.cgi?

--------------------------------------------------------------------------------------------------------------------

下面我把我之前文章中的部分可用教程转过来(其中的地址都被我纠正成可用的了):

这个背景图的使用方法就是在background:url()中加入http://danjo.ca/cgi-sys/Count.cgi?后面再加上要设置的属性以及相关参数,且之间要用&来间隔
例如http://danjo.ca/cgi-sys/Count.cgi?display=clock&timezone=GMT+0800

现在来解释下所有属性及其相关参数:
注:以下所有涉及颜色设置的,凡是设置颜色代码的,都要把前面的#去掉才会有效
例如蓝色代码为#0000EE,则在相关设置颜色的属性后面只要加上0000EE即可

display=后面加上clockdateclock是时间,date是日期,我空间上面的是date,下面的是clock
tformat=如果display设置的是clock,还要设置这个参数——122412是12小时制的显示方式,24就是24小时制,不设置的话,默认为12小时制
dformat=如果display设置的是date,就要设置这个参数,他的作用是设置年月日显示的顺序,一共有三个参数yymmdd:年/月/日顺序;mmddyy:月/日/年顺序;ddmmyy:日/月/年顺序,不设置的话,默认为yymmdd的顺序
timezone=这个是时区的设置,北京时间的时区就是GMT+8,不过我发现这个地址的事去如果设置为GMT+8的话,时间会快1个小时,所以我们只要对时区调节一下,设为GMT+7就可,也就是加上参数GMT+0700就好了
ft=这个是设置时间图片的边框宽度,不填这个属性的话,默认为3,设置为0则无边框
frgb=这个是设置边框颜色的,只有当ft大于0的时候才设置这个参数,后面加上颜色代码或颜色英文,不设置的话,它默认是天蓝色
prgb=这个是设置时间的颜色,不设置的话,默认是绿色
tr=这是背景色是否透明的设置,y就是确定,n就是否定,其实不设置的话,默认就是n否定,不透明
negate=这是设置时间图是否反相显示,参数y就是确定,n就是否定,不设置的话,默认就是n否定。如果设置y的话,则上面一切有关颜色的设置全部无效,他会按照默认颜色的反相色来显示
trgb=这个好像是设置时间图上的穿透色的,我也不是 很明白,大概就是颜色叠加的效果,叠加在整个图上的,大家可以自己试试看这里加颜色代码,有的有效,有的无效。本人曾经尝试10多种颜色,最终研究未果, 已先喉头腥甜、嘴角溢血,所以不做研究,大家不高兴试的话,完全可以不用加这个参数
现在告诉大家最后一个参数,就是时间图样式的属性:
dd=后面参数有:B/C/D/E/cd/cdd/cdr/bang八种,加上不设置,默认的话就是九种
下面看假设displayclocktimezoneGMT+0700,其他各参数为默认的设置dd样式例图:
(如果部分样图看不到的话,请刷新一下页面,即可看到全部的效果图)
不设置dd的默认样式图:
原文地址:https://www.cnblogs.com/Alum/p/3587994.html