标题:MSN Space空间页面特效代码大全

作者: 发表时间:2008-01-22    点击:    关键词:代码 大全 特效 页面 空间 日志 style 添加 链接 播放


  • 温馨提醒: 使用本站代码前请先做好备份,本站代码全部经过测试,代码完整可靠

    以下为代码区:基本使用方法是直接复制以下代码到指定区域(如校内涂鸦版),点保存即可。
    以下是代码:

    copy了一些msn网页特效,一来为了自己学习学习,二来希望大家不会的也能有个地方来系统的学习.不对的请多多指教^_^
     

        使用方法:所有语句基本已经测试完毕,你仅仅需要复制你需要项目的代码到你的html编辑页面中,然后根据项目下的注释来设置参数即可。请记住删除掉①②③④⑤标记符号

    说明:
    1.如果你在一段日志文本中添加多个效果,请注意多重html标记嵌套格式:

    <DIV *>
     <P>
      <FONT *>
       <B>日志文件</B>
      </FONT>
     </P>
    </DIV>


    2.本文代码表中所有链接均指网络链接,如想调用本地资源请将资源(如图片,音乐,flash等)发布到网上(BBS论坛,免费相册,免费空间等)后再引用其链接。


    一.改变背景颜色:

    <div style="width:100%;height:100%;background-color:①#990000;"><p>日志文件</p></div>


    注①:此处为背景颜色值,如果查询符合你页面背景色调请参考:配色分布字典



    二.插入背景图片(支持动态背景):

    <IMG src="背景图片链接地址" width=①图片宽度px height=图片高度px align=right
    style="FILTER: alpha(opacity=100, finishOpacity=0,style=②2) ">
    <DIV style="FILTER: alpha(opacity=45, finishOpacity=45,style=③0); ④FLOAT:
    left; WIDTH: 文本宽度px">
    <DIV style="LINE-HEIGHT:100%; LETTER-SPACING: 100%">
    <P><FONT color=#ffffff size=2>日志文件</FONT></P>
    </DIV></DIV>


    注:
     ①因为space空间的模版是固定的,所以根据从窄到宽的日志模版我设置了几个预设置,请大家参考:
    260px、350px、370px、550px、730px
     ②Filter控制背景图片的柔化滤镜,此处style值根据需要可设置为:1,2,3,另翻转、发光、阴影等特效请查询相关语法
     ③此处是文字的柔化滤镜,控制方法同上
     ④设定了具体宽度的情况下Float命令可以省略,否则请予以保留

    三.添加彩色边框(文本框格式)

    <div STYLE="①border-style:②solid;border-width:5pt;
    border-color::#ffff00">日志文件</div>


    注:
     ①背景边框的四个边独立设置 Border-left(Right, Top, Bottom)-style
       每个边框设置间用分号隔开
     ②改变边框线设置:Solid 简单线形边框;
        Double 简单双线边框;
        Groove 沟线立体效果边框;
        Ridge 脊线立体效果边框;
        Inset 嵌入线立体效果边框;
        Outset 浮出线立体效果边框

    四.设置滚动文本框:

    <DIV align=①center
    style="
    COLOR: #ffffff;
    BACKGROUND-COLOR: ②#000000;
    OVERFLOW: ③scroll;
    WIDTH: 450px;
    HEIGHT: 300px;
    BORDER: ④solid 2px black;
    SCROLLBAR-ARROW-COLOR:⑤#000000;
    SCROLLBAR-FACE-COLOR:#D2E6FE;
    SCROLLBAR-TRACK-COLOR:#FfF9FF;
    SCROLLBAR-HIGHLIGHT-COLOR:#8f99B1;
    SCROLLBAR-SHADOW-COLOR:#8EAfBA;
    SCROLLBAR-3DLIGHT-COLOR:#DfE9FF;
    SCROLLBAR-DARKSHADOW-COLOR:#AfA6AA
    ">日志文件</DIV>


    注:
     ①文本框的对齐方式:center 居中齐;left 居左;right 居右
     ②此处更改文本框背景色,设置为transparent为透明色,即页面背景色
     ③默认右边及底部均显示滚动条,如不需要页面左右滚动请设置为OVERFLOW-X:SCROLL
     ④设置边框类型,颜色,宽窄,具体参数请参考第三项注②
     ⑤此处滚动条的配色请查询我的配色工具

    点击查看自定义滚动条配色器


    因微软取消了javascrip支持,所以请大家下载此flash工具查看:http://www.blueidea.com/articleimg/2005/04/2460/scroller.swf



    五.文字光影效果

    阴影:

    <FONT style="COLOR: #xxxxxx; FILTER: shadow(color=black); FONT-FAMILY:
    华文彩云; FONT-SIZE: 20pt; WIDTH: 100%"><B>日志文件</B></FONT>

    发光:
    <FONT style="COLOR: #xxxxxx; FILTER: glow(color=black); FONT-FAMILY:
    华文彩云; FONT-SIZE: 20pt; WIDTH: 100%"><B>日志文件</B></FONT>

    模糊:
    <FONT color=#xxxxxx style="FILTER: blur(add=1,
    direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; WIDTH:
    200px">日志文件</FONT>

     

    六.添加计数器:

    <div align="center">
    <p><a href="http://www.dvdrentaldeals.com" target="_top"><img border="0" src="http://www.amazingcounters.com/counter.php?i=177293&c=532192" alt="DVD Rental"></a><br>
    <small><a href="http://www.allgamerentals.com" target="_top"></a></small></p>
    </div>

    或在该网页申请免费计数器:http://www.amazingcounters.com/
    再复制生成代码至页面。

     

    七.添加MSN在线状态指示器:



    八.添加QQ留言指示器:

    <A target=blank href=http://wpa.qq.com/msgrd?V=1&Uin=①你的QQ号码&Site=②网站的名字&Menu=yes><img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:③12 alt="④点击这里给我发消息"></A>

    注:
      ①QQ号码与②网站的名字,要根据自己的情况及需要进行设置。
      ③12则代表互动状态图片风格的种类,一共有13种,我的留言薄上用的就是“风格12”,你可以根据自己的喜好,选择不同的风格样式,只需将选择的风格样式所对应的数字替换上面代码中的12即可。具体风格请参考http://is.qq.com/webpresence/code.shtml
      ④点击这里给我发消息指的是发消息时,将鼠标放到“互动状态”的图片上后出现的提示性文字。也可以根据喜好进行设置。

    技巧:如果你不想把他放到网络日志上,而是想把他放到你的spaces的列表里,方法如下:
    建立一个自定义列表,取名为QQ留言,其中新建一条项目“发送QQ留言”,并复制“http://wpa.qq.com/msgrd?V=1&Uin=①你的QQ号码&Site=②网站的名字&Menu=yes”到URL链接栏中,保存后到页面看看是不是多了一个qq留言功能。


    九.添加背景音乐:

    <P><IMG height=0 loop=①infinite dynsrc=音频文件链接地址 width=0
    border=0></P>

    注:①loop为循环设置:infinite 无限循环;为不使阅读者感到厌烦,建议设为1

     

    十.添加视频:

    <P><IMG height=150px width=150px loop=infinite dynsrc=流媒体文件链接></P>

    注:正常的流媒体文件以asf,wmv,或mov等为后缀

     

    十一.添加Flash:

    注意:因为微软于6月2日起取消了javascript语句的支持,此功能现在已经无法正常使用,是否恢复java语句支持尚属未知之数。在此大家鄙视微软!!!
      因为space空间不支持直接播放flash,且插入flash屏幕有相应播放文件大小的空白,所以必须有一句代码调用flash,有二种方式:

    代码(一)将这块空白替换成别的图片,代码如下:

    <IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2);
    WIDTH: 350px; HEIGHT: 220px" height=220 src="替换空白的图片" width=350
    align=right>
    <DIV style="FLOAT: left; WIDTH: 378px; HEIGHT: 253px">
    <P align=center><A href="javascript:document.getElementById
    ('playflash3').innerHTML='<embed width=350 height=220
    src=你需要播放flash的链接>
    </embed>';document.getElementById('playflash3').releaseCapture();">
    Play</A></P><DIV align=center><DIV id=playflash3 style="WIDTH: 350px;
    HEIGHT: 253px;">

    通过这种办法可以实现不播放Flash的时候显示一张图片,而播放Flash时播放窗口就会遮挡住原来的背景,而不影响观看。

     

    (推荐)代码二:点击播放按钮后,Flash或音视频播放窗口自动展开,代码如下:

    <DIV align=center>
    <P><A
    href="javascript:document.getElementById('playflash5').innerHTML='<embed
    width=370 height=300 src=你需要播放flash的链接></embed>';
    document.getElementById('playflash5').releaseCapture();">请点击播放</A></P>
    <DIV id=playflash5 style="WIDTH: 1px; HEIGHT: 1px;
    BACKGROUND-COLOR: #ffffff"></DIV>

    效果:日志中只有相关播放按钮,而且日志版面的大小也不再受播放窗口的影响;当你点击播放时,Flash或相关视频窗口以及音频播放控制按钮会自动在该日志展开播放

     

     

    十二.怎么调用QQ秀图像

    <P><IMG src="http://qqshow-user.tencent.com/你的QQ号码/10/00/" align=absMiddle border=0></P>

     


    十三.添加个性签名档:
        给自己的日志增加个性化的签名,一方面彰显主人的文化品位,另一方面也强调了版权所有之信息,可谓一举两得。一位美国朋友Eric受到Scott编写的日志编辑扩展工具“Edit It”的启发,制作了一个为日志自动添加签名的工具“Add Spaces Signature”。下面就来介绍一下它的安装和使用方法,首先进入“MSN Spaces Signature”来设计自己的签名,通过一个直观的在线编辑工具大家可以轻松地制作文本型或图片型的签名,注意添加图片时其来源应是有效的Web地址而非本地硬盘的文件路径,此外还须注意为其确定相应的版面位置,这直接决定将来你的签名在日志中所处的位置。除了直观的设计模式外,它还为那些熟悉HTML的朋友准备了语法编辑模式,为进行相对专业的制作提供了可能。设计完自己的签名后,点击页面下方的“Create my MSN Spaces Signature”按钮,在随后打开的Web页面里会出现一个超级链接,名为“Add Spaces Signature”,接下来所做的工作就如同大家添加编辑扩展工具“Edit It”一样,将这个链接添加到浏览器收藏夹的“链接”子文件夹中,随后浏览器的快捷链接工具栏里就会出现“Add Spaces Signature”的图标。这样每当你写完一篇日志后只需点击该按钮图标,你的签名就会自动添加到日志的相应位置中。


    十四.为你的日志空间添加搜索引擎
    前提:你有一个自己的网页空间。

        首先到“Google免费:让用户搜索您的网站”中申请该服务,先将“搜索代码”下面滚动框里的全部内容复制下来,然后打开网页编辑软件新建一个HTML文件,并将编辑页面切换到代码模式,将刚才复制下来的内容粘贴到页面内,并将其中的所有“Your
    Domain”字样替换成你自己的Space空间链接地址,熟悉HTML语法的朋友也可以对搜索引擎的外观进行简单的修改,并通过预览模式查看最终的效果。接下来登录你的网页空间并上传刚刚制作的HTML文件,然后在浏览器里打开新添加的网页测试一下搜索引擎工作是否正常。在你的Space空间列表或置顶日志中建立一个文字或图形链接指向该网页,现在你自己和来访者就可以轻松地查找你的空间内容了。我用日志中的几个关键词进行了简单测试,虽不能百分百搜索到需要的内容,但也基本能够满足需要了。特别是你想搜索某个网友的留言,只需键入他的ID名称就能查找到他的所有留言,很实用!不过有一点很遗憾,通过搜索引擎会直接链接到特定日志,由于版面布局模式的变化,日志中诸如背景图片等涉及排版的内容都会发生位置的变化,而与最初的效果有所不同,从而引起来访者的困惑。这是我的空间搜索引擎,你可以先尝试一下。你也可以通过点击我的置顶日志中的“站内搜索”图标来使用该功能


     上一篇:MSN空间的一些代码   下一篇:MSN空间教程简易指导