笑笑님의 프로필Bonbon的秘密基地블로그리스트 도구 도움말
6월 6일

Bonbon的后花园,哈哈!~~

     南昌路某弄某号,我有了自己的后花园,哈哈!!~~~~兴奋得我昨天晚上怎么都睡不着,导致今天又昏昏沉沉的,不过心里面还是很兴奋呢!~~~~~~一边激动地安排时间,准备去IKEA把喜欢的东东都搬过去,一边在想,我需要准备些什么,毛巾,牙刷,睡衣,拖鞋,烟酒也是不可少的,因为SALON,和ABSOLUTE偶都不哈!~~~我喜欢三五和CHIVAS!~~~还需要些什么呢??我要一个懒人沙发,满床的卡瓦伊靠垫,兴奋啊!有个人会在家等我~~哈哈!你看到会不会晕倒,哈哈!!

 

5월 21일

其实......


  

在我的心里真的有另一个我!~

心里的那个我一切都刚好相反,不开朗,不活泼,不爱说话,

所有的事情我都放在心里不对任何人说,里面有我想尘封的记忆,

有难以启齿的秘密,还有我那个奢侈的愿望!

不知道从什么时候开始,我开始羡慕电视剧里生患绝症的女主角,

我好希望生病的那个是我,好希望那个只剩短暂时光的人是我!~

我要把握珍贵的时间,自私的去利用那些疼爱我的人对我的关心,

去完成我尽量多的心愿,说出那些只能永远放在心里的话.......


5월 16일

让我感动的四眼和胖胖

 

今天真得很感动!



【心情】
一直感动到此时此刻噢!!!
没想到今天的MSN会让我如此感动。
他们两个都在网上。
四眼和胖胖都在。
这几年发生太多太多的事情,
已经很久没有了联系......
直到上次的聚会。
我们还能像以前那样聊天吗?
带着一丝忧虑,说了声:Hi,好久不见!


【发现】
原来一切都只是自己的胡思乱想,
骨子里大家都没有变。
聊着过去的共同回忆,
就像在说昨天的事情一样。


【顿悟】
曾经以为我永远失去和他们的友情,
可是我错了,我低估了我们的感情!
原来只是我们自己没有发现,
在他们的心里永远有一个地方是留给我的,
而且是个被珍藏的好好的地方!
他们没有忘记当初的誓言和约定,
不管发生什么,
我们是一辈子的朋友。
都怪自己傻,聚会那天,
当有太多心事的我喝的不省人事的时候
他们的细心照顾已经说明了一切了!~


【四眼】
聚会那天,大家都穿得很casual,
只有他穿着西装跑来,
呵呵,绝对是他的风格哦,
今天他还是不管你说什么,
都会说:“我早就知道了!”。
他是个很爱面子的人,
说的话很禅,常常让人不明白。
但总有那么几句话说到你心里,
在他面前,我可以近乎肆无忌惮。
虽然他会说:“我对你有个心理底线,
你可以作,但不能过头!”


【胖胖】
因为年轻,所以我们只能错过。
我们之间的故事真的不是三言两语可以说清楚的。

虽然曾经觉得后悔认识他,
但多了一个偶然能依赖的人的感觉也不错。
今天,他告诉我,
在他心里,有两个特别会记住的人,
其中一个是我。

【感谢】
一直以来,我都以为
我们是彼此心里最不愿去提起的不愉快,
但是,是我多心了,
曾经的伤害,都是因为彼此的在乎。
而我的任性和冲动让彼此失去了弥补伤害的机会。
所以谢谢你们,今天让我知道,
不管发生了什么,最起码,
在你们的心里,我都被好好的照顾着。

5월 14일

图片套用各种照片框

1.拍立得樣式精緻照片框:

之前,Timi 的網誌裡有介紹 拍立得樣式的精緻照片框!!,這個最先出現在 Royboy Weblog 的 [這一篇],但是很可惜的是,如果你直接套用裡面的語法將會發生空白的沒空白等不良效果,這是因為在MSN Spaces 裡不開放padding和margin的樣式(Style Sheet),還有一個小問題,Royboy的語法在Firefox瀏覽下會發生右邊多餘空白,所以似乎有改良語法的必要,讓MSN Spaces和Firefox都能有最佳效果。

 

修改之後的HTML語法

<div style="width:Apx; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;">
<div style="border-width:10px 10px 20px 10px; border-style:solid; border-color:white; overflow:visible;"><div style="border:1px solid #999999;overflow:visible;">
<img src="圖片網址" width="Bpx"></div><div style="height:4px;overflow:hidden"></div><div style="font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">照片描述<br><b>照片日期<br>Photo by ???</b></div></div>
</div></div>

width:Apx; 是整個相片框的寬度
width="Bpx"
是你想設定的圖寬

根據原作著的語法設定:
width:Apx; width="Bpx"圖片的寬度加20即(A=B+20)
然後加入
圖片網址照片描述/日期/名稱後即可!

其他的(Style Sheet)CSS 參數設定的詳細情形,可以參考原著,或參考DIV表格語法教學....

修改原理

使用內層DIV框線白色實線框代替Padding(外框與內容的距離)

範例:

HTML:

<div style="width:232px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;">
<div style="border-width:10px 10px 20px 10px; border-style:solid; border-color:white; overflow:visible;"><div style="border:1px solid #999999;overflow:visible;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_0?1114600880.jpg" width="212px"></div><div style="height:4px;overflow:hidden"></div><div style="font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">Taipei
101 大樓<br><b>2005/04/27<br>Photo by Gene</b></div></div>
</div></div>

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●

Taipei 101
2005/01/01
Photo by Gene

●←複製終點

 

如果想要讓相框置右變成"文繞相框"的形式,

1.請在語法最前面加上<div style="float:right">

2.在語法最後面加上</div>

也就是多一個DIV把它們包起來,文字則要擺在</div>之後,才有"文繞相框"的效果出現。
置左就是把right改為left....應該了解...
 

2.圖片加上照片框:

HTML語法

<div style="border:1px solid #999; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;width=100px;height:10px ;background:white;FONT-SIZE: 12px;color=#333333;font-family:verdana;" >
<div style="border:4px solid #FFFFFF; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
圖片網址" width="Cpx" height="Dpx"></div></div>

 

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高


然後加入圖片網址後即可!!

 

範例:

HTML:

<div style="border:1px solid #999; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;width=100px;height:10px ;background:white;FONT-SIZE: 12px;color=#333333;font-family:verdana;" >
<div style="border:4px solid #FFFFFF; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div>
 

在MSN Spaces上顯示的結果:(Firefox也行喔,但要設定絕對寬高)

複製起點→●

●←複製終點

 

 

3.圖片加上照片框(+PNG陰影):

一些人常常使用PhotoShop等軟體為相片製作陰影效果,現在當沒有其他繪圖工具輔助的時候也可以模擬此效果喔。

在國外網站有人為此想出辦法 [連結一] [連結二] [連結三]

簡單說就是使用CSS和一些陰影圖片來模擬

引用網站其中一張原理圖

Illustrated process  

就是把一張陰影圖放在圖片的下面去做重疊....

 

但也是很可惜,這裡面所介紹的語法也不適用在MSN Spaces

所以只能修改語法,來得到最為相近的效果。

修改之後的HTML語法

<div style="width=Apx;height:Bpx ;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
圖片網址" width="Cpx" height="Dpx"></div></div>
<div style="float:left;overflow:hidden;width=6px;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_3?1114600520.png" width="6" height="6"><br><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_1?1114600520.png" width="6px"
height="Epx"></div>
</div>
<div style="
width=Apx;height:6px ;"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_2?1114600520.png" width="6" height="6"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_0?1114600520.png" width="Fpx" height="6"></div>
</div>
 

width:Apx; 是整個相片框的寬度(有2個) A=C+16
height:Bpx;
是整個相片框的高度            B=D+10

width="Cpx"
是你想設定的圖寬
height="Dpx" 是你想設定的圖高

height="Epx" 是右邊陰影的高度          E=C+10
width="Fpx" 是底部陰影的寬度          F=D+9

然後加入圖片網址後即可!!

會有那麼多的設定,主因是MSN Spaces不開放一些CSS所致。
所以把原網址

 

範例:

HTML:

<div style="width=416px;height:310px ;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;">
<img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div>
<div style="float:left;overflow:hidden;width=6px;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_3?1114600520.png" width="6" height="6"><br><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_1?1114600520.png" width="6px"
height="304px"></div>
</div>
<div style="
width=416px;height:6px ;"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_2?1114600520.png" width="6" height="6"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_0?1114600520.png" width="409px" height="6"></div>
</div>

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●


●←複製終點

原圖:

 

4.圖片加上照片框(+濾鏡陰影) :  稍微較差的陰影效果

HTML語法

<div style="overflow:visible;FILTER:Dropshadow(color=#cccccc,offX=4,offY=4);width=Apx;height:Bpx;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px ;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px; background:white;">
<img src="
圖片網址" width="Cpx" height="Dpx"></div>
</div></div>
 

width:Apx; 是整個相片框的寬度 A=C+15
height:Bpx;
是整個相片框的高度 B=D+15

width="Cpx"
是你想設定的圖寬
height="Dpx" 是你想設定的圖高


然後加入圖片網址後即可!!

當然使用濾鏡的話目前是不適用在Firefox的..

範例:

HTML:

<div style="overflow:visible;FILTER:Dropshadow(color=#cccccc,offX=4,offY=4);width=415px;height:315px;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px ;background:white;">
<div style="border:4px solid #FFFFFF;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px; background:white;">
<img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div>
</div>

 

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

 

5.圖片加上照片框陰影(+陰影照片框) : 

逛逛 Royboy Weblog 又看到 [這一篇],有提到使用背景圖的方式來與模擬陰影 (原作著是cassidy)

本來是使用圖片套用背景圖的樣式(讓圖重疊)....如下....但是MSN Spaces就是不支援正統的背景圖

所以沒辦法直接使用此語法。

<img src="照片框圖片" style="background:url(主要照片) no-repeat">

當然要套用此法....就得使用 MSN Spaces 加上背景圖的特殊語法 去做模擬。

故.....Firefox 不支援.....

那把 照片框圖片(中間當然要透明的喔) 畫成這樣就能模擬陰影圖片哩(多虧Royboy想出來)

 

修改後HTML語法

<div style="width:Cpx;height:Dpx;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_0?1114691307.gif" width="2%" align=right><img src="
圖片網址" width=100% height=98% align=right>
<div style="float:left;overflow:visible;width=100%;height:100%;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_1?1114691307.gif" width="100%" height="100%"></div></div>
</div>

 

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高


然後加入圖片網址後即可!!

範例:

HTML:

<div style="width:400px;height:300px;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_0?1114691307.gif" width="2%" align=right><img src="
http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width=100% height=98% align=right>
<div style="float:left;overflow:visible;width=100%;height:100%;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_1?1114691307.gif" width="100%" height="100%"></div></div>
</div>

 

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

 

6.圖片加上照片框(+立體陰影):

在Fotki網站看到很不錯的樣式(照片四周加上陰影),原語法也不適用在MSN Spaces

所以來修改修改語法。

修改之後的HTML語法

<div style="width=A;height:B ;">
<div style="
width=A;height:13 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_2?1114739383.gif" width="12" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_6?1114739383.gif"
width="C" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_7?1114739383.gif" width="15" height="13"></div>
<div style="
width=A;height:D ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_5?1114739383.gif" width="12"
height="D"><img src="圖片網址" width="C" height="D"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_0?1114739383.gif" width="15" height="D"></div>
<div style="
width=A;height:15 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_3?1114739383.gif" width="12" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_1?1114739383.gif"
width="C" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_4?1114739383.gif" width="15" height="15"></div>
</div>

 

width:A; 是整個相片框的寬度 A=C+27
height:B;
是整個相片框的高度 B=D+28

width="C"
是你想設定的圖寬
height="D" 是你想設定的圖高


然後加入圖片網址後即可!!

 

範例:

HTML:

<div style="width=427;height:328 ;">
<div style="
width=427;height:13 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_2?1114739383.gif" width="12" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_6?1114739383.gif"
width="400" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_7?1114739383.gif" width="15" height="13"></div>
<div style="
width=427;height:300 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_5?1114739383.gif" width="12"
height="300"><img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_0?1114739383.gif" width="15" height="300"></div>
<div style="
width=427;height:15 ;overflow:visible;">
<img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_3?1114739383.gif" width="12" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_1?1114739383.gif"
width="400" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_4?1114739383.gif" width="15" height="15"></div>
</div>

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●

●←複製終點

MSN Space进阶技巧---第八讲 为日志添加背景图片

一篇精彩的日志文章再配上一幅贴切主体的背景画面一定会带来不同凡响的效果。不知道为什么微软没有考虑到用户这么基本的需求,以至于大家为此费了不少心力。以前我也尝试过用若干语法来解决这个问题,但都没有实现。后来因为回国,天天在现实生活中摸爬滚打,一个多月的时间没有再思考网络社会里的这些问题。回到德国后,难得一两天清闲,就又想起了添加背景这档子事,把相关语法逐一试了一遍,终于找到了解决办法。随后又在Space空间闲逛的时候发现有些朋友早就实现了这一功能,遂将自己的与旁人的经验加以总结,写了这篇教程。

 

仍然像以往一样,在这里我们不过多地探讨实现这一功能所涉及的语法命令,这样过于繁琐,也没有太多现实意义。我仅将具体应用时所需要的语法列出来,再对几个重要参数加以说明。
首先进入正常日志编辑模式,键入你所需的日志内容,并视个人需要进行排版编辑。然后点击“Edit It”按钮,进入HTML语法编辑模式,并勾选下面的“使用HTML格式建立网页”。
将下列语法粘贴至你的编辑页面内顶端:

 

<IMG src="背景图片链接地址" width=图片宽度值 height=图片高度值 align=right style="FILTER: alpha(opacity=100, finishOpacity=0,style=2) ">
<DIV style="FILTER: alpha(opacity=45, finishOpacity=45,style=0); FLOAT: left; WIDTH: 文本宽度值">
<DIV style="LINE-HEIGHT: 行间距值(pt); LETTER-SPACING: 字符间距值(em)">
<P><FONT color=#ffffff size=2>你的日志文字</FONT></P>
</DIV></DIV>

 

再将你刚刚编辑好的文字内容(注意,除了文字内容可能还会包含你进行格式编排后的若干语法语句)剪切并粘贴到上面语法中的“你的日志文字”的位置。

 


下面简要介绍一下上面语法中的两行主要命令语句的含义:

 


<IMG src=…….>控制日志中的背景图片,图片的宽度及高度值均以px为单位;align这一参数控制图片位置,但不要对此进行更改,否则无法实现文字浮于图片之上的效果。Filter控制背景图片的柔化滤镜,大家可以修改其中的数值已达到不同的效果,但注意style的值只能取1,2,3这三个数值。除了柔化效果外,还有翻转、发光、阴影等若干特效,但语法表述各有不同,在此不再赘述,有兴趣的朋友可以在互联网上查询相关语法。在Space空间不同的布局方式下,日志宽度是不相同的,所以为了更好的配合日志的页面效果,建议选择合适宽度的图片,具体可根据布局的实际情况(即日志的宽窄程度)将图片宽度分别设定在260px、350px、370px、550px、730px左右的近似值。

 


<DIV style="FILTER…….>控制日志文字的若干效果,其中Filter命令的使用方法与前述一致,也是调节柔化效果。文本宽度也采取px为单位,其最大值也要参照上面不同布局方式时所要求的近似宽度值,如果你希望文字完全分布在整个日志页面上,那么将WIDTH值设为100%即可。在设定了具体宽度的情况下Float命令可以省略,否则请予以保留。

 


有一个问题需要注意,预览中文字相对于背景图片的位置往往与最终显示在日志中的位置不一样,这还需要你返回到该日志进行进一步的修改,这确实需要一些耐心,但相信经过一段时间的实际应用,你会总结出一些经验技巧的。