蘑菇's profile吟游诗人的记忆PhotosBlogListsMore  |  Tools Help |
|
|
October 21 如何做出立可拍式照相框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; 是整個相片框的寬度 根據原作著的語法設定： 其他的(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>之後，才有"文繞相框"的效果出現。
这个就是我参照上面的做法做出来的，你也可以试试，很好玩的
 欧美奇幻 2005/10/21 Photo by 小非 |
|
|
