Time of Update: 2018-12-08
CSS全稱是cascading style sheets,中文名字叫級聯樣式單,也叫層疊樣式表。它的好處就是能讓代碼整齊,並且可以批量處理一些樣式。 基本文法: 注釋符:/* */ 選擇符:selector {attribute:value} 同一個屬性的值用空格符號隔開,不同屬性用分號隔開。 區分大小寫。 比如要給頁面中的table定製樣式,則寫table {.....;.....;} 選擇符的使用方法有很多種,於是我又一次懶得打,從網上抄來的:
Time of Update: 2018-12-08
判斷一個層是否隱藏: 複製代碼 代碼如下:$("#id").css("display")=="none" ; 在所有匹配的元素中,設定一個樣式屬性的值: 複製代碼 代碼如下:$("p").css("color","red"); 把一個“名/值對”對象設定為所有匹配元素的樣式屬性。 這是一種在所有匹配的元素上設定大量樣式屬性的最佳方式 複製代碼 代碼如下:$("p").css({ color: "#ff0011", background: "blue" }); 如果屬性名稱包含
Time of Update: 2018-12-08
當然,這裡僅提供一種思路,你可以靈活修改使用。 指令碼之家此邊框為預設風格指令碼之家此邊框為凹陷效果
Time of Update: 2018-12-08
下面先記錄一下JS控制CSS所使用的方法. 1.使用javascript更改某個css class的屬性... <style type="text/css"> .orig { display: none; } </style> 你想要改變把他的display屬性由none改為inline。 解決辦法: 在IE裡: document.styleSheets[0].rules[0].style.display = "inline"; 在firefox裡:
Time of Update: 2018-12-08
網頁採用了 UTF-8 編碼格式,這本來沒有問題,問題是外部 CSS 檔案預設是 ANSI 編碼,並沒有儲存為 UTF-8 格式。可能你會發現在一般情況下這樣也是沒有問題的,然而當 CSS 檔案中包含有中文注釋時就可能不盡如人意了!估計是 IE6 版本以下的瀏覽器在解析這個 CSS 檔案時因為編碼問題而無法正確解析,所以才會發生 CSS 在 IE6 下不起作用的情況。看來微軟已注意到這個問題,在 IE7 中把它修複了。但是用IE6 的人還是不少。因此這個問題需要解決: 方法一:把 CSS、
Time of Update: 2018-12-08
下面是一段普通的代碼: css: 複製代碼 代碼如下:.box{ border:1px solid #ccc; font-size:12px; background:#f1f1f1; padding:10px; }html: 複製代碼 代碼如下:<div class="box">this is a gray box</div> 但是這個時候需求增加了,在頁面中不僅要有一個灰色的盒子可能還有藍色的盒子,可能還有綠色,通常我們會說用整合嘛,好我們就做如下更改 css:
Time of Update: 2018-12-08
input file在系統預設下的外觀: 我們最多通過定義input的border來改變系統預設的外觀:如果要讓瀏覽按鈕更漂亮一點,我們想定義它的背景顏色,甚至想用背景圖片來代替,通過css定義input flie還真是辦不到的。偶然看到一篇文章:input file 檔案選擇框美化 作者是把系統預設的按鈕設定透明度為0,再定義一個label標籤樣式,來覆蓋透明掉的按鈕。按照作者的方法,我也實驗了一下,代碼如下: xmlns="http://www.w3.org/1999/xhtml">
Time of Update: 2018-12-08
無論是誰,在製作頁面的過程都是會碰到這樣或者那樣的問題,出了問題就肯定要解決。解決問題的前提是要知道問題出在什麼地方,對於新手來說不一定一看到問題就知道問題出在哪裡。比如在IE6中“多了一隻豬”的問題,對於一些問題需要更多的經驗交流分享吸收後才能更好的成長。
Time of Update: 2018-12-08
CSS的功能是非常強大的,對於元素的表現以及頁面的布局,都提供了非常強大的功能,這主要在於我們靈活的運行,在這方面提供了豐富且富含價值的各種教程與資訊。對於圖片的使用,其實更多的是在內容層。根據WEB標準的思路,表現層的圖片,已經都被分離到CSS中去了。只有作為內容的圖片才能以IMG標籤插入在頁面中,這也是一直強調的語義。
Time of Update: 2018-12-08
1、如果在樣式檔案或分頁檔代碼中直接用display:none對元素進行了隱藏,載入頁面後,在沒有通過js設定樣式使元素顯示的前提下,使用js代碼會無法正確獲得該元素的一些屬性,比如offSetTop,offSetLeft等,返回的值會為0,通過js設定style.display來使元素顯示後才能正確獲得這些值。 2、使用display:none隱藏的元素不會被百度等搜尋網站檢索,會影響到網站的SEO,某些情況下可以使用left:-100000px來達到同樣效果。
Time of Update: 2018-12-08
這篇文章主要寫的提高網頁在用戶端瀏覽器的渲染速度的CSS部分,暫時總結了10條。 1、*{} #jb51 *{} 盡量避開 由於不同瀏覽器對HTML標籤的解釋有差異,所以最終的網頁效果在不同的瀏覽器中可能是不一樣的,為了消除這方面的風險,設計者通常會在CSS的一個始就把所有標籤的預設屬性全部去除,以達到所有簽標屬性值都統一的效果。所以就有了*萬用字元。*會遍曆所有的標籤; *{margin:0; padding:0} 如果這樣寫,頁面中所有的標籤的margin全是0;padding也是0;
Time of Update: 2018-12-08
使用 line-height 垂直置中 line-height:24px; 使用固定寬度的容器並且需要一行垂直置中時,使用 line-height 即可(高度與父層容器一致),更多的垂直置中總結可以看這裡。 清除容器浮動 #main { overflow:hidden; } 期前也提到過這樣的問題,更多資訊可以看這裡。 不讓連結折行 a { white-space:nowrap; } 上面的設定就能避免連結折行,不過個人建議長連結會有相應的這行(有關換行方面的討論,參看圓心的記錄)。 始終讓
Time of Update: 2018-12-08
對於每一個Web developer來說,瀏覽器的相容都是個大問題,其中Firefox和IE又是最主要的使用者瀏覽器。一般我們會安裝不同的瀏覽器來進行測試,Firefox使用者則可以使用IE tab這人擴充來進行調試。 現在,你可以試試下面這個應用程式,或許能為你的開發工作帶來不少方便,介面就像Dreamweaer之類的,左邊顯示CSS代碼編輯區,右邊分兩欄顯示IE和Firefox下的調試效果。當然,布局 肯定是可以調整的。 這個程式也可以用來調試你的網頁在IE和Firefox下的顯示效果。
Time of Update: 2018-12-08
1.分解你的樣式 對於小項目,在寫代碼之前,按頁面結構或頁面內容將代碼分為幾塊並給予注釋。例如,可以分別將 全域樣式、布局、字型樣式、表單、評論和其他分為幾個不同的塊來繼續工作。 而對於較大的工程,這樣顯然不會有什麼效果。此時,就需要將樣式分解到幾個不同的樣式表檔案。下面的master stylesheet 就是這一方法的例子,它的工作主要是匯入其他樣式檔案。使用這一方法不僅能最佳化樣式結構,而且有利於減少一些不必要的伺服器請求。而分解檔案的方法就有許多種,master
Time of Update: 2018-12-08
我們羅列了十幾條相關的知識與注意點,大家可以系統的探討一下,讓我們編寫的Web頁面開啟更加流暢。 請不要告訴我,你看不懂E文,只是你不願意看!!! 1、How the style system breaks up rules The style system breaks rules up into four primary categories. It is critical to understand these categories, as they are the
Time of Update: 2018-12-08
新寫的樹: 1.解決了大數量載入過慢的問題 2.改進應用介面,可擴充性更強 先看效果吧,回頭再寫相關的使用參數文檔:) 執行個體示範: http://www.jb51.net/tools/cssTREE/index.html http://www.jb51.net/tools/cssTREE/index.big.html (大資料量(3000結點)效果示範) 代碼下載:
Time of Update: 2018-12-08
複製代碼 代碼如下:function ReImgSize(){ for (j=0;j<document.images.length;j++) { document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width; } }
Time of Update: 2018-12-08
Css的filter常用濾波器屬性及語句大全 文法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filtername為濾鏡的名稱,fparameter1、fparameter2等是濾鏡的參數) 濾鏡說明: Alpha:設定透明層次 blur:建立高速度移動效果,即模糊效果 Chroma:製作專用顏色透明 DropShadow:建立對象的固定影子 FlipH:建立水平鏡像圖片
Time of Update: 2018-12-08
Float(浮動)概念也許是CSS中最讓人迷惑的一個概念吧。Float經常被錯誤理解,而且因為將上下文元素全部浮動導致的可讀性、可用性問題備受責難。然而,這些問題的根源並不在於理論本身,而是開發人員以及瀏覽器對理論的解讀造成的。 如果你認真的去讀一下浮動概念,你會發現並不像所見的那樣複雜。大多數問題都是由於老版本的IE帶來的(我只是猜想)。如果你知道這些bug,你就能避免這些問題。
Time of Update: 2018-12-08
現在國內絕大多數的網站都用CSS把字型大小設定為12px,像素雖然也是相對尺寸單位,但只是相對於螢幕的解析度 ,當螢幕的解析度一定時,如果你感到字太小,閱讀有困難,在非標準瀏覽器中就無能為力了,所以說,如果把單位改成em,那麼就可以用CTRL+滑鼠滾動把字放大,或者用菜單上的查看>文字大小來改變字的大小。 如何設定