可見(jiàn)，目前使用800*600的幾乎是微乎其微了，1024還是居于上風(fēng)，目前19，21寸甚至更大的顯示正在逐步被廣泛使用，所以N年前流行的778，780等等都好像是幾個(gè)世紀(jì)以前的事情了。

再看一組數(shù)據(jù)

上面都是Alexa全球排名前100的站點(diǎn)，而且WordPress的皮膚，百分之90以上都是960px寬。為什么設(shè)計(jì)師們都喜歡這個(gè)數(shù)據(jù)(950px/960px)呢？以下部分轉(zhuǎn)自網(wǎng)頁(yè)柵格系統(tǒng)研究（1）：960的秘密，作者：玉伯

設(shè)計(jì)師們對(duì)蘋(píng)果情有獨(dú)衷。在 1024 x 768 的分辨率下，打開(kāi)Firefox：

自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁(yè)的實(shí)際大小為上圖中的紅色部分，高寬為 960 x 650.

數(shù)字背后的奧妙

上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。蘋(píng)果系統(tǒng)的設(shè)計(jì)者們?cè)跊](méi)有喝醉酒的情況下選擇了960，而不是其它什么1000之類(lèi)的整數(shù)，自然另有奧妙。

科學(xué)界有很多問(wèn)題都可以歸結(jié)到數(shù)學(xué)問(wèn)題上，我們也從數(shù)學(xué)著手：

960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標(biāo)記為：

N(960) = N(2^6 * 3 * 5) = 26

根據(jù)上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

根據(jù)直覺(jué)（嚴(yán)格證明也不難，不過(guò)還是留給數(shù)學(xué)系的學(xué)生去證明吧），我們得到一個(gè)有趣的結(jié)論：

要使得N(width)最大，width的取值有兩個(gè)系列：

A系列： …, 320, 720, 1440, …

B系列： …, 480, 960, 1920, …

N越大，可組合的寬度值就越多。對(duì)柵格系統(tǒng)來(lái)說(shuō)，這意味著越靈活！

目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時(shí)保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網(wǎng)頁(yè)柵格系統(tǒng)中的最佳寬度了。（也許不久的將來(lái)，將會(huì)流行1440）

以上內(nèi)容轉(zhuǎn)自http://lifesinger.org/blog/?p=375

從零開(kāi)始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器

從零開(kāi)始學(xué)習(xí)jQuery (三) 管理jQuery包裝集

從零開(kāi)始學(xué)習(xí)jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開(kāi)始學(xué)習(xí)jQuery (五) 事件與事件對(duì)象

從零開(kāi)始學(xué)習(xí)jQuery (六) jQuery中的Ajax

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫(huà)-讓頁(yè)面動(dòng)起來(lái)!

從零開(kāi)始學(xué)習(xí)jQuery (八) 插播:jQuery實(shí)施方案

從零開(kāi)始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)

從零開(kāi)始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開(kāi)始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

淘寶網(wǎng)用戶(hù)體驗(yàn)設(shè)計(jì)UED： http://ued.taobao.com/blog/
口碑網(wǎng)用戶(hù)體驗(yàn)設(shè)計(jì)UED： http://ued.koubei.com/
阿里媽媽用戶(hù)體驗(yàn)設(shè)計(jì)UED： http://ued.alimama.com/
阿里巴巴(中國(guó)站) 用戶(hù)體驗(yàn)部： http://www.aliued.cn/
阿里軟件UED團(tuán)隊(duì)： http://www.alisoftued.com
19樓UED團(tuán)隊(duì)： http://ued.dukuai.com/blog/
用戶(hù)為中心的設(shè)計(jì)(UCD),UCD大社區(qū),http://ucdchina.com/

個(gè)人技術(shù)博客：
李會(huì)軍：http://www.dotneteye.cnorg 去過(guò)博客園的應(yīng)該都知道吧，神仙級(jí)專(zhuān)家。
趙劼：http://www.cnblogs.com/JeffreyZhao/ 同上，為博客員知名專(zhuān)家，特佩服他！
淘寶玉伯：http://lifesinger.org/blog/ 淘寶前端，對(duì)前端細(xì)節(jié)研究很深入！博客更新也算頻繁。
淘寶懌飛：http://www.planabc.net/ 淘寶前端，花名圓心，博客內(nèi)容也很值得看。
cssrain:http://www.cssrain.cn/ 懶人開(kāi)發(fā)人員一定要去看看哦，資源超多，很多效果例子。特別是jquery。

源碼站：
http://www.codeplex.com 微軟的.NET源碼發(fā)布站，很多很好的.NET源代碼

用戶(hù)體驗(yàn)（User Experience，簡(jiǎn)稱(chēng)UX 或 UE）是一種純主觀的在用戶(hù)使用一個(gè)產(chǎn)品（服務(wù)）的過(guò)程中建立起來(lái)的心理感受。因?yàn)樗羌冎饔^的，就帶有一定的不確定因素。個(gè)體差異也決定了每個(gè)用戶(hù)的真實(shí)體驗(yàn)是無(wú)法通過(guò)其他途徑來(lái)完全模擬或再現(xiàn)的。但是對(duì)于一個(gè)界定明確的用戶(hù)群體來(lái)講，其用戶(hù)體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)的實(shí)驗(yàn)來(lái)認(rèn)識(shí)到。計(jì)算機(jī)技術(shù)和互聯(lián)網(wǎng)的發(fā)展，使技術(shù)創(chuàng)新形態(tài)正在發(fā)生轉(zhuǎn)變，以用戶(hù)為中心、以人為本越來(lái)越得到重視，用戶(hù)體驗(yàn)也因此被稱(chēng)做創(chuàng)新2.0模式的精髓。”—–百度百科

現(xiàn)在，幾乎人人都在談、在做用戶(hù)體驗(yàn)，有為了用戶(hù)體驗(yàn)而用戶(hù)體驗(yàn)的；有不知何為用戶(hù)體驗(yàn)，就亂指揮一通的；有做了幾天可用性改進(jìn)就宣稱(chēng)飛躍的…..當(dāng)然，也有很多是踏踏實(shí)實(shí)為廣大人民做實(shí)事，做好產(chǎn)品設(shè)計(jì)的。
不管怎樣，以下的思考文字中希望有那么一點(diǎn)點(diǎn)是閃光的。
 
看了百度百科的詞條，結(jié)合自己的經(jīng)驗(yàn)，可以這么理解：用戶(hù)體驗(yàn)，是通過(guò)接觸某樣有形或者無(wú)形的事物后，建立在用戶(hù)身上的一個(gè)范圍比較廣的情感疊加，跟樂(lè)高積木是一樣一樣的，堆得好，可以很高，某一塊不穩(wěn)，就會(huì)全倒下。那，到底有多廣呢？

1.一個(gè)購(gòu)書(shū)體驗(yàn)：流程流暢度

給自己買(mǎi)一本書(shū)，我想到的是淘寶和當(dāng)當(dāng)，有人會(huì)說(shuō)：買(mǎi)書(shū)當(dāng)然去當(dāng)當(dāng)或者卓越了。我不是這么認(rèn)為的，首先，都是網(wǎng)購(gòu)，淘寶也賣(mài)書(shū)，并且能討價(jià)還價(jià)，能了解更多細(xì)節(jié)，而當(dāng)當(dāng)不能，但如果在淘寶上價(jià)格太高，沒(méi)有當(dāng)當(dāng)劃算，且不是很急著買(mǎi)，那我會(huì)選擇當(dāng)當(dāng)。
—–這里面有兩個(gè)點(diǎn)：網(wǎng)絡(luò)購(gòu)物習(xí)慣養(yǎng)成的條件反射 和  買(mǎi)賣(mài)家之間的交流 ，這兩個(gè)是體驗(yàn)的一部分。
決定上當(dāng)當(dāng)后，打開(kāi)首頁(yè)，logo旁的“十年品質(zhì) 放心低價(jià)”，有點(diǎn)暖，而導(dǎo)航下左邊的這個(gè)綠色突出的區(qū)域也表明，當(dāng)當(dāng)主要核心業(yè)務(wù)就是書(shū)！整個(gè)配色在視覺(jué)上挺舒服，而導(dǎo)航和搜索也讓我很快找到我要買(mǎi)的書(shū)—《教父》。

——站點(diǎn)的載入速度是個(gè)大問(wèn)題，當(dāng)當(dāng)基本能在3秒內(nèi)打開(kāi)首頁(yè)，不錯(cuò)的優(yōu)化。廣告語(yǔ)和用色貼合國(guó)內(nèi)消費(fèi)人群的心理，起碼對(duì)于我來(lái)說(shuō)，覺(jué)得：可信賴(lài)，不太亂。
找到我要的書(shū)后，我點(diǎn)擊了購(gòu)買(mǎi)，進(jìn)入了我的購(gòu)物車(chē)，有一個(gè)疑慮、不舒服：

—–不知道這個(gè)是好，還是壞，可能對(duì)于不同的人，有不同的感受，這個(gè)推薦本身是很好的，但讓我疑惑的是，它大面積的空間和眾多黃色按鈕，讓我找不著北了，因?yàn)榈竭@步，我心里想著：該結(jié)算了，但處于商業(yè)目的，推薦區(qū)域在一定程度上(或許我比較閑的時(shí)候，推薦對(duì)我有用)干擾了我。
接下來(lái)的結(jié)算流程很順利，我選擇的是貨到付款，很好的是：最后提示我，發(fā)貨地點(diǎn)是廣州，會(huì)在2-3天后發(fā)貨，郵箱也很快收到訂單生成的郵件。接下來(lái)就是等待，三天后，接到聲音不太舒服的電話(huà)，說(shuō)是當(dāng)當(dāng)網(wǎng)的，我想，應(yīng)該是書(shū)到了。可憐的是，對(duì)方收錢(qián)時(shí)，零錢(qián)不夠。
—–最終是買(mǎi)到書(shū)了，快遞的小伙子找不了我的零錢(qián)，我也沒(méi)要了，書(shū)的包裝不太好。
整個(gè)過(guò)程，總體打分8.5分?？偟膩?lái)說(shuō)，這本書(shū)的購(gòu)買(mǎi)的體驗(yàn)流暢度是很滿(mǎn)意的，沒(méi)有出現(xiàn)意外的中斷，要知道體驗(yàn)的流程能完整的走完才意味著，這個(gè)產(chǎn)品、這個(gè)服務(wù)，是可用的，這是根基，其他的視覺(jué)效果和折扣等等，都是建立在他之上。而流暢度，就跟用戶(hù)在這個(gè)過(guò)程中碰到疑惑和不解的強(qiáng)烈程度是成反比的，想提高流暢度，就需要捋清楚，讓這個(gè)核心購(gòu)買(mǎi)流程以最短的時(shí)間完成，減少干擾。

2.邊緣體驗(yàn)，一樣的重要

上面的購(gòu)書(shū)例子，有個(gè)地方很重要，那就是最后的線(xiàn)下體驗(yàn)，我把他作為邊緣體驗(yàn)的一種，有別于線(xiàn)上的核心業(yè)務(wù)。
訂單下來(lái)后，系統(tǒng)能根據(jù)我提交的送貨地址，選出最近的發(fā)貨地點(diǎn)，減少物流時(shí)間，并且讓購(gòu)買(mǎi)者知道，這個(gè)點(diǎn)是好的，說(shuō)明：我一直為你著想。
但快遞環(huán)節(jié)卻有點(diǎn)問(wèn)題，因?yàn)榇嬖谝欢ǖ牟豢煽匾蛩?。送快遞的人，需要經(jīng)過(guò)一定的培訓(xùn)，否則，是在砸當(dāng)當(dāng)?shù)呐谱?。電?huà)中的語(yǔ)氣讓人不舒服，書(shū)的包裝問(wèn)題也讓人不安，書(shū)角磨破了，就這兩個(gè)點(diǎn)，購(gòu)買(mǎi)者就有可能把整個(gè)交易撤銷(xiāo)。
屬于邊緣體驗(yàn)范疇的還有很多，例如：你到了友商網(wǎng)舉辦的一個(gè)論壇，門(mén)前的海報(bào)是否能夠傳遞本次論壇的信息、是否能夠?qū)⒂焉叹W(wǎng)的品牌進(jìn)行詮釋?zhuān)o你的良好感覺(jué)有多少？再例如市場(chǎng)營(yíng)銷(xiāo)人員的著裝和談吐，在用戶(hù)眼里，在一定程度上，也在間接體驗(yàn)他們的產(chǎn)品，起碼，穿著拖鞋的營(yíng)銷(xiāo)，不會(huì)給人好的感覺(jué)。
邊緣體驗(yàn)，一樣重要。

3.無(wú)形的體驗(yàn)

無(wú)形的體驗(yàn)有兩種，一種是某用戶(hù)在使用、體驗(yàn)產(chǎn)品后得出口碑傳播給另外的用戶(hù)或者潛在用戶(hù)，對(duì)于后者，他已開(kāi)始無(wú)形情感體驗(yàn)；另一種是用內(nèi)而外的，是生產(chǎn)此產(chǎn)品的團(tuán)隊(duì)或者說(shuō)這個(gè)企業(yè)由內(nèi)發(fā)出的一些信息，有意的或無(wú)意的信息。
對(duì)于第一種，有時(shí)候口碑會(huì)決定了某個(gè)用戶(hù)是否與產(chǎn)品有緣，舉個(gè)例子，小姨買(mǎi)了一個(gè)xx牌子的冰箱，用了兩個(gè)月，燈管壞了，打開(kāi)冰箱門(mén)燈不亮了，聯(lián)系維修后好景不長(zhǎng)，還是壞，于是她對(duì)死黨說(shuō)：以后打死也不會(huì)買(mǎi)xx牌的東西了，這個(gè)死黨有可能以后就跟這個(gè)牌子絕緣了，因?yàn)樗龑?duì)“它”的無(wú)形體驗(yàn)很不好。當(dāng)然，這個(gè)口碑產(chǎn)生的根源，就是產(chǎn)品質(zhì)量本身。
而第二種范圍包括的就比較大了，如果是上市公司，那么你的財(cái)務(wù)狀況是否良好；組織結(jié)構(gòu)是不是頻繁大調(diào)整；員工整體對(duì)外的信息放射是否正面；網(wǎng)絡(luò)媒體，傳統(tǒng)媒體傳播的信息是否有利公司發(fā)展（不管是不是軟文），這些，都是用戶(hù)或者潛在用戶(hù)、普通人可能接觸到的一面，這也是一個(gè)無(wú)形的體驗(yàn)。

4.引領(lǐng)用戶(hù)的“體驗(yàn)”

在初步發(fā)展階段，無(wú)數(shù)產(chǎn)品和服務(wù)都是跟隨用戶(hù)需求，用戶(hù)需要什么，就給什么，以找準(zhǔn)需求點(diǎn)為重中之重，這個(gè)是對(duì)的，但到了產(chǎn)品成熟期，到了市場(chǎng)占有率足夠高后，需要考慮的，就是引導(dǎo)潮流，引領(lǐng)用戶(hù)朝雙贏的方向。web中的視覺(jué)概念設(shè)計(jì)，汽車(chē)中的概念車(chē)，走的，就是這個(gè)路線(xiàn)。

5.核心產(chǎn)品體驗(yàn)

這個(gè)放在最后是因?yàn)槭侨硕贾?，核心產(chǎn)品，必須做好可用性，通過(guò)不斷迭代，適當(dāng)做好減法，提供一個(gè)體驗(yàn)好的產(chǎn)品。具體到各個(gè)產(chǎn)品和服務(wù)各不相同，無(wú)需展開(kāi)。
總之，用戶(hù)體驗(yàn)設(shè)計(jì)并不復(fù)雜，但需要耐得住性子，需要注意觸角，因?yàn)椋瑥慕佑|這個(gè)品牌那一刻起，用戶(hù)體驗(yàn)就在進(jìn)行，是疊加還是消耗呢？就看能否盡量做到人人UE，能否將這些好的idea引導(dǎo)、聚合。

加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無(wú)所謂，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算。客戶(hù)端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求，所以，圖片越多請(qǐng)求次數(shù)越多，造成延遲的可能性也就越大。

二，CSS Sprite的使用

有幾篇關(guān)于CSS Sprites的文章，基本上把其原理和機(jī)制說(shuō)明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中關(guān)于CSS Sprites的內(nèi)容3.2. CSS Sprites

三，CSS Sprite的例子

[原文：http://blog.rexsong.com/?p=746#comments]

1. 圖片限制(Image Slicing)

典型如文本編輯器，小圖標(biāo)特別多，打開(kāi)時(shí)一張張跑出來(lái)，給用戶(hù)的感覺(jué)很不好。如果能用一張圖解決，則不會(huì)有這個(gè)問(wèn)題，比如百度空間、163博客、Gmail都是這么做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 單圖轉(zhuǎn)滾(Single-image Rollovers)

觸發(fā)切換圖片的需求，傳統(tǒng)方案得重新請(qǐng)求新圖片，因?yàn)榫W(wǎng)絡(luò)問(wèn)題經(jīng)常造成停留或等待。如果能把多種狀態(tài)合并成一張圖，就能完美解決，然后再使用背景圖技術(shù)模擬動(dòng)態(tài)效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延長(zhǎng)背景(Extend Background Image)

如果圖片的某邊可以背景平鋪無(wú)限延長(zhǎng)，則不需要每個(gè)角、每條邊單獨(dú)搞出來(lái)，圖片能少一個(gè)就少一個(gè)。其實(shí)，這個(gè)理論還可以擴(kuò)展到四角容器里，好處是能大大簡(jiǎn)化HTML Structure。

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

綜合案例

Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/

CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/

四，CSS Sprites的問(wèn)題

由于IE6存在的background的flicker問(wèn)題IE6/Win, background image on <a>, cache=‘check every visit’: flicker!，有人針對(duì)此問(wèn)題提出了解決方案Fast Rollovers Without Preload

關(guān)于IE6的flicker問(wèn)題，fivesevensix.com上有一篇很不錯(cuò)的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo.org的CSS tests and experiments是關(guān)于css各種功能不錯(cuò)的參考手冊(cè)和測(cè)試工具。

五，相關(guān)資源

What Are CSS Sprites?

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites/

CSS Sprites Generator

http://www.csssprites.com/

http://spritegen.website-performance.org/

Fast Rollovers Without Preload

http://wellstyled.com/css-nopreload-rollovers.html

JavaScript Sprite Animation Using jQuery

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

How to create CSS sprites

http://fatagnus.com/how-to-create-css-sprites/

Creating Rollover Effects with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

Building a Dynamic Banner with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

CSS Sprites and IE/Win Flicker Issue

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

css用法測(cè)試工具：CSS tests and experiments

http://www.brunildo.org/test/index.html

各瀏覽器CSS hack兼容表：
 

整體測(cè)試代碼示例：

復(fù)制代碼代碼如下:
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

復(fù)制代碼代碼如下:
#menu { line-height: 23px; }/* firefox 瀏覽器實(shí)行這句定義 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 這句定義主要尖對(duì)IE8來(lái)hack*/
#menu { *line-height: 23px; }/*ie6,ie7 這句定義主要尖對(duì)IE7來(lái)hack*/
#menu { _line-height: 23px; }/*ie6 瀏覽器優(yōu)先實(shí)行這句定義*/
或者寫(xiě)成一句，注意順序
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
或者
* html #menu { line-height: 23px; } /* IE6 瀏覽器實(shí)行這句定義 */
*+html #menu { line-height: 23px; }/* IE7 瀏覽器實(shí)行這句定義*/

其他說(shuō)明：
1、如果你的頁(yè)面對(duì)IE7兼容沒(méi)有問(wèn)題，又不想大量修改現(xiàn)有代碼，同時(shí)又能在IE8中正常使用，微軟聲稱(chēng)，開(kāi)發(fā)商僅需要在目前兼容IE7的網(wǎng)站上添加一行代碼即可解決問(wèn)題，此代碼如下：
<meta http-equiv="x-ua-compatible" content="ie=7" />
2、body:nth-of-type(1) 如果這樣寫(xiě)，表示全局查找body，將會(huì)對(duì)應(yīng)第一個(gè)<body>。
3、還有其他寫(xiě)法，比如：
*html #test{}或者 *+html #test{}
4、*+html 對(duì)IE7的hack 必須保證HTML頂部有如下聲明：
http://www.w3.org/TR/html4/loose.dtd
5、順序：Firefox、IE8、IE7、IE6依次排列。
小知識(shí)：什么是CSS hack？
　　由于不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對(duì)CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。
　　這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
　　這個(gè)針對(duì)不同的瀏覽器寫(xiě)不同的CSS code的過(guò)程，就叫CSS hack，也叫寫(xiě)CSS hack。
下面是補(bǔ)充：

復(fù)制代碼代碼如下:
selector{
property:value; /* 所有瀏覽器 */
property:value\9; /* 所有IE瀏覽器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

詳細(xì)出處參考：http://www.jb51.net/css/24946.html

border-radius(圓角)的幾點(diǎn)說(shuō)明：

border-radius:長(zhǎng)度
Firefox支持border-radius(圓角)：-moz-border-radius:2px;
webkit內(nèi)核的Safari和Chrome支持border-radius(圓角)：-webkit-border-radius:2px;
Opera支持border-radius(圓角)：border-radius:2px;
IE不支持border-radius(圓角)

我們還可以隨意指定圓角的位置，左上、左下、右上、右下四個(gè)方向。在firefox、webkit內(nèi)核的Safari和Chrome和opera（css3）、中的具體書(shū)寫(xiě)格式如下：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圓角)還有其他一些用法，F(xiàn)irefox、webkit內(nèi)核的Safari和Chrome和opera（css3）其他寫(xiě)法有些略微的差異，具體可以查看以下網(wǎng)址：https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/