CSS

在進行CSS網頁布局時遇到BUG，請認真閱讀以下內容，非常容易記憶的，不知道哪位高人把CSS BUG編成了順口溜了！看看好不好記住呢？　　一、IE邊框若顯若無，須注意，定是高度設定已忘記；　　二、浮動產生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；　　三、三像素文本慢移不必慌，高度設定幫你忙；　　四、相容各個瀏覽須注意，預設設定行高可能是殺手；　　五、獨立清除浮動須銘記，行高設無，高設零，設計效果兼瀏覽；　　六、學布局須思路，路隨布局原理自然直，輕鬆駕馭html，流水布局少hack，

階層式樣式表(CSS)在當代Web設計中已經成為重要的環節，如果沒有CSS現在的網站將像10年前一樣不堪入目。隨著CSS技術的普及，越來越多的高品質CSS教程湧入互連網，讓我們的學習更加方便。向大家推薦21個驚人的CSS技巧，相信其中必有你想不到的。還等什麼，繼續往下看吧！1.CSS跨瀏覽器投影片點擊查看清晰原圖示範了如何僅適用CSS打造一個跨瀏覽器的圖片畫廊2.基於CSS的圖片地圖這個教程示範了如何使用純CSS建立一個”瘋狂”的圖片地圖。3.純CSS無JavaScript的LightBox點擊

如果你是一位有前瞻性的web前端工作者，那麼你一定會從本書中受益，因為它就是專門為你打造的。　　《HTML 5與CSS 3權威指南》內容系統而全面，詳盡地講解了html 5和css 3的所有新功能和新特性；技術新穎，所有知識點都緊跟html 5與css 3的最新發展動態（html 5和css 3仍在不斷完善之中）；實戰性強（包含246個樣本頁面），不僅每個知識點都配有精心設計的小案例（便於動手實踐），而且還有兩個綜合性的案例（體現用 html 5與css

在中國，很多前端開發初學者都會把xHTML+CSS頁面製作說成DIV+CSS，甚至很多人都還不知道xHTML+CSS是什麼意思，只知道盲目的追求DIV+CSS，但在國外，是沒有DIV+CSS這個概念的，很明顯如果單從字面上去理解，DIV+CSS的網頁就要全都是div，很明顯是無法達到語義化標準的。請把”DIV+CSS”這個詞從腦子中刪除，用”xHTML+CSS”替代吧！今天向大家推薦43個執行個體xHTML+CSS(DIV+CSS)網頁及瀏覽版面配置教程，在國外也可以叫做PSD2XHTML。如果

翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根據我的理解改了，讓一些初心者更好理解。利用純CSS建立一個等高多列的布局並不件易事，本教程將著重分析出現在多欄版面配置的多個問題，然後為大家等來一個簡單全遊覽器通吃的解決方案，不使用圖片，指令碼，CSS hacks並在最嚴格的XHTML

如何編寫CSS代碼才能更有效率？這是許多網頁製作者與開發人員都關心的問題。大概沒有什麼魔法，可以保證一下就把你的樣式表縮小到百分之多少，但合理的 CSS 編碼與組織技巧，的確能夠協助你的更有效率地寫出更清晰高效的代碼，自然，樣式表大小的縮減還能減少下載的時間。一、排版：1、關鍵詞和操作符之間加適當的空格。2、相對獨立的程式塊與塊之間加空行3、較長的語句、運算式等要分成多行書寫。4、劃分出的新行要進行適應的縮排，使排版整齊，語句可讀。5、長運算式要在低優先順序操作符處劃分新行，操作符放在新行之首。

1 Cantya Studio預覽 | 下載 | 來自 indeziner2 Creative Media預覽 | 下載 | 來自 indeziner3 SindromK預覽 | 下載 | 來自 indeziner4 Sleek預覽 | 下載 | 來自 Template Fusion5 Urban Artist預覽 | 下載 | 來自 Styleshout6 Temper預覽 | 下載 | 來自 My Free CSS Template7 Facing預覽 | 下載 | 來自 My Free

純CSS實現圓角框是一件大家都說爛了的事件，我也寫過兩篇總結文章，為什麼還會有這篇文章呢，事情是這樣的。在我們的以前的項目中，實現圓角框往往是用背景圖片來實現的，但是，當這些項目發布上線後，在維護過程中，有時需要添加一些新的需求，因為以前的項目中大量採用了圓角圖片，並且這些圖片全部採用了CSS

設計師應該在追求完美的同時學會如何偷懶。本文為你介紹18個節約時間提高效率的CSS工具，儘管手寫CSS代碼是件很牛逼的事情，但善用工具會讓你避免淪為傻逼。CSS3 GeneratorCSS3現在已經開始進入越來越多網路工作者的視線內。無論你是想學一門新技術，還是想進一步最佳化自己手中或未來的項目，CSS3都是不錯的選擇。這個網站為你產生CSS3提供的各種特效源碼，還配有特效樣本，相當不錯！htmDcanvas一個小巧的網頁快照工具。Phoenix Image

小知識：什麼是CSS hack？　　由於不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對CSS的解析認識不一樣，因此會導致產生的頁面效果不一樣，得不到我們所需要的頁面效果。　　這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。　　這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack，也叫寫CSS hack。針對樣式名如果只讓ie6看見用*html .head{color:#000;}

1、不要使用過小的圖片做背景平鋪。這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的地區，需要 200*200=40, 000 次，佔用資源。 2、無邊框。推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，佔用資源。 3、慎用 * 萬用字元。所謂萬用字元，就是將 CSS

float 是 css 的定位屬性。在傳統的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環繞”。在網頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的圖片一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是一個明顯的不同。絕對位置的頁面元素被從網頁流裡面移除了，就像印刷布局裡面的文字框被設定為無視頁面環繞一樣。絕對位置的元素不會 影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。像這樣在一個元素上用CSS設定浮動：#

有很多方法可以用來呈現數字, 我們最常用的就是製作一張靜態圖片. 但你也可以考慮CSS。使用CSS樣式化元素來實現資料圖表化. 可以使資料的控制更具靈活性。下面. 你將看到8個CSS技巧. 教你如何使用CSS來製作漂亮、靈活的圖表。1. CSS線條圖表資料這個執行個體包含了三種圖形資料的實現方法。上面的Basic Bar Graph執行個體中使用了一個<div>包含圖表. 一個<strong>元素作為柱形的block. 然後再使用百分比來控制柱形的寬度.

即使是CSS高手，也難免在書寫CSS代碼的時候出一些小錯誤，或者說，任何一種代碼都是如此。小錯誤卻往往造成大問題，浪費很多無辜的時間來調試和排錯。查看下面這份CSS網頁布局中易犯的10個小錯誤，努力的修正你可能會犯的錯誤，加速你的前端開發效率。1. 檢查html元素是否有拼字錯誤、是否忘記結束標記即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。2. 檢查CSS是否書寫正確檢查一下有無拼字錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查

字型使用是網頁設計中不可或缺的一部分。網頁是文字的載體，我們希望在網頁中使用某一特定字型，但是該字型並非主流作業系統的內建字型，這樣使用者在瀏覽頁面的時候就有可能看不到真實的設計。美工設計師最常做的辦法是把想要的文字做成圖片，這樣做有幾個明顯缺陷： 　一、不可能大範圍的使用該字型； 　　二、圖片內容相對使用文字不易修改；三、不利於網站SEO。網路上有一些使用sIFR技術、或javascript/flash

文法：<marquee> …</marquee>　　使用移動屬性marquee，不僅僅可以舞動你的文字，還可以應用於圖片，表格等等。　　<marquee

/* by 司徒正美 2011.6.1*/ #element { background:orange;/* FF4 safari5 */ } #element { *background: blue; /* IE7*/ } #element { -background: red; /* IE6 */ } #element { background:

這絕對位置元素蓋住連結或添加某事件handle的元素後，那麼該連結的預設行為（頁面跳轉）或元素事件將不會被觸發。現在Firefox3.6+/Safari4+/Chrome支援一個稱為pointer-events的css屬性。使用該屬性可以決定是否能穿透絕對位置元素去觸發下面元素的某些行為。如下：Baidu BaiduSPAN

       那天瓜哥講了個問題，說說css HACK的一些看法，說說自己的想法，不對多指教。        由於各種瀏覽器對css的解析存在差異，使同一頁面在各種瀏覽器下表現出來的效果也會不同。為瞭解決這個相容性問題，css hack技術產生了。        個人認為css hack技術其實是一種欺騙瀏覽器的技術，通過在選取器、屬性等地方添加一些特別符號來使某些瀏覽器無法解析該選取器或屬性，以達到區分不同的瀏覽器的目的。其實個人覺得css hack是不安全的，有風險的，現在的瀏覽器更新很快，

區別IE6與FF：       *_background:blue;background:orange; 區別IE6與IE7：       _background:green;*background:blue; 區別IE7與FF：       *background:green;background:orange;  區別FF，IE7，IE6：