卡卡網(wǎng)

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，有時(shí)遇到某個(gè)DIV內(nèi)容被其他層覆蓋擋住了，怎么辦呢？我們?nèi)绾巫屇骋籇IV層顯示在上面？其實(shí)，使用css屬性 z-index 就能解決問(wèn)題。

在現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中，鼠標(biāo)移到圖片上圖片放大的效果常常被用到，這個(gè)效果多應(yīng)用于文章列表里。我一開始以為是用JQuery來(lái)實(shí)現(xiàn)的，后來(lái)才知道原來(lái)是用CSS3來(lái)實(shí)現(xiàn)的，用CSS3來(lái)實(shí)現(xiàn)會(huì)更加簡(jiǎn)單和方便。本文將介紹如何用CSS3來(lái)實(shí)現(xiàn)這個(gè)功能。

本文將繼續(xù)介紹用CSS3來(lái)畫一個(gè)半圓的方法。 CSS3畫一個(gè)半圓無(wú)論圓角、圓弧、實(shí)心圓、半圓，css3的實(shí)現(xiàn)代碼都是 border-radius 屬性，border-radius 不但可以定義圓半徑和圓角大小，還可以設(shè)置圓弧的方向，進(jìn)而畫出各種方向的半圓。

在前文中介紹過(guò)CSS3實(shí)現(xiàn)圓角的方法，代碼更少更簡(jiǎn)單，不過(guò)由于其不兼容IE8瀏覽器，所以就目前IE8仍然占一定用戶比例的情況下，CSS3要完全取代CSS還不太現(xiàn)實(shí)。因此本文將介紹純CSS實(shí)現(xiàn)圓角的4種寫法，該方法對(duì)比CSS3的優(yōu)勢(shì)是不用考慮瀏覽器的兼容問(wèn)題。

當(dāng)你要用到一個(gè)圓形icon的時(shí)候，你可能想到通過(guò)圖片軟件來(lái)制作，在css3之前，大家都是通過(guò)圖片+css來(lái)實(shí)現(xiàn)各種各樣的樣式效果?，F(xiàn)在，我們用css3的代碼，輕松就能畫出實(shí)心圓了。

圓波擴(kuò)散動(dòng)畫效果，就是一個(gè)圓由中心向四周循環(huán)擴(kuò)散的動(dòng)畫效果。圓波擴(kuò)散動(dòng)畫效果應(yīng)用非常廣泛，例如可以用來(lái)表示某一個(gè)位置的狀態(tài)信息，在網(wǎng)頁(yè)設(shè)計(jì)中，常常被用來(lái)作為登錄或切換頁(yè)面時(shí)的等待狀態(tài)。本文將使用純CSS3實(shí)現(xiàn)上圖動(dòng)畫效果。

要在網(wǎng)頁(yè)上顯示各種算式的符號(hào)的時(shí)候，我們大多數(shù)人是先在Word里插入，然后復(fù)制粘貼到網(wǎng)頁(yè)里，不過(guò)要在網(wǎng)頁(yè)上顯示各種計(jì)算符號(hào)和特殊符號(hào)，還是建議用轉(zhuǎn)義字符串。本文收集了各種計(jì)算符號(hào)和特殊符號(hào)的HTML代碼，在編寫網(wǎng)頁(yè)代碼時(shí)可直接使用，值得收藏，以作備用。

有的時(shí)候我們要用HTML代碼來(lái)輸出顯示乘號(hào)（×）、除號(hào)（÷）、雙引號(hào)（"）等字符實(shí)體，例如需要顯示某個(gè)計(jì)算公式的時(shí)候。其實(shí)幾乎所有的字符實(shí)體（尤其是大量的特殊字符）都有其對(duì)應(yīng)的HTML代碼的寫法，本文將給大家介紹各種字符實(shí)體的HTML寫法。

每次設(shè)計(jì)一張網(wǎng)頁(yè)或一個(gè)表單，都對(duì)各種瀏覽器的兼容問(wèn)題傷透腦筋，尤其是IE家族。在做兼容性設(shè)計(jì)時(shí)，我們往往會(huì)使用各種瀏覽器能識(shí)別的獨(dú)特語(yǔ)法進(jìn)行hack，從而達(dá)到各種瀏覽器下顯示正常的目的。其中，我們用得最多莫屬于\9和\0了。\9和\0是hack IE8、IE9、IE11的獨(dú)特標(biāo)識(shí)。但是問(wèn)題來(lái)了，\9和\0到底怎樣hack IE8、IE9、IE11這三個(gè)瀏覽器？

在上一篇文章里介紹了用css背景圖實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)的方法，本文將介紹用Font Awesome實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)的方法。 Font Awesome是一個(gè)圖標(biāo)字體庫(kù)，包含300多種常見小圖標(biāo)，如小箭頭之類的icon，使用起來(lái)相當(dāng)方便，只需引用一個(gè)css文件，是現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)師常用的插件之一。

許多知名網(wǎng)站都在文字鏈的右邊加一個(gè)箭頭圖標(biāo)，例如Google站長(zhǎng)管理后臺(tái)，Alexa官網(wǎng)等，這樣設(shè)計(jì)的好處是讓鏈接更醒目，更容易辨認(rèn)。文字鏈右邊加一個(gè)箭頭圖標(biāo)的方法，多數(shù)人是使用css背景圖來(lái)實(shí)現(xiàn)，包括上面提到的Google站長(zhǎng)管理后臺(tái)，Alexa官網(wǎng)等。是的，這種方法最容易掌握和應(yīng)用。這正是本文要介紹的實(shí)現(xiàn)方法。

近日在做一個(gè)網(wǎng)頁(yè)標(biāo)簽列表，要求不能換行，一開始以為比較容易，三兩下就把代碼寫完了，并且在Firefox和Chrome瀏覽器測(cè)試通過(guò)，不過(guò)，在IE11一看，卻出人意料的沒有達(dá)到預(yù)期效果，li inside-block在IE11里竟然無(wú)效！照樣換行！為何無(wú)效？難道代碼還要hack一下IE11？

之前設(shè)計(jì)網(wǎng)頁(yè)，如果希望div或table居中，總是用<center></center>把它包起來(lái)，但是這樣的結(jié)果，div或table雖然居中了，但div或table里面的文字也居中了，這是不符合設(shè)計(jì)者意愿的。那么，我們能否用css實(shí)現(xiàn)div或table居中，文字不居中呢？答案是肯定的，本文將給你介紹如何實(shí)現(xiàn)此效果。

IE7、IE8、IE9、IE11雖然同屬IE家族，但他們?cè)诰W(wǎng)頁(yè)渲染時(shí)，對(duì)css屬性的識(shí)別卻不盡相同，因此，我們會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)在IE9瀏覽好好的，卻在IE11上瀏覽時(shí)出現(xiàn)錯(cuò)亂的問(wèn)題。本文將舉例介紹IE家族IE7、IE8、IE9、IE11的css hack的問(wèn)題，了解它們之間的差異，從而能夠?qū)懗黾嫒菪粤己玫腸ss代碼。

blockquote默認(rèn)的雙引號(hào)千篇一律太過(guò)普通，我們能否更改它并美化它，以搭配網(wǎng)頁(yè)模版的視覺要求？答案是肯定的。下面我就以兩個(gè)實(shí)例來(lái)教你怎樣修改和美化blockquote雙引號(hào)，并送上漂亮的css樣式。

有關(guān)Blockquote的css樣式，上一篇已經(jīng)介紹了《5個(gè)Blockquote的css樣式》，不過(guò)，那是使用css1的寫法，要借助雙引號(hào)的圖片和span、div等標(biāo)簽來(lái)完成。今天將介紹3個(gè)使用css3來(lái)實(shí)現(xiàn)的Blockquote樣式，代碼更簡(jiǎn)潔，并且無(wú)需借助圖片，推薦使用。

Blockquote標(biāo)簽多用于文章引用內(nèi)容的時(shí)候，這里將介紹8個(gè)blockquote的css樣式，通過(guò)實(shí)例，讓大家進(jìn)一步了解blockquote的用法。

在網(wǎng)頁(yè)設(shè)計(jì)中，一些區(qū)域的標(biāo)題文字是不能換行的，例如首頁(yè)顯示的文章標(biāo)題，因?yàn)椴季质枪潭ǖ?，換行會(huì)打亂布局，從而使網(wǎng)頁(yè)產(chǎn)生錯(cuò)位。因此，我們需要一行一段文字，超出行寬的文字用省略號(hào)表示或者直接去掉不用省略號(hào)代替。

今天用IE11使用卡卡網(wǎng)的網(wǎng)站速度診斷工具時(shí)，發(fā)現(xiàn)選項(xiàng)的排版是錯(cuò)位的，我大吃一驚，因?yàn)樵摴ぞ呱暇€有半年多時(shí)間了，開發(fā)時(shí)是經(jīng)過(guò)了多瀏覽器兼容性測(cè)試的，當(dāng)時(shí)測(cè)試的瀏覽器有IE8、IE9、Chrome、360、Firefox，之所以沒有IE11，是因?yàn)檎J(rèn)為只要通過(guò)IE9就可以通過(guò)IE11了，但實(shí)際上現(xiàn)在發(fā)現(xiàn)是不行的。

在網(wǎng)頁(yè)自適應(yīng)設(shè)計(jì)中，max-device-width和max-width是不可缺少的兩大CSS屬性，但是可能大家在使用的選擇上沒有太多講究，認(rèn)為用其中一個(gè)即可。不過(guò)如果你對(duì)此兩個(gè)屬性有了充分的認(rèn)識(shí)之后，你或許把網(wǎng)頁(yè)的自適應(yīng)設(shè)計(jì)得更為極致一些。

網(wǎng)站兼容性調(diào)試實(shí)在令人煩心，今天，我就把這幾個(gè)主要瀏覽器的CSS hack代碼匯總一下，滿足如下的瀏覽器要求：IE8、IE9、IE10、IE11、Chrome、Firefox，由于360使用的是Chrome內(nèi)核，所以滿足Chrome基本就滿足了360。

在復(fù)雜的網(wǎng)頁(yè)框架布局中，div起了絕對(duì)的主導(dǎo)作用，而又因?yàn)閐iv的語(yǔ)法在各個(gè)瀏覽器中的表現(xiàn)并不一致，因此div的瀏覽器兼容性寫法就起了至關(guān)重要的意義。

hover在css里比較常見，多用于菜單或一些按鈕上的鼠標(biāo)事件，用法也比較簡(jiǎn)單，不難掌握。不過(guò)在瀏覽器兼容性測(cè)試中，發(fā)現(xiàn)ie瀏覽器對(duì)hover還是很挑剔的，html寫法會(huì)影響hover是否有效。

div+css實(shí)現(xiàn)的下拉菜單大量被網(wǎng)頁(yè)設(shè)計(jì)師使用，通過(guò)div+css，可以隨心所欲的實(shí)現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁(yè)整體布局搭配的更美觀和諧。

我寫文章，喜歡段落開頭空兩格，以前，我都是手動(dòng)敲兩個(gè)空格進(jìn)去，后來(lái)，我發(fā)現(xiàn)，有的文章的每個(gè)段落開頭并沒有空格符，而在網(wǎng)頁(yè)上顯示時(shí)照樣會(huì)縮進(jìn)兩個(gè)空格。這就是菜鳥和專家的差別。