2012年1月28日 星期六

自我介紹小圖、邊框、文字、背景設置語法


如何設置語法箱請見前文: 頭像改動圖

頭像下的對話框和自我介紹顏色要變得配襯版面, 可以來個變身, 做得漂亮, 做得有趣!

有 6 個款式可選擇:

不範圖:



語法 1:

<style type="text/css">/*自我介紹改字色*/
#w-profile-status #w-long-status .text{color:red;}</style>

語法 2:

<style type="text/css">/*自我介紹無框及改字色*/
#w-profile-card .status, #w-profile-card #w-profile-status .ico{background:none;border:0px none transparent;}

#w-profile-status #w-long-status .text{color:red;}</style>

語法 3:

<style type="text/css">/*自我介紹換小圖、更改邊框及字色*/
#w-profile-card #w-profile-status .ico{background:url(小圖網址) bottom no-repeat;height:高度數字px;width:濶度數字px;}

#w-profile-card .status{border-color:purple;}

#w-profile-status #w-long-status .text{color:purple;}</style>

***小圖位置即對話框的小角, 圖片高度預留和頭像圖片之間空間, 加高3px;

透明框只要將第2句的邊框語法改為 border-color:transparent; 即可!***


語法 4:

<style type="text/css">/*自我介紹換小圖、無邊框及文字*/
#w-profile-card #w-profile-status .ico{background:url(小圖網址) bottom no-repeat;height:高度數字px;width:濶度數字px;}

#w-profile-card .status{color:transparent;height:0px;font-size:0px;border:0px none transparent;padding:0px;}</style>
語法 5: 


<style type="text/css">/*自我介紹換小圖, 更改邊框、文字顏色、加圖底*/
#w-profile-card #w-profile-status .ico{background:url(小圖網址) bottom no-repeat;height:高度數字px;width:濶度數字px;}

#w-profile-card .status{border-color:green;}

#w-profile-status #w-long-status .text{color:purple;background:url(圖底網址);height:高度數字px;}</style>

語法 6:

<style type="text/css">/*刪除自我介紹*/
#w-profile-card .status, #w-profile-card #w-profile-status .ico{background:none;color:transparent;height:0px;font-size:0px;border:0px none transparent;padding:0px;}



#w-profile-card .status{display:none;}</style>

***透明框只要將第2句的邊框語法改為 border-color:transparent; 即可!***

* * *

如果你所選的型版自我介紹文字有底色: 可以加入或將有關語法寫成 #w-profile-card .status{background:transparent;}

***測試、制作及編寫下過心機, 用了時間,
如要引用語法或文章資料請連同我 blog Logo  一併帶走!

15 則留言 :

  1. 晚安,謝謝! 人日快樂! 我會慢慢看,慢慢試!
    [版主回覆01/28/2012 21:40:33]大家都生日快樂! 哈 哈 ❤。(◕‿-。)

    回覆刪除
  2. 謝謝分享,我要慢慢睇、慢慢搞。
    [版主回覆01/28/2012 23:09:17]歡迎隨時來 ❤。(◕‿-。)

    回覆刪除
  3. Pandora 香傭講法文2012年1月28日 晚上10:39

    有冇同yahoo投訢?
    [版主回覆01/28/2012 23:11:48]有呀! 例牌態度照舊! 總之人日快樂 開開心心 。(◕‿-。)

    回覆刪除
  4. 晚安!謝謝來訪!妳好叻...要慢慢學...不太懂得..整...謝謝分享!
    [版主回覆01/29/2012 09:35:22]謝謝! 我還有點時間在網, 有不明白可以問呀! ^^

    回覆刪除
  5. ✿ ₡ღ”˜ƸӜƷ˜”*°祝你░人日開心¸”˜ƸӜƷ˜”ღϠ✿
    ¨˜”°º★¨˜”°º★ღ事░事░如░意ღ★¨¨˜”°º★¨˜”°º
    ✿•.*”ƸӜƷ˜”★•長░年░好░運.•★”˜ƸӜƷ”*°•✿
    [版主回覆01/29/2012 09:36:16]一年之計在於春 祝你心想事成!

    回覆刪除
  6. 雅姬蘭,人日快樂!不要繼續讓不快事影响心情啊!我正準備換背景,看到你來探訪,我又來坐坐,边框改動,正呀!我会逐一實習的。謝謝你分享!我引用後不公開,等你說可以公開才公開,好嗎?
    [Winsome回覆01/30/2012 19:05:38]好的。謝謝通知!
    [版主回覆01/30/2012 18:58:02]文章公開了 ^^
    [版主回覆01/29/2012 09:38:08]好呀! 多謝你諒解! ❤。(◕‿-。)

    回覆刪除
  7. 早晨!多謝雅姬蘭.生日快樂!
    人人生日人人樂
    大家誕辰大家歡
    [版主回覆01/29/2012 11:58:22]早晨! 大家樂啊! ≧▽≦ 哈! 哈!

    回覆刪除
  8. 晚安:謝謝!祝您人日快樂﹗事事如意
    [版主回覆01/30/2012 14:29:31]開心每一天 ^^

    回覆刪除
  9. 抄碼的也是用yahoo blog 的嗎?
    妳的CSS功力很好啊~~ :)
    [版主回覆01/30/2012 14:31:18]多謝讚美先 ^^ 總會有抄碼的同台 blogger 啦! 小心為上 ^^

    回覆刪除
  10. 恭賀龍年龍馬精神、身體健康、萬事如意!\(^。^)/
    謝謝你的語法!!捧回家Lu!!! \(^.~)V
    [版主回覆01/31/2012 10:54:55]開心每一天 ! ❤。(◕‿-。)

    回覆刪除
  11. 雅姬蘭...太棒了、返屋企試下…非常感激你…祝你天天快樂!
    [版主回覆01/31/2012 10:56:20]好啊 ! ❤。(◕‿-。)

    回覆刪除
  12. Thank you so much for sharing your wonderful CSS with us. Thank you deeply.
    [版主回覆01/31/2012 20:44:25]別太客氣啦! ^^

    回覆刪除
  13. 期待您的分享 ^^
    [版主回覆02/01/2012 07:58:27]很快有下一篇, 也期待你的創作 ^^

    回覆刪除
  14. 請問誩個語法該貼在那裡呢? 謝謝!
    [版主回覆02/01/2012 11:42:24]放在自定欄位, 可連語法的中文注解一併放進去, 方便日後更換資料! ^^

    回覆刪除
  15. thank teaching dear Akina
    [版主回覆02/03/2012 21:02:33]你的版很美啊! ^^

    回覆刪除