[賞圖] CSS3做的小叮噹

友人傳給MiyaC這張圖，很可愛～

用css排的小叮噹

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

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

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

在IE系列裡，可以從css裡面設定加一段：

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

就瞬間變成黑白，包括圖片也一起灰階了！



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

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

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

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

資訊來源：wowbox blog (網頁設計知識庫)

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


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

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

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

資訊來源：W3school

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

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



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

同樣的，左到右就是ltr啦～

還滿特別的～ 呵

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

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

我們在繁體中文的介面，做簡體網頁，常常會發現網頁顯示的中文字上下不齊、文字錯位的感覺，心中不斷暗罵該死的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/

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

使用簡單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");
}
}


詳情請看原始出處～

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

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

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交換吧！

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