摘要：加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)。如果重量在200K以內(nèi)，只要網(wǎng)絡(luò)不是特別慢，效率都差不多。但是，如果圖片個(gè)數(shù)多一倍，效率將明顯低一個(gè)檔次。　　傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無(wú)所謂，計(jì)算機(jī)統(tǒng)一都按Byte計(jì)算。客戶端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求，所以，圖片越多請(qǐng)求次數(shù)越多，造成延遲的可能性也就越大。因?yàn)橐粡垐D片的傳輸時(shí)間，通常遠(yuǎn)小于請(qǐng)求等待的時(shí)間。減少圖片的三個(gè)技巧(CSS Sprite)：1. 圖片限制(Image Slicing)典型如文本編輯器，小圖標(biāo)特別多，打開(kāi)時(shí)一張張跑出來(lái)，給用戶的感覺(jué)很不好。如果用一張圖解決，則不會(huì)有這個(gè)問(wèn)題，比如百度空 閱讀全文

摘要：盡管人們期望在屏幕上有些改變，但是CSS和HTML對(duì)頁(yè)面中的交互能做的實(shí)在太少了，而那些還需要用代碼來(lái)實(shí)現(xiàn)。比如一個(gè)鏈接要么是這個(gè)顏色，要么是那個(gè)顏色；一個(gè)文本區(qū)域要么這么大，要么那么大；一張圖片要么是透明的要么是不透明的；它們是從一個(gè)狀態(tài)直接變到另一個(gè)狀態(tài)——中間并沒(méi)有過(guò)渡。　　這導(dǎo)致大部分網(wǎng)頁(yè)有些生硬，因?yàn)樵刂粫?huì)很死板的切換或改變。　　是的，你可以使用DHTML、jQuery或者自己編寫(xiě)JS來(lái)實(shí)現(xiàn)過(guò)度，但是這需要更多的代碼來(lái)實(shí)現(xiàn)本應(yīng)該非常簡(jiǎn)單的功能。　　我們需要的是快速而簡(jiǎn)單的方法來(lái)給頁(yè)面添加簡(jiǎn)單的變換(transition)效果。在本文中，你會(huì)發(fā)現(xiàn)很有用的關(guān)于CSS變換(transit 閱讀全文

摘要：HTML5 的 Canvas 對(duì)象將改變 JavaScript 的使命，使之成為 HTML5 下強(qiáng)大的動(dòng)畫(huà)腳本編寫(xiě)工具。本文介紹了 8 個(gè)你從未見(jiàn)過(guò)的，基于 HTML5 Canvas 和 JavaScript 的動(dòng)畫(huà)，這些令人難以置信的效果將使你對(duì) HTML5 徹底折服。需要指出的是，這些都是瀏覽器的原生動(dòng)畫(huà)，無(wú)需任何插件。Tunnelers純 JavaScript + HTML5 Canvas 生成的交互動(dòng)畫(huà)，難以置信。The Mesmerizer在格子中移動(dòng)鼠標(biāo)，顏色隨著改變并擴(kuò)散到周圍的格子，很迷幻。用鼠標(biāo)點(diǎn)四角的格子，或按鍵盤(pán)，可以看到更奇妙的效果。Burn在頁(yè)面上移動(dòng)鼠標(biāo)，或按下鼠標(biāo) 閱讀全文

摘要：Web 設(shè)計(jì)與開(kāi)發(fā)師的一個(gè)重要工作環(huán)節(jié)是跨瀏覽器測(cè)試，誰(shuí)讓我們生活在這個(gè)既幸福又痛苦的時(shí)代，有那么多瀏覽器擺在我們面前，還有那個(gè)噩夢(mèng)般總也擺脫不掉的 IE6。本文講述了與跨瀏覽器測(cè)試有關(guān)的各種問(wèn)題與知識(shí)，包括渲染，平臺(tái)，設(shè)備以及 JavaScript 引擎。夢(mèng)幻五組合IE 獨(dú)霸天下的那些日子，Web 設(shè)計(jì)師不時(shí)陷入 IE 同它競(jìng)爭(zhēng)者的口水戰(zhàn)，然而，當(dāng)一些新的，注重 Web 標(biāo)準(zhǔn)的瀏覽器出現(xiàn)時(shí)，事情... 閱讀全文

摘要：作為 Web 設(shè)計(jì)師，你的網(wǎng)站在各種瀏覽器中有完全一樣的表現(xiàn)是很多人的目標(biāo)，然而這是一個(gè)永遠(yuǎn)無(wú)法真正實(shí)現(xiàn)的目標(biāo)，很多人認(rèn)為，完美的跨瀏覽器兼容并不必要，這樣說(shuō)雖然沒(méi)錯(cuò)，但在很多情形，一種近似的兼容還是很容易實(shí)現(xiàn)的，本文講的是各種跨瀏覽器兼容的 CSS 編碼準(zhǔn)則和技巧。理解 CSS 盒子模型如果你想實(shí)現(xiàn)不需要很多奇巧淫技的跨瀏覽器兼容的 CSS 代碼，透徹地理解 CSS 盒子模型是首要事情，CSS ... 閱讀全文

摘要：盒子模型（Box Model）是 CSS 的核心，現(xiàn)代 Web 布局設(shè)計(jì)簡(jiǎn)單說(shuō)就是一堆盒子的排列與嵌套，掌握了盒子模型與它們的擺放控制，會(huì)發(fā)現(xiàn)再?gòu)?fù)雜的頁(yè)面也不過(guò)如此，然而，任何美好的事物都有缺憾，盒子模型有兩種不同的詮釋，一種來(lái)自 IE6，一種來(lái)自 W3C 標(biāo)準(zhǔn)瀏覽器。盒子模型下圖就是一個(gè)典型的盒子模型示意圖在內(nèi)容區(qū)外面，依次圍繞著 padding 區(qū)，border 區(qū)，margin 區(qū)，這一模型結(jié)構(gòu)在所有主流瀏覽器都是一致的。通過(guò)盒子模型，我們可以為我們的內(nèi)容設(shè)置邊界，留白以及邊距，盒子模型最典型的應(yīng)用是這樣：我們有一段內(nèi)容，可以為這段內(nèi)容設(shè)置一個(gè)邊框，為了讓內(nèi)容不至于緊挨著邊框，可以設(shè)置 閱讀全文

摘要：支持 CSS3 和 HTML5 的瀏覽器越來(lái)越多，甚至包括最新版的 IE，當(dāng)然，所謂支持僅僅是部分支持，因?yàn)?CSS3 和 HTML5 的W3C 規(guī)范都尚未形成。如果你現(xiàn)在就希望使用 CSS3 和 HTML5 創(chuàng)建你的站點(diǎn)，至少要對(duì)各個(gè)瀏覽器對(duì)這兩種新技術(shù)的支持情況有一個(gè)全面了解。 需要指出的是，即使同一個(gè)瀏覽器的同一個(gè)版本，在 Mac 和 Windows 兩個(gè)平臺(tái)，它們對(duì) CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome， Safari， Firefox， Opera， IE 5 大瀏覽器，在 Mac 和 Windows 兩個(gè)平臺(tái)，對(duì) CSS3 和 HTML5 各種功能. 閱讀全文

摘要：一、跨瀏覽器的網(wǎng)頁(yè)設(shè)計(jì)一直是讓人很頭疼的問(wèn)題，這不只是因?yàn)闉g覽器的版本眾多，還有一個(gè)重要的原因是相同瀏覽器的不同時(shí)期的版本也會(huì)有差異，甚至是在不同操作同臺(tái)上還會(huì)有不同。因此使CSShack技術(shù)進(jìn)行瀏覽器區(qū)分是實(shí)現(xiàn)跨瀏覽器訪問(wèn)一個(gè)好方法。CSSHack技術(shù)有很多，具體可以查看： 本文據(jù)說(shuō)的主要是通過(guò)“.”，“>”，“*”，“_”來(lái)區(qū)分。以下是本人對(duì)這四種符號(hào)的測(cè)試結(jié)果： ———————IE6——IE7——IE8——FF2——FF3—Opera9.5 >property——Y——Y——Y——N——N——N .property——Y——Y——Y——N——N——N *property——Y 閱讀全文

摘要：現(xiàn)代 Web 設(shè)計(jì)與開(kāi)發(fā)越來(lái)越看重瀏覽器兼容問(wèn)題，IE 每個(gè)新版本的推出，都在 CSS 的標(biāo)準(zhǔn)化方面前進(jìn)一大步，同時(shí)，也就不可避免地在 IE 的各個(gè)主要版本之間產(chǎn)生兼容問(wèn)題，盡管 IE8 推出已有時(shí)日，使用 IE6的用戶仍然相當(dāng)可觀。本文以速查手冊(cè)的形式介紹 CSS （2.1 和 3）在 IE6,7,8 三個(gè)版本之間的兼容情況。這套速查手冊(cè)可以打印成 A3 尺寸，共2頁(yè)，以下是各種不同格式下載：高分辨率 GIF 圖片格式，第一頁(yè)，第二頁(yè)P(yáng)DF 格式，第一頁(yè)，第二頁(yè) 閱讀全文

摘要：Cheat Sheet 一詞在中文中并沒(méi)有很貼切的對(duì)譯，大概是考試作弊條一類的東西，這要求 Cheat Sheet 必須短小精悍又覆蓋廣泛，作為 Web 開(kāi)發(fā)與設(shè)計(jì)師，免不了在工作時(shí)查詢大量資料，某個(gè) Web 色值，某個(gè) JavaScript 庫(kù)的核心語(yǔ)法，這類資料如果攢齊了，怕有半間屋子那么多，如果用 Cheet Sheet 也許幾十頁(yè)紙就夠了，本文收集了近百份用于 Web 開(kāi)發(fā)與設(shè)計(jì)的 Cheet Sheet，你會(huì)發(fā)現(xiàn)他們非常實(shí)用。HTML, XHTML, CSS2CSS2 Cheat Sheet 不僅是一份完整的 CSS2 速查手冊(cè)，還讓你了解每個(gè)屬性該怎么用。預(yù)覽 | 下載 （PDF） 閱讀全文

摘要：CSS 3 + HTML 5 是未來(lái)的 Web，它們都還沒(méi)有正式到來(lái)，雖然不少瀏覽器已經(jīng)開(kāi)始對(duì)它們提供部分支持。本文介紹了 5 個(gè) CSS3 技巧，可以幫你實(shí)現(xiàn)未來(lái)的 Web，不過(guò)，這些技術(shù)不應(yīng)該用在正式的客戶項(xiàng)目，它們更適合你的個(gè)人博客站點(diǎn)，Web 設(shè)計(jì)社區(qū)，或者不會(huì)有客戶向你投訴的場(chǎng)合。1. 圓角效果CSS3 新功能中最常用的一項(xiàng)是圓角效果，標(biāo)準(zhǔn) HTML 方塊對(duì)象是90度方角的，CSS3 可以幫你實(shí)現(xiàn)圓角。-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; 甚至單個(gè)角也可以實(shí)現(xiàn)圓角，不過(guò) M. 閱讀全文

摘要：關(guān)于top、clientTop、scrollTop、offsetTop等的介紹 閱讀全文

摘要：半透明效果有時(shí)候會(huì)給頁(yè)面增加不少色彩，特別是Vista盛行之后，半透明效果更加受推崇。在諸多可用于Web瀏覽的圖片格式中，只有PNG格式和Gif格式可以實(shí)現(xiàn)半透明效果，不過(guò)Gif格式的半透明效果很有限，而且會(huì)大范圍失真，所以目前最流行的方式就是使用PNG格式圖片。不過(guò)可惜的是，在Internet Explorer 6及以下版本中都不支持PNG半透明效果（至少是不直接支持）。不過(guò)幸好Microsoft在這些瀏覽器中內(nèi)置了其他的功能，可以幫助我們來(lái)實(shí)這種半透明的效果。一、我們看一下普通情況下在現(xiàn)代瀏覽器中半透明效果的實(shí)現(xiàn)首先要有一張半透明的PNG格式圖片，這個(gè)制作很簡(jiǎn)單，在Photoshop中新建 閱讀全文

摘要：CSS對(duì)瀏覽器的兼容性有時(shí)讓人很頭疼,或許當(dāng)你了解當(dāng)中的技巧跟原理,就會(huì)覺(jué)得也不是難事,從網(wǎng)上收集了IE7,6與Fireofx的兼容性處理方法并整理了一下.對(duì)于web2.0的過(guò)度,請(qǐng)盡量用xhtml格式寫(xiě)代碼,而且DOCTYPE 影響 CSS 處理,作為W3C的標(biāo)準(zhǔn),一定要加 DOCTYPE聲名. 　　 　　CSS技巧 　　 　　1.div的垂直居中問(wèn)題 vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行 　　 　　2. margin加倍的問(wèn)題 設(shè)置為float的div在ie下 閱讀全文

摘要：*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽。所以要解決padding的兼容問(wèn)題就要靠前面提到的標(biāo)簽。 以sccas-site為例，左側(cè)導(dǎo)航欄在padding上產(chǎn)生了ie6、ie7以及ff瀏覽器不兼容，修改代碼如下： #menu7 li a { height:25px; /*border-righ... 閱讀全文

摘要：在看js代碼時(shí)，有時(shí)會(huì)看到關(guān)于quirks mode(怪異模式)和strict mode(嚴(yán)格格式)的東西，一直也沒(méi)深究怎么回事，只是零零碎碎的有些概念，最近終于受不了這種似懂非懂的感覺(jué)，決定好好學(xué)習(xí)總結(jié)一下。 1、quirks mode和strict mode是瀏覽器解析css的兩種模式，或者可以稱之為解析方法。目前正在使用的瀏覽器這兩種模式都支持 。 2、歷史原因。 當(dāng)早期的瀏覽... 閱讀全文

摘要：如果網(wǎng)頁(yè)中定義的中英文字體不同，這會(huì)導(dǎo)致下劃線不對(duì)齊。這種情況在IE瀏覽器中存在，F(xiàn)irefox瀏覽器無(wú)此問(wèn)題。解決辦法是： Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->a:hover { border:none; tex... 閱讀全文