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

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

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就是边框的颜色设置，大家可以换成自己喜欢的颜色代码上去的 这里已经对边框的三个参数1px，solid以及#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=后面加上 clock或 date， clock是时间， date是日期，我空间上面的是 date，下面的是 clock tformat=如果 display设置的是 clock，还要设置这个参数—— 12或 24， 12是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八种，加上不设置，默认的话就是九种 下面看假设 display是 clock， timezone为 GMT+0700，其他各参数为默认的设置 dd样式例图： （如果部分样图看不到的话，请刷新一下页面，即可看到全部的效果图） 不设置 dd的默认样式图：

转载于:https://www.cnblogs.com/Alum/archive/2009/12/18/3587994.html