CSS

ISSN: 1534-0295. 20 October 2003 – Issue No. 160原文作者：Douglas Bowman 原文出自：A List Apart 中文翻譯：54player.com nobita 著作權說明：本文中文翻譯著作權歸譯者54player.com nobita所有。需要轉載發表的，請先與作者聯絡

作為一個熱門技術，CSS的發展的確有些緩慢。CSS最早被提議在1994年，最早被瀏覽器支援在1996年，CSS一直被力捧為傳統的以HTML為基礎的web代碼的繼承者。CSS使用樣式表來控制整個網站字型和布局的能力,使它看起來非常有效率、易於設計和有遠見。然而，也一直有荒誕的說法圍繞著CSS，阻礙了網頁設計師學習和掌握這種語言。究竟是什麼讓人們大驚小怪呢？

本篇用box的圖例，對CSS中box（盒模式）的分析，為學習CSS的讀者建立了清楚的模型。 W3C定義的盒模式如下: width和height定義的是Content部分的寬度和高度，padding border margin的寬度依次加在外面。背景會填充padding和content部分。但是由於瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當box為float時，IE6中box左右的margin會加倍

1. 檢查HTML元素是否有拼字錯誤、是否忘記結束標記  即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。  2. 檢查CSS是否正確  檢查一下有無拼字錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼字錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼字錯誤。  3. 確定錯誤發生的位置 

下面用一些比較常用的屬性來做樣本。  margin  　　margin-top:1px;  　　margin-right:1px;  　　margin-bottom:1px;  　　margin-left:1px;  　　代碼簡化為：margin:1px  　　margin-top:1px;  　　margin-right:2px;  　　margin-bottom:1px;  　　margin-

font的縮寫，如果省略family， 如這樣子： font:700 14px/22px; 則在Firefox下是不生效的 完整的寫法是：font:700 14px/22px arial; 我垂直不置中 我垂直置中 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

 對於每一個Web developer來說，瀏覽器的相容都是個大問題，其中Firefox和IE又是最主要的使用者瀏覽器。一般我們會安裝不同的瀏覽器來進行測試，Firefox使用者則可以使用IE tab這人擴充來進行調試。 現在，你可以試試下面這個應用程式，或許能為你的開發工作帶來不少方便，介面就像Dreamweaer之類的，左邊顯示CSS代碼編輯區，右邊分兩欄顯示IE和Firefox下的調試效果。當然，布局 肯定是可以調整的。

這樣就存在了新的問題，目前在IE7中工作正常的網頁在IE8中會出現問題。 微軟在IE8提供三種解析頁面的模式 　　IE8 Standard Modes ：預設的最標準的模式，嚴格按照W3C相關規定 　　IE7 Standards Modes ：IE7現在用的解析網頁的模式，開起機關是在中加入 

首先看個簡單的例子吧。 http://www.cssrain.cn [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

第一個是從360而來的效果如圖所示:普通的a標記的分頁，相容性好。綠色樣式示範代碼:共1678條評論12345...168下一頁>> [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]第二種：深藍色效果，當然顏色大家可以自行修改。效果如圖:示範代碼:css 分頁樣式2 首頁 上頁 1 2 3 4 5 下頁 尾頁 第3頁 共8頁 [Ctrl+A 全選

雲棲社區DIV+CSS實現的滑動門菜單特效 雲棲社區 [2007-05-16] 雲棲社區jb51.net,網頁設計,網站製作建設,css學習,網頁標準化 網路編程 [2007-05-16]

CSS List Grid View Layout CSS List Grid Layout Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21 List Grid View sodales porta libero.n sodales porterat.

題目的痛點在於兩點： 垂直置中；  圖片是個置換元素，有些特殊的特性。  至於如何解決，下面是一個權衡的相對結構乾淨，CSS簡單的解決方案： .box {   /*非IE的主流瀏覽器識別的垂直置中的方法*/   display: table-cell;   vertical-align:middle;  &n

有時我們不需要某個css屬性時，想刪除它，但有沒有removeCss方法，怎麼辦呢？可以使用如下方法解決$('選取器').css('css屬性','');   即將css屬性值賦值為空白，頁面中就不會顯示該css屬性了。 如：$('.div1').css('opacity','');以上這篇Jquery刪除css屬性的簡單方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。

這是一個很簡單的應用，不過在設計中，這樣做可以減輕伺服器的壓力，是請求次數減少，是一個不錯的方法。 特別要說明的是，在這種小圖片上即使是兩張圖片其實就回應時間來說也慢不了多少，不過有一個問題，就是兩張圖片交替時容易出現背景圖片從新載入而導致很段時間不顯示的效果。（時間長短視伺服器的響應速度和圖片大小而變化） 下面是css的部分： body {

複製代碼 代碼如下:Function RemoveHTML(strHTML)    '過濾HTML代碼的函數包括過濾CSS和JS StrHtml = Replace(StrHtml,vbCrLf,"") StrHtml = Replace(StrHtml,Chr(13)&Chr(10),"") StrHtml = Replace(StrHtml,Chr(13),"")

複製代碼 代碼如下:function ReImgSize(){              for (j=0;j<document.images.length;j++)             {  

測試 IP地址： . .

當你覺得圖片與文字距離太接近時，就可以使用此屬性。  圖文間隔：Hspace和 Vspace 的設定  1.水平間隔：HSPACE。  例如：<IMG hspace=10 src="*.gif"> (單位也是用像素（pixel）來計算的。)  2.垂直間隔：VSPACE。  使用方法與 HSPACE 相同，在這裡不多作介紹。 

好處是： 相容IE，firefox，Opera; 有利於內容完整性;有利於SEO; 無需背景程式處理; 可以在前台隨時調節要截取的長度。 不好的地方： 不能自動判斷截取長度，當字元很短的時候在Firefox中也會產生後面的省略符號。 另外在設定截取寬度的時候，要注意，盡量讓文字截取完整。 Quote: