CSS

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

在手機端我都很少用雪碧圖合并定位元影像標，用的比較多就是用字型表徵圖來代替，有些表徵圖不多的時候就自己單個的切出來控制了。看了下攜程的手機端的網站這些表徵圖是用了雪碧圖來合并的，因為一直以來手機端的螢幕大小不一，所以通常都會把設計圖等比例縮放的形式展現，百分比的方式來布局，達到自適應。下面我們就來說說這個攜程手機端的案例吧：首先這個雪碧圖的原理與PC端的是一樣的，只不過手機端的要按比例縮放一下。首先是合并的雪碧圖：大家發現沒有，雪碧圖的尺寸與原圖剛好縮放了2倍。再個就是原始

直接進入主題！一、脫離文檔流元素的置中方法一：margin:auto法CSS代碼： 1 2 3 4 5 6 7 8 9 10 11 12 13

左圖右文形式，這是手機頁面經常碰到的一種情況，記得第一次寫的時候，好糾結，因為不會，排版的時候，老是寫不出和效果圖一樣的效果，最近發現，原來是使用了float元素，導致這個頁面最外層的標籤撐不起來（手機頁面一般不將寬度和高度定死），這個時候，突然想起可以清除浮動  clear:both;下面放出代碼css:.cell-content {display: block;margin-bottom: 10px;background:

一、關於IE7, IE8不支援CSS3 border-radiusCSS3 border-radius可以輕易實現圓還有圓角效果，然而，需要IE9+瀏覽器才行。移動端自然不成問題，但是眾多（尤其面向C側）PC頁面是至少需要相容IE8的，那有沒有什麼辦法可以讓IE7,

 絕對位置 的元素基於最近的 position 為 relative/absolute/fixed 祖先元素進行定位。如果沒有找到 position 為 relative/absolute/fixed 的元素，則基於是以整個 canvas (渲染內容的空間) 的座標原點(左上)為基準，以 viewport (也就是瀏覽器視窗內渲染 HTML 的空間)為大小的矩形進行定位， 並不是基於根項目定位 。固定定位 的元素基於viewport（瀏覽器視窗）進行定位。1. 絕對位置 和 固定定位

提示：您可以先修改部分代碼再運行 HTML代碼如下首頁|特約簽約請求簽約服務 |保險保險資訊新員投保|訂單訂單管理評價管理維修記錄|店鋪店鋪設定店鋪資訊維修分類維修品牌|服務投訴管理退約記錄 |會費年費/保證金店鋪續約|招聘招聘資訊|統計流量統計銷售統計行業分析 提示：您可以先修改部分代碼再運行

CSS 規則的範圍是全域的。放到 JavaScript 環境裡說，我們寫的每一條 CSS 規則，都相當於定義一個全域變數。全域變數多了，命名衝突、副作用、代碼不可預測等問題就開始浮現。我們無妨把 CSS 想象成一頭野馬，我們所有的 CSS 命名規範上的嘗試，無論是 SUITCSS 還是 BEM、SMACSS 或是其它，都是打算給 CSS 套上韁繩，但我們只是往正確的方向走了一小步。命名規範只是一種約定，如果開發人員有意或無意地忽視，哪怕只是代碼中的一小部分，也會給以後埋下問題。所以我們可以看到，

前因：某個項目為了統計效果，把諮詢的頁面視窗內嵌放進一個單獨的空頁面，在這個頁面裡加了個統計，讓人看著這個頁面就跟直接進入諮詢頁面一樣，懶得折騰啥js，直接用css弄了下，還好需求也不太高。OK了吧。後果：因為接觸iframe很少，幾乎就沒用過，所以當時就Google、百度了下，也不記得當時都搜到了些啥個內容，反正需求也不太強，就直接用css解決了<!DOCTYPE HTML><html><head><meta charset=&qu

讓大圖片不超過網頁寬度，讓圖片不撐破通過CSS樣式設定的DIV寬度!接下來，我們來介紹下網站在開發DIV+CSS的時候會遇到一個問題，在發布一個大圖片的時候因為圖片過寬會撐破自己設定的div寬度的問題。圖片撐破布局原因1、由於瀏覽器版本低(微軟IE6)2、沒有設定div布局的寬度解決圖片超出寬度或撐破div css布局方法1、在文章中發布圖片的時候將圖片編輯縮小2、通過對對應div的css來設定顯示的圖片最寬寬度

在很多時候，想使用 display: table; 以及其子項目使用 display: table-cell 都只是為了使用 vertical-align 這一屬性。這是一個很簡單的常識，但這次在項目上使用卻產生意想不到的表現方式。因為我在其中又使用了 position: relative;

9、CSS的Class以及ID選取器id和class的不同指出在於一個頁面同一個ID只能只有一次，而class可以無限制使用。　　同樣，你可以在html選取器後面使用一個選取器來指定特殊HTML元素，比如p.jam{值}將作用到帶有'jam'class屬性的段落。10、這個都差點忘了。頁面配置      clear    float   

提示：您可以先修改部分代碼再運行 與之間-->與之間--> 一款很酷的li列表樣式 VKFlash帶後台管理的圖片切換ASP版 QVMS電影系統ASP版帶採集產生HTML 一個漂亮的JS日期顯示框 VB多種方法實現啟動、停止系統服務 C#連連看遊戲原始碼拳皇頭像版 提示：您可以先修改部分代碼再運行

提示：您可以先修改部分代碼再運行 無標題文檔 LABEL 1 www.111cn.net 1 LABEL 2 www.111cn.net 2 www.111cn.net 提示：您可以先修改部分代碼再運行

提示：您可以先修改部分代碼再運行 自適應滿屏高度的布局- 100%高度全屏調適型配置 冰極峰冰極峰冰極峰 此布局惟一的遺憾是在IE6以下瀏覽器中顯示為怪異模式,因為HTML代碼的頭一句加了一個注釋,如果刪除後在IE中捲軸高度顯示不全. 此布局在以下瀏覽器中測試通過: IE5.5,IE6,IE7,TT,Opera 9.63,Firefox3.0,Google，IE8未作測試。          

　　css sprites：網站前端開發人員大多稱之為“css精靈”，通俗的理解就是：將多張小圖片合成為一張大圖片，減少http請求次數而達到網頁提速。下面以淘寶網為例子，為大家講解下css sprites是如何?的。如我們要在網頁上顯示“今日淘寶活動”這個圖片。　　 　　實現代碼：        <div style="width:107px;

IIS啟用GZIP壓縮之後，原以為可以壓縮所有檔案了，包括html、CSS、JS、圖片這些檔案，但是當我檢查的時候，發現並不是這樣的，壓縮的只有html檔案，而CSS、JS並沒有壓縮。      在卡卡網的網站速度診斷裡的檢測結果：html網頁已經成功啟用了GZip壓縮css檔案未成功啟用GZip壓縮     

提示：您可以先修改部分代碼再運行 CSS菜單－－下拉式功能表 我的首頁 我的首頁 我的首頁 我的日誌 我的日誌 我的相簿 我的收藏 社區圈子 我的社區圈子 我的首頁 我的日誌 我的相簿

 代碼如下複製代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">002 <html

jquery動態載入css,js檔案方法簡單很，例方法1：  代碼如下複製代碼 $.getscript("test.js"); 方法2：  代碼如下複製代碼 function loadjs(file){       var head = $('head').remove('#loadscript');