隨筆分類 - CSS3
樣式設(shè)置
摘要:加速的關(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...
閱讀全文

浙公網(wǎng)安備 33010602011771號(hào)