MSN Space教程 － 带滚动条的日志
2005/12/04
当要写篇幅较长的日志时，可以考虑给日志加上滚动条，这样日志在 MSN Space 空间中所占的页面就不会过长。另外，有的朋友希望每篇日志的大小都差不多，那么也可以考虑通过带滚动条的图文框的办法来统一篇幅。滚动条的添加是通过 CSS 语言中 Style 的使用来完成的，下面我就举几个简单的例子来介绍一下滚动条。
（一）右侧滚动条
实例：
数字、数学符号
⓪ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳
❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾
❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾
⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇
⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛
ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ
Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ
㊀ ㊁ ㊂ ㊃ ㊄ ㊅ ㊆ ㊇ ㊈ ㊉
㈠ ㈡ ㈢ ㈣ ㈤ ㈥ ㈦ ㈧ ㈨ ㈩
№ ⅛ ¼ ⅜ ½ ⅝ ¾ ⅞
+ - × ÷ ± ＋ － ＝ ≡ ≠ ≒ ≈ ≌ ~ ～﹢ ╳ ⊕ Θ % ‰ ％ ∵ ∴ ∷ ∏ ＜ ＞ ≦ ≧ ≤ ≥﹤ ﹥∩ ∪ ∈ ￠ ° ⊥ ∠ ∟ ⊿ △ ㏒ ∑ ∂ ∫∮∞（ 〔 ﹙﹚ 〕） ｛ ﹛﹜｝ √ ㄨ
语句：
<DIV align=center>
<DIV style=’color: blue; background-color: white; border: green solid 1px; width: 420px; height: 100px;
overflow: scroll; scrollbar-face-color: #ABCDEF; scrollbar-shadow-color: #6666FF; scrollbar-highlight-color: #CCCCCC; scrollbar-3dlight-color: #6666FF; scrollbar-darkshadow-color: #6699CC; scrollbar-track-color: #99CCFF; scrollbar-arrow-color: #99CCFF;’>
日志图文内容
</DIV></DIV>
<DIV style=’color: blue; background-color: white; border: green solid 1px; width: 420px; height: 100px;
overflow: scroll; scrollbar-face-color: #ABCDEF; scrollbar-shadow-color: #6666FF; scrollbar-highlight-color: #CCCCCC; scrollbar-3dlight-color: #6666FF; scrollbar-darkshadow-color: #6699CC; scrollbar-track-color: #99CCFF; scrollbar-arrow-color: #99CCFF;’>
日志图文内容
</DIV></DIV>
Style 语句解释：
Color: blue —— 前景文字颜色为蓝色
Background-color: white —— 背景颜色为白色
Border: black solid 1px —— 黑色实线边框，宽度为 1px
Width: 420px; Height: 100px —— 边框高度 420px，高度 100px
Overflow: scroll —— 总是显示滚动条；如果将 scroll 改为 auto，则仅当日志内容超过边框限制时，才显示滚动条（不需要下面的滚动条就用这个命令）；如果将 sroll 改为 hidden，则滚动文字窗口内不显示任何滚动条（特殊用途，以后讲吧）
其他语句均为滚动条颜色设置，大家可以自己动手改改看。
（二）左侧滚动条
实例：
特殊中文字符
㊐ ㊊ ㊎ ㊍ ㊌ ㊋ ㊏ ㊑ ㊒ ㊓ ㊔ ㊕ ㊖ ㊗ ㊘ ㊜ ㊝ ㊞ ㊟ ㊠ ㊡ ㊢ ㊩ ㊪ ㊫ ㊬ ㊭ ㊮ ㊯ ㊰ ㊚ ㊛ ㊙ ㊣ ㊤ ㊥ ㊦ ㊧ ㊨
㈱ ㍿ 囍 卐 卍
特殊西文字符
ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ
Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ
à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ ō ǒ ǎ
à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ ō ǒ ǎ
À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß ε ф μ ξ ζ ω Ω ψ Ψ Café
© ® ℗ ℃ ℉ Ω ㏎
语句：
<DIV align=center>
<DIV style="BORDER: black solid 1px; OVERFLOW: auto; WIDTH: 420px; HEIGHT: 100px; DIRECTION: rtl" >
<DIV style="DIRECTION: ltr;" align=left>
日志图文内容
日志图文内容
</DIV></DIV></DIV>
Style 语句解释：
Direction: rtl —— 是将滚动条放置到左边的关键
Direction: ltr —— 是确保文字输入方式还是从左到右
其中滚动条样式、颜色都使用了默认值，所以这个例子除了将滚动条放置到了左侧以外，基本可以说是采用了最简单的滚动条语句。
（三）透明的滚动条
实例：
图形符号
♂ ♀ ♠ ♣ ♥ ♦ ♤ ♡ ◇ ♧ ❤ ❥ ☜ ☞ ☎ ☏ ♨ ☺ ☻ ﹡ ＊ ¤ ☼ ☀ ☽ ☾ ☆ ★ ☄ ☁ ☂ ✚ ✟ ✙ ✣ ✤ ✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✪ ☆ ★ ❂ ❁ ❀ ✿ ✱ ✲ ✳ ❃ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ✱ ☸ ❣ ❦ ❧ ✁ ✄ ☪ ☣ ☢ ☠ ☭ ❣ ♈ ☮ ✈ ✡ ✓ ✔ √ ☑ ☒ ✗ ✘ ㄨ ✕ ✖ ✖ ✎ ✏ ✐ ✌ ✍ ✉ ↂ ☯ ♛ ♕ ﹎ ₪ ¡ Þ ௫ ღ 〝〞ミ灬 ツஐ ﻬ L ☊ ☋ ♋ ☌ ☍ Ξ ぷ 々∞ o’.'o ☃ ☹ 〠 〄 ♝ ♞ ♟ ºº 큐 〒 ≡ ⁂ и ァ γ ㄒ ︶︿ しノж ю Ю 乀 ◖◗ Ш ๑ ۩ ۞ ˇ 彡
语句：
<DIV align=center>
<DIV style=’color: navy; background-color: pink; border: orange solid 1px; width: 420px; height: 100px;
overflow: auto; scrollbar-face-color: pink; scrollbar-shadow-color: pink; scrollbar-highlight-color: pink; scrollbar-3dlight-color: pink; scrollbar-darkshadow-color: pink; scrollbar-track-color: pink; scrollbar-arrow-color: navy;’>
日志图文内容
</DIV></DIV>
<DIV style=’color: navy; background-color: pink; border: orange solid 1px; width: 420px; height: 100px;
overflow: auto; scrollbar-face-color: pink; scrollbar-shadow-color: pink; scrollbar-highlight-color: pink; scrollbar-3dlight-color: pink; scrollbar-darkshadow-color: pink; scrollbar-track-color: pink; scrollbar-arrow-color: navy;’>
日志图文内容
</DIV></DIV>
感谢 卧虎藏龙 的分享
MSN教程 － 图片篇
2005/12/04
㈠ 在文字段落中添加图片
⑴进入MSN Space 网志编辑界面，点击<HTML>模式切换按钮，在需要添加图片的地方，敲入如下代码，其中你的图片地址用 Ctrl＋V 来粘贴：<img src=你的图片地址>
⑵点击<HTML>切换按钮，预览所贴入的图片效果。
⑶改变图片大小，位置可以鼠标右键点击图片，在菜单中选择，还可以在<IMG>语句中增加参数来决定。比如：<img src=你的图片地址 align=middle width="90%" height="120%" border=0>
其中：
Align=middle，表示图片与左右文字中对齐，还可以选择 top, absmiddle, bottom 等方式；
Width＝"90%"，表示图片宽度为原图片大小的 90%（缩小），也可以输入绝对数值；
Height＝"120%"，表示图片宽度为原图大小的 120%（放大），也可以输入绝对数值；
Border＝0，表示图片无边框，数值越大，边框越粗。
㈡ 添加背景图片
代码：
<table height="100%" width="100%" background="背景图片地址" border=0>
<tbody>
<tr>
<td>
<tbody>
<tr>
<td>
在这里插入日志的所有内容
</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
在这里你既可以用Jpeg的图片最背景，也可以用Gif的动态图片做背景，如果想调整大小的话在红色数字的地方可以修改表格的宽和高。当背景图片本身很小时，这时背景图片会在水平和垂直方向重复平铺展示。
㈢ 添加带滤镜效果的图片
代码：
<div align=center ><TABLE style=’filter:alpha(opacity=95, finishOpacity=10,style=2)’ width=182 height=134 ><TBODY><TR><TD style=’BACKGROUND-REPEAT: no-repeat; background-position:right center‘ background=http://…… align=’center’ valign=’middle’ style=”>日志内容</TD></TR></TBODY></TABLE></div>
“background-position:right center”是指定背景图片的水平与垂直对齐方式。更改“right”参数可改变水平对齐方式：right—靠右；left—靠左；center—居中；更改“center”可改变垂直对齐方式：top—置顶；bottom—置底；center—置中。
“width=182 height=134 ”是指定背景图片的宽度和高度。
“ align=’center’ ”是指定前景文字的对齐方式，更改“center”参数可改变水平对齐方式：right—靠右；left—靠左；center—居中。
“ valign=’middle’ ”是指定前景文字的垂直对齐方式，更改“middle”可改变垂直对齐方式：top—置顶；bottom—置底；middle—置中。
“filter:alpha(opacity=95, finishOpacity=10,style=2)”设定背景滤镜，如不使用背景滤镜效果，可将本行代码删除。
㈣ 图片套用滤镜效果
<div style="width:360px;height:270px;filter:Alpha(opacity=100,finishOpacity=0,style=3)">
<img src=你的图片地址></div>
<img src=你的图片地址></div>
相关参数：
“style=2”背景图片滤镜样式，可更改等号后面参数： 0—均匀；1—线状；2—圆形；3—长方形。
“opacity=95”指定背景图片起始透明度，有效范围是“0~100”
“finishOpacity=10”指定背景图片结束透明度，有效范围是“0~100”
結果:(style依序為1、2、3)
发光效果
HTML:
<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>
結果:
阴影效果
HTML:
<DIV style="FILTER:Dropshadow(color=#333333,offX=5,offY=5); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="图片地址"></DIV>
結果:
波形效果
HTML:
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>
參數
freq –>頻率(0+)
strength –>振幅強度(0+)
lightstrength –>波峰強度(0~100)愈高越黑
phase –>起始相位(0~100)
濾鏡寬=圖寬+振幅強度x2
濾鏡高=圖高+振幅強度x2+10
結果:
多重效果
HTML 
波形加上半透明合成)
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="http://myurl.com.tw/kdjd" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>
結果:
具体滤镜的设置请参考小绿人的《图片套用滤镜效果》
㈤ 文字绕图
代码：
<P><IMG height=225 src=http://…… width=300 align=right></A></P>
<P>环绕图片的文字</P>
“src=http://……”是图片的URL地址，
“height=225”是指定图片的高度（不更改图片高度可删除此代码），
“width=300”是指定图片的宽度（不更改图片宽度可删除此代码）。
“align=right”是指定图片的水平对齐方式。可更改等号后面参数：right—靠右；left—靠左；center—居中。
##########
鸣谢：
本教程基于以下前辈的帮助，详细事宜请参见他们主页
常用色彩代码－1
2005/12/04
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
常用色彩代码－2
2005/12/04
| FFFFFF | FFFFCC | FFFF99 | FFFF66 | FFFF33 |
| FFFF00 | CCFFFF | CCFFCC | CCFF99 | CCFF66 |
| CCFF33 | CCFF00 | 99FFFF | 99FFCC | 99FF99 |
| 66FFFF | 99FF66 | 99FF33 | 66FFCC | FFCCFF |
| 99FF00 | 33FFFF | FFCCCC | 33FFCC | 00FFFF |
| 66FF99 | FFCC99 | 66FF66 | 66FF33 | 00FFCC |
| 66FF00 | 33FF99 | FFCC66 | FFCC33 | CCCCFF |
| 33FF66 | 33FF33 | 00FF99 | FFCC00 | 33FF00 |
| 00FF66 | 00FF33 | 00FF00 | CCCCCC | CCCC99 |
| 99CCFF | CCCC66 | CCCC00 | CCCC33 | 99CCCC |
| FF99FF | 99CC99 | 66CCFF | FF99CC | 99CC66 |
| 66CCCC | 99CC33 | 00CCFF | 33CCFF | 99CC00 |
| FF9999 | 66CC99 | FF9966 | 66CC66 | 33CCCC |
| CC99FF | 00CCCC | FF9933 | FF9900 | 66CC33 |
| 66CC00 | 33CC99 | 00CC99 | CC99CC | 33CC66 |
| 00CC66 | CC9999 | FF66FF | 33CC33 | 33CC00 |
| CC9966 | 00CC33 | 9999FF | 00CC00 | CC9933 |
| CC9900 | FF66CC | 9999CC | FF6699 | 999999 |
| 6699FF | FF6666 | CC66FF | 999966 | 6699CC |
| 999933 | FFCC33 | FF6600 | FF33FF | 3399FF |
| 999900 | 669999 | CC66CC | 0099FF | FF33CC |
| 3399CC | CC6699 | 669966 | FF00FF | 339999 |
| 669933 | 669900 | FF3399 | 0099CC | 9966FF |
| CC6666 | 009999 | CC6633 | CC6600 | 339966 |
| FF00CC | FF3366 | 009966 | CC33FF | FF3333 |
| 339933 | 009933 | 9966CC | FF3300 | FF0099 |
| 339900 | 009900 | 6666FF | CC33CC | FF0066 |
| 996699 | FF0033 | FF0000 | CC00FF | CC3399 |
| 996666 | 6666CC | 996633 | 996600 | 3366FF |
| CC3366 | CC00CC | 9933FF | 0066FF | 666699 |
| CC3333 | CC3300 | 3366CC | CC0099 | 9933CC |
| 666666 | 666633 | 0066CC | 9900FF | 666600 |
| CC0066 | 336699 | 993399 | CC0033 | 6633FF |
| 336666 | 006699 | CC0000 | 993366 | 9900CC |
| 336633 | 006666 | 336600 | 6633CC | 3333FF |
| 006633 | 993333 | 993300 | 6600FF | 990099 |
| 006600 | 0033FF | 663399 | 009966 | 3333CC |
| 663366 | 6600CC | 990033 | 0033CC | 990000 |
| 3300FF | 663333 | 663300 | 660099 | 0000FF |
| 333399 | 3300CC | 003399 | 333300 | 660066 |
| 333333 | 003366 | 0000CC | 660033 | 333300 |
| 660000 | 330099 | 003333 | 003300 | 000099 |
| 330066 | 330033 | 000066 | 330000 | 000033 |
| 000000 | ||||
感谢
MSN教程 － 文字篇
2005/12/04
文字特效
<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果
<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#FF0000,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果 </FONT>
投射阴影文字效果
<font style="FILTER:Dropshadow(color=#cccccc,offX=3,offY=3); height=1px">阴影文字效果</font>
阴影文字效果
<DIV style="WIDTH: 80px; HEIGHT: 19px; BACKGROUND-COLOR: #cccccc"><FONT style="FILTER: Dropshadow(color=#FFFFFF,offX=1,offY=1); HEIGHT: 15pt" color=#000000> 雕刻文字效果</FONT></DIV>
雕刻文字效果
“首字放大下沉”的排版方法
“首字放大下沉”的效果，常见于书本杂志，其特点就是文章的第一个字大小一般是正文的两倍，甚至更大。如果我们把首字做成艺术字的图片，就完全可以采用上述方法（一）中“文绕图”方式来达到“首字放大下沉”的效果。如果我们不把首字做成图片，就需要用代码来完成，实例如下：
|
首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首
|
代码：
<DIV style="FONT-SIZE: 12px; LINE-HEIGHT: 14px"><SPAN style="FONT-SIZE: 24px; LINE-HEIGHT: 28px; FLOAT: left;"><B>首</B></SPAN>字放大下沉效果 首字放大下沉效果 ……</DIV>
其中蓝色数字可根据自己的需要调整字体的大小。
另外，如果将代码<B>首</B>换成图片语句，比如：<IMG height=38 src="http://spaces.msn.com/rte/emoticons/star.gif" width=38>，那么也能形成“文绕图”的效果，感兴趣的朋友可以试一试。
感谢 ╰☆╮貓 ^ō^ の ๑۩۞۩๑ ｡◕‿◕｡ 和卧虎藏龙 的分享
