| 笑笑님의 프로필Bonbon的秘密基地블로그리스트 | 도움말 |
|
6월 6일 Bonbon的后花园,哈哈!~~南昌路某弄某号,我有了自己的后花园,哈哈!!~~~~兴奋得我昨天晚上怎么都睡不着,导致今天又昏昏沉沉的,不过心里面还是很兴奋呢!~~~~~~一边激动地安排时间,准备去IKEA把喜欢的东东都搬过去,一边在想,我需要准备些什么,毛巾,牙刷,睡衣,拖鞋,烟酒也是不可少的,因为SALON,和ABSOLUTE偶都不哈!~~~我喜欢三五和CHIVAS!~~~还需要些什么呢??我要一个懒人沙发,满床的卡瓦伊靠垫,兴奋啊!有个人会在家等我~~哈哈!你看到会不会晕倒,哈哈!!
5월 21일 其实...... 在我的心里真的有另一个我!~ 心里的那个我一切都刚好相反,不开朗,不活泼,不爱说话, 所有的事情我都放在心里不对任何人说,里面有我想尘封的记忆, 有难以启齿的秘密,还有我那个奢侈的愿望! 不知道从什么时候开始,我开始羡慕电视剧里生患绝症的女主角, 我好希望生病的那个是我,好希望那个只剩短暂时光的人是我!~ 我要把握珍贵的时间,自私的去利用那些疼爱我的人对我的关心, 去完成我尽量多的心愿,说出那些只能永远放在心里的话....... 5월 16일 让我感动的四眼和胖胖
5월 14일 图片套用各种照片框
之前,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; 是整個相片框的寬度 根據原作著的語法設定: 其他的(Style Sheet)CSS 參數設定的詳細情形,可以參考原著,或參考DIV表格語法教學.... 修改原理:
範例: 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 ●←複製終點
也就是多一個DIV把它們包起來,文字則要擺在</div>之後,才有"文繞相框"的效果出現。
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" 是你想設定的圖寬
範例: 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也行喔,但要設定絕對寬高) 複製起點→● ●←複製終點
一些人常常使用PhotoShop等軟體為相片製作陰影效果,現在當沒有其他繪圖工具輔助的時候也可以模擬此效果喔。 在國外網站有人為此想出辦法 [連結一] [連結二] [連結三] 簡單說就是使用CSS和一些陰影圖片來模擬 引用網站其中一張原理圖 就是把一張陰影圖放在圖片的下面去做重疊....
但也是很可惜,這裡面所介紹的語法也不適用在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="Epx" 是右邊陰影的高度 E=C+10 會有那麼多的設定,主因是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也行喔) 複製起點→● ![]() ●←複製終點 原圖:
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
當然使用濾鏡的話目前是不適用在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上顯示的結果: 複製起點→● ![]() ●←複製終點
逛逛 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" 是你想設定的圖寬
範例: 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上顯示的結果: 複製起點→● ![]() ●←複製終點
在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
範例: 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进阶技巧---第八讲 为日志添加背景图片
|
||||
|
|