zoukankan      html  css  js  c++  java
  • 教你美化你的模版 + 新个性时间

    教你美化你的模版 + 新个性时间
    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的默认样式图:
  • 相关阅读:
    简介.Net对象序列化.txt
    如何在Web页面退出前提示用户保存数据?
    如何将图片存储到数据库中
    页面回车键响应,onkeydown事件
    用C#创建Windows服务(Windows Services)
    解决“Visual Studio 要求设计器使用文件中的第一个类。移动类代码使之成为文件中的第一个类,然后尝试重新加载设计器。”方法
    动态创建htm元素并添加到document中
    如何在Asp.net的Header中添加/title/Meta tages/CSS
    无法打开项目文件,“d:\web\webapp.csproj”,此安装不支持该项目类型
    用Intelligencia.UrlRewriter实现URL重写
  • 原文地址:https://www.cnblogs.com/Alum/p/3587994.html
Copyright © 2011-2022 走看看