CSS

偽類和虛擬元素的理解官方解釋偽類一開始單單只是用來表示一些元素的動態狀態，典型的就是連結的各個狀態(LVHA)。隨後CSS2標準擴充了其概念範圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。虛擬元素則代表了某個元素的子項目，這個子項目雖然在邏輯上存在，但卻並不實際存在於文檔樹中。我自己的理解：偽類，類，class是一個類，就類似class這樣，表示一些元素的狀態的，但是無須標識的分類。虛擬元素，就是一個元素，類似p標籤元素，等等，邏輯上存在，但是實際並不

好了,我們來看如下圖這種css div網頁布局吧,分析一下是由一個大層,裡面由多個li標籤組成了,下面就是我們的上面這段圖片顯示方式的div布局哦.<div id="face"><div id="facetitle"><span>頭像列表</span><input id="faceclose" type="submit" value="" /&

在IE6直接顯示（包括內容中直接插入、作為背景圖片）PNG-24格式的圖片，是不能正確顯示透明、半透明內容與其他內容的疊加呈現效果的。那些IE7+以及其他標準瀏覽器中漂亮的虛化、淡出、投影效果，在IE6-中很可能成了一坨難看的灰色。　　如果你無法忍受ie6中難看的灰色，如果你無法放棄半透明疊加的效果，你會有機會遇到這個問題的。解決途徑有不少。這裡列舉一些，以供參考：1，修改設計效果，使之可以整塊透明地區被切片而不影響顯示效果。或者去掉半透明效果。2，htc檔案　　這裡的htc，和宏達手機是無關的

Roger Johansson （這個老外彷彿是參與編訂 W3C 的傢伙）前幾天寫了一個關於CSS 3的文章：CSS 3 selectors explained 裡面說了去年12月份w3c最新制定的CSS 3的新標籤、新用法，我用機器翻譯看著也蠻爽的，把看得懂的摘錄下來，大家也學習一下先進經驗。呵呵~在CSS 3裡，假設你做了一個包含以下標籤結構的HTML檔案:<div id="nav-primary"></div><div

<form> <input name="name"> <input type="submit" value="提交"></form>以這種方式提交，input 值為22222222時，後面遞交的url 就會變為localhost:3980/input.html?name=222222其中有些值得注意的細節：

設計師總是在尋找製造衝擊力的方式，總是想做一個獨一無二的設計，創造些前所未有的效果。不過有時候通過自我剋制也能形成衝擊力。量變產生質變，過多的“好”也會帶出不好的結果。好的設計師曉得平衡點在哪裡，並且能避免讓過多的特殊效果毀了一項設計。“Things”網站上的柔和漸層對於我訪問過的網站，我總是很關注他們的細微漸層。聽起來可能有點惱火，不過我就是忍不住要去研究別人的那些小細節，以積累我將來設計時的靈感。漸層是最被濫用的設計方法之一，不過運用成功的話，還是能讓設計增色不少，它所能提供的真實感和深度感

聲明：以下內容收集於網路，經才子理解後，加以整理編輯，轉載請保留才子小站的連結，謝謝！！！才子手記：http://blog.54caizi.com玩WEB重構的朋友相信都有一個同樣的苦惱，那就是由於瀏覽器版本的不同，對CSS裡某些元素的解釋也不一樣，才子當然也碰到同樣的問題，也收集了一些解決方案，才子之前貼過兩個針對瀏覽器版本不同而選擇不同CSS的代碼，有興趣的朋友自己找找吧。其實我們還可以利用條件注釋的方法來達到類似的目的，什麼是條件注釋，才子也在此簡單介紹一下，無非就是一些if判斷啦，呵呵，

對於WEB前端頁面開發，字型大小的設定是比較重要，這裡找到了一些關於字型大小大小的資料，共用出來備以後參考，也希望能對大家有用！Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px

擷取頁面高度，視窗高度，捲軸高度等參數值 擷取頁面高度，視窗高度，捲軸高度等參數值 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

利用 CSS + 標籤 來完成一個三角形的製作 M One M Two M Three M Four [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

在進行WEB標準網頁的學習和應用過程中，網頁對瀏覽器的相容性是經常接觸到的一個問題。其中因微軟公司的Internet Explorer(簡稱IE)佔據瀏覽器市場的大半江山，此外還有Firefox、Opera等。需要對這些瀏覽器進行相容。 同時，單就IE而言，因IE版本的升級更替，目前瀏覽者使用的主要停留在

雖然完成了標籤式導航，但是廣場狀的導航似乎並不能夠順應現在的設計潮流，其實導航不僅可以使用css的顏色來定義，同樣可以採用精心設計的圖片或其它元素來構建導航，在這裡我們將開始改善導航的設計，使它成為更加出色的標籤效果。 　　我們將考慮去掉單一的方塊狀背景元素，使用帶色彩的圓角標籤來完成我們的設計。不過從這個改進中能夠體會到css設計的另一個優勢，就是可以不需要修改結構代碼，只需要修改樣式，便可以完成改進，所以這裡可以直接看看css代碼的設計： <style> body {

web開發人員關心的IE7和IE8共存的問題其實可以很好的解決。解決方案一：在瀏覽器右上方有一個“模仿IE7”的切換按鈕，但有點麻煩，需要關閉瀏覽器再重新開啟才可以。 解決方案二：在IE8內建的“開發人員工具”中，點擊查看選擇striet(Internet Explorer7)，既可以不重新啟動瀏覽器觀看IE7下的效果。可以只提供IE5/7/8三種，並沒有IE6模式，還好我有" href="http://tredosoft.com/Multiple_IE"

在前面我們已經講過了strong與em的區別。除了strong與em之外還有一些相似的標籤比如q、cite、blockquote。這三個都屬於引用一類，但是這裡還是有一些區別的，首先來一一解釋。 ，q的作用是引用非塊元素，也就是引用不能形成段落的內容，可能是某人說的一句話，也可能是一句文檔摘錄等，特點很明顯這裡是“一句”。並且q本身並不會產生段落。q本身並沒有什麼樣式，一般瀏覽器也不會給他設定一個預設樣式使起突出。但是我們可以通過CSS去使之與一般內容區分開。在q標籤中還有一個屬性是非常重要的，

通用類 overflow:hidden;自動隱藏超出的內容，防止撐開層和表格的範圍 !important 指定樣式規則的應用優先權 文字類 color: #FF0000;文字顏色 font-family: "Arial", "Helvetica", "sans-serif";字型 font-size: 9px;字型大小 text-align：center; 置中(left為居左,right為居右) line-height：28px；行高(可用150%值) font-style:

以前總結過Div的換行和不換行的css寫法。但對於表格儲存格只知道一個屬性nowrap可以使其不換行。 近日有此需要，但發現加上nowrap在某些情況下還是會換行！無奈，沒有一個強制不換行的方法嗎？ baidu了一下，令俺非常欣慰，還真的找到了辦法，問題解決了。 用CSS實現表格儲存格資料自動換行或不換行 1、自動換行：

半透明效果有時候會給頁面增加不少色彩，特別是Vista盛行之後，半透明效果更加受推崇。在諸多可用於Web瀏覽的圖片格式中，只有PNG格式和Gif格式可以實現半透明效果，不過Gif格式的半透明效果很有限，而且會大範圍失真，所以目前最流行的方式就是使用PNG格式圖片。不過可惜的是，在Internet Explorer 6及以下版本中都不支援PNG半透明效果（至少是不直接支援）。不過幸好Microsoft在這些瀏覽器中內建了其他的功能，可以協助我們來實這種半透明的效果。 程式碼  body { 

我們在研究其他的網站的樣式的時候經常會發現一種情況，就是在很多background屬性裡都調用同一張圖片，來滿足網頁各個部分的使用。開啟這種圖片看一下，會發現這張圖片上包含了很多小圖片，比如：又如：這些小圖片就是整圖分割後的各個部分，把各個部分放在一張圖片上，而不是是分別儲存成單獨的圖片，其目的我們都知道，就是減少http請求次數，節省時間和頻寬。那麼怎麼來實現一張圖片在不同的地方只顯示其中的一部分呢，這就用到了我們今天要說的背景圖片的定位問題。這個問題相信很多人都鬱悶過，也經常有朋友問我，所以

原文：http://andymao.com/andy/post/76.html 屏蔽IE瀏覽器（也就是IE下不顯示）*:lang(zh) select {font:12px  !important;} /*FF的專用*/select:empty {font:12px  !important;} /*safari可見*/這裡select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器專屬的。僅IE7識別*+html  {…}當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。IE6

CSS li或dd 浮動後增加圖片時多出4PX問題dd或li或a標籤內，插入圖片後，下方會增加4PX高度(間距)，解決方案：1.將映像定義成block (display:block)2. 給dd或li固定高度，然後overflow:hidden3.設定 ul 的 font-size:0;4.設定 img 的 vertical-align: bottom;5.設定 img 的 margin-bottom: -4px;其中第4個方法一般是為瞭解決li裡面有雙浮