2010年5月31日星期一

[賞圖] CSS3做的小叮噹

此文章的連結

友人傳給MiyaC這張圖,很可愛~
用css排的小叮噹

期待IE9對CSS 3 支援度能更高...


2010年5月14日星期五

讓整個網頁包括圖片變成灰階(黑白哀悼版)grayscaling

此文章的連結

有時候,可能因為某些原因(通常是為了做哀悼版啦),
要讓整個網站短期間內變成黑白灰階版,
其實是有個很"瞬間"的方法!

在IE系列裡,可以從css裡面設定加一段:

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
就瞬間變成黑白,包括圖片也一起灰階了!



但是,ie以外的瀏覽器,就不支援這種濾鏡,必須採用程式手段...

可以看下面這個連結,介紹 如何讓非IE的瀏覽器,呈現灰階黑白版的網頁

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

2010年1月11日星期一

SEO搜尋引擎優化小結by 2009影響搜索引擎排名因素的調查報告

此文章的連結


總排名因素:
‧24% 域名的權威性和信譽 ~ 類似生活中,店家牌子老、值不值得信賴
‧22% 頁面的外鏈數量和質量
‧20% 外部鏈接的錨文字
‧15% 頁面上關鍵字使用情況
‧7% 流量和點擊率
‧6% 網絡社交關係指標 ~ 所以大家都愛弄社群嗎? XD
‧5% 域名註冊和主機數據 ~ 慎選網址


5個對搜索引擎排名最重要的排名因素

‧1.73% 非常重要 外部鏈接含有關鍵字的錨文字
‧2.71% 非常重要 外部鏈接廣度(外部鏈接的數量和質量)
‧3.67% 非常重要 外部鏈接源的多樣性(有很多來自不同域名的鏈接)
‧4.66% 非常重要 在Title標籤中使用關鍵字
‧5.66% 非常重要 基於從可信任域名到網站鏈接距離的可信賴度(比如: trustrank,domain moztrust,等等)

2009年12月22日星期二

文字左右對齊方式css2的新方法~ text的direction

此文章的連結

資訊來源:W3school

我們呈現文字的時候都是預設的從左到右,
當想要從右至左,平常可以使用 p align="right"
或者 css寫著 text-align:right

CSS2有個屬性,提供了新的方法 direction



用法超簡單,只要寫
direction:rtl
就是右(right)到(to)左(left)

同樣的,左到右就是ltr啦~

還滿特別的~ 呵



不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。





2009年11月4日星期三

做簡體網頁遇到文字錯位問題的解決方法

此文章的連結

我們在繁體中文的介面,做簡體網頁,常常會發現網頁顯示的中文字上下不齊、文字錯位的感覺,心中不斷暗罵該死的IE,討厭的簡體...

內地都會使用"宋體"字型呈現簡體中文,但是...我們看得還是會錯位啊!

其實,這有解決方法的!
解決這問題,要從兩個地方下手,沒錯!就是html和css

首先,來解決一般簡體文字會上下亂跑偏掉的問題...

【css的部份】

當然字體部份要設定好Arial跟宋體顯示,MiyaC是習慣寫成:

font-family:Arial, Helvetica, sans-serif,"宋体", "新細明體";


但是但是,我們的介面是繁體,網頁不會乖乖顯示宋體,還是會用新細明體顯示,很機車吧?!

所以,網頁宣告就很重要了! (之前有寫過meta的部份,可以點我去看看)
用上次那邊的 meta equiv="Content-Language" content="zh-CN" 這招是不夠的,怎樣他都還是不乖乖顯示宋體...
原來,要把網頁本身宣告就先加上語系,所以是要改這行:

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"

加上紅色粗體的部份,嘖嘖... 文字終於齊了!好感動啊!!!


講完,以上~


> 延伸閱讀: http://3eye.ws/2008/11/19/simplified-and-traditional-chinese-web-page-problem/


不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。





2009年10月4日星期日

使用簡單js判斷,讓不同螢幕尺寸看到不同css表現的外貌

此文章的連結

這網站很炫喔
他加了簡單的js判斷
不同螢幕尺寸 讀不同的css 表現不同的樣式

JS原始碼

function dynamicLayout(){
var browserWidth = getBrowserWidth();

// Narrow CSS rules
if (browserWidth < 640){
changeLayout("narrow");
}
// Normal (default) CSS rules
if ((browserWidth >= 640) && (browserWidth <= 960)){
changeLayout("default");
}
// Wide CSS rules
if (browserWidth > 960){
changeLayout("wide");
}
}


詳情請看原始出處~

資訊來源節錄自:網頁設計知識庫


不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。





2009年7月29日星期三

Facebook 上的 Restaurant city 飲料篇攻略~臉書RC

此文章的連結

今天臉書的餐廳維修之後,開放了飲料部份,
同時可以每種餐點選三道菜,MiyaC又開始熱衷於換材料了...

廢話不多說,之前能夠快速升級,就是看了這篇 Restaurant city食譜及食材詳細列表攻略 ,配合RC market,讓三道菜快速到達10級,讓經驗值增加快速;
但是現在多了飲料,該作者還沒更新飲料部份,MiyaC現在就來更新追加紀錄一下...

首先,MiyaC把飲料所需的材料紀錄下來,依據食材使用次數設定難度,
比方說,冰塊使用次數2,就難度2,飲料的水蜜桃茶(simple peach iced tea)需要水蜜桃+茶葉+水,材料使用次數分別為1+3+5,因此難度會列為9。

以下就是結論啦~ 難度由低至高...



最愛喝的水果茶,果然是難度最低的啊!
只有8而已~
需要冰塊、草莓、香蕉


(還不趕快跟我交換~)














再來就是難度9的水蜜桃茶
(也超愛喝的~)

需要水蜜桃、茶葉、水
(水真是飲料的搶手貨)














凍檸茶
(就是愛用港話)


需要 檸檬、冰塊、水
(黃色的是檸檬,從小就覺得很不習慣,感覺綠色的才是檸檬阿!)







Espersso 濃縮咖啡
(兩份濃縮... 我喝不下.... - -)


就 咖啡+咖啡+水













萊姆水
(不是應該是檸檬水嗎@@)


就 萊姆+冰塊+水













珍珠奶茶
(真的啦! 就叫 bubble tea)


茶葉、牛奶、糖
(怎麼沒有需要粉圓...)















巧克力奶昔


巧克力+冰淇淋+牛奶

















草莓奶昔


草莓+冰淇淋+牛奶











PS:檸檬是lemon,而萊姆是lime。
檸檬還是萊姆,都有綠色與黃色,沒有一定的顏色之分,是很難用顏色來分辨的。

台灣很多人認為檸檬是綠色,而萊姆是黃色,(鄰居都這樣說)是因為雖然我們自己有種萊姆,但產量很少,幾乎都是進口的,所以等到坐船到台灣,早就變黃了。所以台灣看到的萊姆幾乎都是黃色的。

   而西方人認為檸檬是黃色,而萊姆是綠色,是因為檸檬曾經解決了航海員的壞血病,所以西方人有直接食用檸檬的習慣。等檸檬變黃成熟以後再吃,才不會那麼 酸,還會帶點甘甜的滋味,但檸檬本身的香味就會變淡,不我們都是把檸檬用來做果汁或是料理,所以台灣檸檬在採收時,都約都在檸檬還是綠油油地,七、八分熟 時,而國外檸檬都在九分熟,甚至全熟才採收,此時檸檬就是黃色的。

來源~ http://thinkingowl.pixnet.net/blog/post/22187914


都知道MiyaC在蒐集哪三種了吧?
很好~ 快來跟MiyaC交換吧!



不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。