101個CSS關(guān)鍵技術(shù)高級應(yīng)用教程

\o"101個CSS技術(shù)高檔應(yīng)用教程(上)"101個CSS技術(shù)高檔應(yīng)用教程(上)原文:\o"101CSSTechniquesOfAllTime-Part1"101CSSTechniquesOfAllTime-Part1

翻譯：帕蘭CSS從主線上變化了網(wǎng)頁設(shè)計(jì)，它讓網(wǎng)頁樣式與網(wǎng)頁基本元素分離，只需要通過一種小小style.css文獻(xiàn)里面，對相應(yīng)元素定義眾多屬性，就可以實(shí)現(xiàn)完全整站變化。CSS是強(qiáng)大，是偉大，是不可或缺。要掌握CSS并不困難，帕蘭隨時自信滿滿跟某些想學(xué)習(xí)CSS朋友說:學(xué)會CSS所需要時間，最短一天，最長一種星期。事實(shí)也的確如此。但要成為一種真正CSS高手，那就不是一兩天事情了。你需要掌握某些比較高檔CSS應(yīng)用技巧，甚至是去創(chuàng)立某些尚未發(fā)掘出來CSS應(yīng)用技巧。Noupe為咱們收集了101個CSS技術(shù)高檔應(yīng)用，這些CSS應(yīng)用技巧里面，有你甚至也許從來都沒有聽過，但如果你是一種網(wǎng)頁設(shè)計(jì)興趣者，你應(yīng)當(dāng)去理解它。它們代表著當(dāng)前最流行最實(shí)用CSS應(yīng)用，如果你能把它們都掌握并加以運(yùn)用，你完全可以晉升為一種原則CSS高手。

CSSSprites－CSS背景圖片絕對定位應(yīng)用

CSSsprites，CSS妖精？這是一種無法用中文對的表達(dá)意思，如果一定要找一種詞，那就叫CSS背景圖片絕對定位應(yīng)用好了。這項(xiàng)CSS技術(shù)是運(yùn)用運(yùn)用對一張背景圖片絕對定位來實(shí)現(xiàn)減少HTTP祈求，從而達(dá)到網(wǎng)頁提速。CSSsprite最適合伙用于背景圖標(biāo)或是背景裝飾性圖片。這樣說你也許還是不太明白。換言之，就是把許多背景圖片整合成一張背景圖片，然后通過限制要使用背景圖片元素寬高，再通過background-repeat，background-position來對圖片進(jìn)行定位，這樣做好處就是減少網(wǎng)頁加載時HTTP祈求，由于你每使用一張背景圖片，加載網(wǎng)頁時就會發(fā)出一種HTTP祈求。尋常你也許不太注意，其實(shí)這項(xiàng)CSS技術(shù)在諸多大型網(wǎng)站均有應(yīng)用，例如Google韓國首頁那個知名動畫工具條，你可以查看一下背景圖片，其實(shí)所有圖標(biāo)都在一張背景圖上面。再例如土豆網(wǎng)，你點(diǎn)擊導(dǎo)航欄，選取查看背景圖片，可以看到，整個網(wǎng)頁大多數(shù)地方背景圖片都是集成在一張圖片里。你還可以在AOL、Yahoo之類知名網(wǎng)站找到類似CSSsprites應(yīng)用，個人網(wǎng)頁設(shè)計(jì)好像用還比較少。CSSsprites也具備一定局限性，例如每次都需要添加圖片到整張背景圖片中，并且需要精準(zhǔn)定位測量。下面是某些英文關(guān)于CSSSprites使用技巧，如果你要看中文，也可以自己去搜索某些。CSSSprites：ImageSlicing’sKissofDeathCSSSprites：WhatTheyAre，WhyThey’reCool，andHowToUseThemCSSSprites：HowYandAOL.comImproveWebPerformanceCSSRoundedCorners－CSS圓角效果圓角效果是網(wǎng)頁設(shè)計(jì)中最流行和最常使用。下面是某些教你如何運(yùn)用CSS達(dá)到圓角效果技巧。EvenMoreRoundedCornersWithCSS-基于PNG格式圖片建立圓角效果，并且支持邊框，透明過渡，漸變，圖案背景以及任何其他你能想象得到效果

Demo:

RoundedcornersinCSS-運(yùn)用4個DIV層和4張背景圖片實(shí)現(xiàn)圓角效果。LiquidroundedcornersMountaintopCorners-一種簡樸辦法來實(shí)現(xiàn)圓角效果。ImageReplacementsTechnique－圖像替代技巧ThierryImagePlacement：圖片定位和圖像替代這一項(xiàng)技術(shù)重要是應(yīng)用于網(wǎng)頁標(biāo)題，用CSS對背景圖片定位來替代本來HTML元素，達(dá)到更加美麗視覺效果。如果你需要這種CSS圖片替代技巧，你可以查看DaveShea為你描述如何達(dá)到運(yùn)用CSS讓文本達(dá)到鍍金效果和閃電效果，或者是如何替代鏈接文本為CSS支持并且兼容IE和Mac，theGilderLevinRyznarJacoubsenIRmethod.SlidingDoors－滑動門SlidingDoors是CSS引入一項(xiàng)用來創(chuàng)造美麗且實(shí)用界面新技術(shù)，它使用簡樸,咱們只需要使用兩張單獨(dú)背景圖片，結(jié)合靈活接口組件，就可以實(shí)現(xiàn)。SlidingDoors”Box–RoundedCornersforAll

ImageTextWrapTechnique－文本環(huán)繞圖像技巧網(wǎng)頁排版中最重要一種元素就是圖文混搭，以實(shí)現(xiàn)雜志志效果。下面某些教程將告訴如何運(yùn)用CSS實(shí)現(xiàn)文本環(huán)繞圖像效果，從而美化你網(wǎng)頁設(shè)計(jì)。BIGBAERadvancedCSStechnique–thesandbagdiv.CSSImageTextWrapFancytextwrappingaroundanimageEqualHeightTechnique－自適應(yīng)高度布局技巧CSS也有讓人失望某些地方，例如元素高度。下面某些辦法，給夠教會你如何使所有欄目都達(dá)到相似高度。FauxColumns-最簡樸辦法就是使用背景圖像縱向平鋪來實(shí)現(xiàn)自適應(yīng)高度EqualHeightColumns–revisited-不使用圖片就能達(dá)到所有欄目高度相似辦法。EqualheightboxeswithCSS-這篇文章技巧是教你如何使用CSS屬性讓HTML元素像Table同樣，涉及display:table，display:table-row，display-cell等來實(shí)現(xiàn)相似高度布局。但我也沒有實(shí)際試用，不懂得這些CSS屬性兼容性如何。<divclass="equal"><divclass="row"><divclass="one"></div><divclass="two"></div><divclass="three"></div></div></div>這里是CSS代碼:.equal{display:table；}.row{display:table-row；}.rowdiv{display:table-cell；}TurningAListIntoANavigationbar創(chuàng)立一種列表導(dǎo)航欄為什么要使用列表來創(chuàng)立導(dǎo)航欄？由于導(dǎo)航或者是導(dǎo)航菜單，自身就是串文本鏈接構(gòu)成列表。下面文章中，教你如何使用列表元素來創(chuàng)立一種導(dǎo)航欄或?qū)Ш讲藛?。Turningalistintoanavigationbar-非常簡樸一種教程，將你如何使用一種無序列表來創(chuàng)立導(dǎo)航菜單。UberlinkCSSListMenusCSSMenus–如何創(chuàng)立一種水平和垂直4級列表菜單Listamatic7AdvancedCSSMenu-7個高檔CSS菜單技巧MakingHeadlinesWithCSS－使用CSS優(yōu)化Headlines標(biāo)題Headers就是指網(wǎng)頁中h1，h2，h3，h4，h5或者h(yuǎn)6元素–它重要用來協(xié)助瀏覽者區(qū)別網(wǎng)頁中中各種元素，以及突出顯示某些內(nèi)容。一種良好Headlines設(shè)計(jì)將更運(yùn)用瀏覽者訪問體驗(yàn)。HeadingStyleGallery-這是一種專門收集Heading樣式網(wǎng)站，如果你不擬定你網(wǎng)站Heading要使用哪種效果，可以到這里找一下，里面提供了不同字體、太小和顏色Heading演示。TypographyforHeadlines-如何進(jìn)行Headlines字體排版。MakingHeadlinesWithCSS-如何設(shè)計(jì)一種先進(jìn)Headlines吸引讀者眼球并讓她們繼續(xù)閱讀CSSShadowsTechniques－CSS陰影技巧CSSDropShadows-這是一種用來建立靈活CSS下拉陰影技術(shù)，可被應(yīng)用于任意塊元素。

FunwithDropShadows-大多數(shù)CSS陰影效果都是使用margnin負(fù)值來實(shí)現(xiàn)，而這個CSS陰影技巧有點(diǎn)特別，使用相對定位。DropShadowsByPhilBaines-CSSDropShadowsII：FuzzyShadows

AnimprovedCSSshadowtechnique-一種非常強(qiáng)大和易于使用技術(shù)運(yùn)用，美麗陰影效果，只需要預(yù)先使用幾種簡樸元素準(zhǔn)備。CSSTransparency－CSS透明用CSS使元素達(dá)到前景和后景透明度交叉視覺效果。PartialOpacity-把文本放在圖片上面，普通會導(dǎo)致閱讀困難。但此文提供了一種辦法，在讓圖片背景圖片彎透明同步，加強(qiáng)文字清晰顯示效果。Cross-BrowserVariableOpacitywithPNG-這篇文章將教你如何使用PNG格式圖片達(dá)到透明效果，最重要是讓它支持所有主流瀏覽器。TwoTechniquesforCSSTransparencyVariousLinkTechniquesShowingHyperlinkCueswithCSS-這篇CSS技巧將向你展示如何把一種小圖標(biāo)放置到超鏈接中，支持IE7，F(xiàn)irefox和Safari.ThewaystostylevisitedLinks-這篇文章重要簡介如何區(qū)別已經(jīng)點(diǎn)擊鏈接和未點(diǎn)擊鏈接樣式，提高顧客瀏覽體驗(yàn)。LinkThumbnail-鏈接縮略圖，當(dāng)瀏覽者鼠標(biāo)懸浮在你網(wǎng)頁中站外鏈接上時，顯示該網(wǎng)頁一種小縮略圖。IconizeTextlinkswithCSS-這個之前帕蘭專門做過簡介，請點(diǎn)這里查看。但是據(jù)yichi留言說，似乎也不支持IE6.有關(guān)文章\o"CSS盒模型詳解"CSS盒模型詳解\o"CSSOverflow屬性詳解"CSSOverflow屬性詳解\o"8個CSS圖表數(shù)據(jù)制作實(shí)例"8個CSS圖表數(shù)據(jù)制作實(shí)例\o"CSS背景屬性Background詳解"CSS背景屬性Background詳解\o"21個神奇CSS技巧"21個神奇CSS技巧\o"CSS定位屬性Position詳解"CSS定位屬性Position詳解\o"CSS浮動屬性Float詳解"CSS浮動屬性Float詳解\o"15個CSS網(wǎng)格布局生成器"15個CSS網(wǎng)格布局生成器\o"14個提高設(shè)計(jì)效率CSS工具"14個提高設(shè)計(jì)效率CSS工具\(yùn)o"精通高檔CSS選取器"精通高檔CSS選取器\o"101個CSS技術(shù)高檔應(yīng)用教程(下)"101個CSS技術(shù)高檔應(yīng)用教程(下)原文：\o"101CSSTechniquesOfAllTime-Part2"101CSSTechniquesOfAllTime-Part2

翻譯：帕蘭之前已經(jīng)翻譯了101個CSS技術(shù)高檔應(yīng)用教程(上)，當(dāng)前咱們就將為你帶來更多CSS高檔應(yīng)用，讓你在網(wǎng)頁設(shè)計(jì)中，使用CSS時候更加得心應(yīng)手。BlockHoverEffectLinks鏈接懸浮特效HowtoCreateaBlockHoverEffectforaListofLinks-學(xué)習(xí)如何創(chuàng)立一種鏈接懸浮特效demo演示.HowToMakeClickableAreasBigger-交互設(shè)計(jì)一種基本原則就是保持規(guī)模較大鏈接，這樣可以更加吸引顧客點(diǎn)擊。Anchortagsforblockelements-demo演示.StyleanAtoZIndex樣式化一種A到Z目錄索引Anchortagsforblockelements-CreatinganAtoZindexalongthesamelinesthatdoesn’tbreakwhenyouresizeyourtext.Youcanseeademohere.TypographyTechniques字體排印技巧CSSStyleFun-如何使用CSS來實(shí)現(xiàn)各種效果，這算是一種CSS補(bǔ)習(xí)，它涉及各種教程，例如首字下沉、字符間距、樣式化blockquotes、懸停特效等等。CSSFonts，CSSTypography-這篇教程重要教你用CSS對字體大小控制以及隨著瀏覽發(fā)展，使用哪種字體表達(dá)更加適當(dāng)，是比例？還是em?px?pt?從而達(dá)到先進(jìn)字體排印效果。CSSPagination－CSS分頁導(dǎo)航分頁是一種機(jī)制，它為顧客提供更多選取，給單篇文章設(shè)立導(dǎo)航瀏覽，普通咱們使用數(shù)字，暗示，箭頭，以及”上一頁”和”下一步”按鈕。CSSPaginationLinks-這個CSS分頁鏈接導(dǎo)航設(shè)計(jì)靈感來源于底某些頁鏈接。Pagination101-給你許多較好資源，協(xié)助你創(chuàng)立一種良好分頁系統(tǒng)。Somestylesforyourpagination-提供某些分頁導(dǎo)航系統(tǒng)設(shè)計(jì)供你選取。CSSTabs－CSS選項(xiàng)卡設(shè)計(jì)Tab選項(xiàng)卡同樣是CSS界面設(shè)計(jì)中一種設(shè)計(jì)基本。它容許各種內(nèi)容顯示在單一窗口區(qū)域里面。然后也許通過Tab選項(xiàng)卡切換進(jìn)行瀏覽或是Ajax實(shí)時載入。下面是某些有趣CSS選項(xiàng)卡設(shè)計(jì)。GlowingTabsMenu-一種簡樸CSSTab選項(xiàng)卡菜單。DOMTab-這是一種強(qiáng)大JavaScriptCSSTAB導(dǎo)航菜單，可以將所列出鏈接連接到內(nèi)容章節(jié)成為一種選項(xiàng)卡界面。Control.Tabs-Control.tabs注重創(chuàng)立一種標(biāo)簽式界面，從無序鏈接列表/錨鏈接到網(wǎng)頁中任何元素，而只需要給元素指定一種ID屬性。Tabifier-自動創(chuàng)立一種HTML標(biāo)簽界面采用即插即用JavaScript。CSSPullquotes－摘錄設(shè)計(jì)Pullquotes,摘錄引用，如果你經(jīng)?？磮?bào)志或雜志，你會經(jīng)?？吹竭@些片段。SimpleCSSBlockquotesandPullquotes-如何創(chuàng)立一種可愛清新blockquotes.Automaticpullquotes-用JavaScript技術(shù)為基本，以補(bǔ)充pullquotes不必重復(fù)文字標(biāo)記。CSSPullQuotes-在本教程中，你將學(xué)會把pullquote文本中title屬性一種段落或頁面分區(qū)，并使用:before偽元素來產(chǎn)生內(nèi)容。CSSBlockquote–CSS引用設(shè)計(jì)Blockquote用來從另一種來源引用文本，普通是另一種博客或網(wǎng)站。blockquotes是為了容納大量文本，因此作為普通狀況下，當(dāng)你引述一句以上話時，使用blockquotes。Quotationsandcitations：quotingtext-提供各種引用文本辦法SwooshyCurlyQuotesWithoutImagesStylingBlockquoteswithCSSBlockquoteswithImageStarRaterTechniques－星形評級設(shè)系記錄技巧CSSStarRatingPartRedux-這個實(shí)例教程將告訴你如何使用CSS創(chuàng)立一種星形評級系統(tǒng)CSSRatingsSelector-使用HTML列表項(xiàng)目結(jié)合CSS來創(chuàng)立星級評級系統(tǒng)Starbox：Ratelikeastar-容許你通過一張PNG圖片來創(chuàng)立一種簡樸星級評級系統(tǒng)，基于Prototypejavascript框架創(chuàng)立，你可以添加某些特效到評級圖標(biāo)上面去。UnobtrusiveAJAXStarRatingBarCSSImagePop-UpCSS圖片彈出CoolCSSImagePop-up-一種圖片彈出效果。但不需要任何Javascript，僅僅只要CSS。CSSPopupImageViewer-使用CSS“:hover”偽元素，結(jié)合relative和absolute定位，實(shí)現(xiàn)簡樸在一種HTML頁面中放在圖片瀏覽。Pop-upimagesoninlinelinks-教你如何實(shí)現(xiàn)當(dāng)鼠標(biāo)懸浮在一種圖片鏈接上面時，彈出圖片顯示。HoverboxImageGallery-一種超輕量級公8kb圖片彈出效果演示示例.CSSSitemaps－CSS網(wǎng)站地圖設(shè)計(jì)HierarchicalSitemapwithDashedLines-運(yùn)用無序列表來創(chuàng)立一種層次分明網(wǎng)站目錄，演示.SitemapStyler：StyleyourSitemapswithCSSandJavascript-一種輕巧CSS/JavaSc