CSS

      在第一部分和第二部分中我們分別介紹了改善網站效能中頁面內容和伺服器的幾條規則，除此之外，JavaScript和CSS也是我們頁面中經常用到的內容，對它們的最佳化也提高網站效能的重要方面：CSS： 把樣式表置於頂部 避免使用CSS運算式（Expression） 使用外部JavaScript和CSS 削減JavaScript和CSS 用<link>代替@import 避免使用濾鏡

css|frontpage|網頁 　　說明:目前Frontpage的最新版本是FrontpageXP(Frontpage

命名一直是個讓我頭痛的問題，特別是那些看上去差不多的模組，所以就得想辦法啦，我總結了下面的方法，雖然還在實驗中。希望對大家有協助。歡迎大家提出改進的意見。具體如下：要注意的內容：一，命名所選用的單詞應選擇不過於具體表示某一狀態（如顏色、字型大小大小等）的單詞，以避免當狀態改變時名稱失去意義。二，樣式類名由以字母開頭的小寫字母（a-z）、數字（0-9）、底線（_）、減號（-）組成。ID名稱由不以數字開頭的小寫字母（a-z）、數字（0-9）、底線（_）組成。可使用類似下面的規則:[模組首碼|類型|作

在CSS布局中，ul,li的運用是非常常見的。配合DIV與CSS，建立無表格版面配置。其實Dreamweaver中也有內建的CSS布局的範例，如下圖： LI代碼的格式化:A).運用CSS格式化列表符：ul li{ list-style-type:none; }  B).如果你想將列表符換成映像，則：ul li{ list-style-type:none; list-style-image: url(images/icon.gif); }

自從我發布了大背景網頁設計合集之後，我收到了很多電子郵件詢問如何用css實現大背景的網頁設計。因此我決定和大家分享大背景網站的設計技巧。在此教程中，我會用一些執行個體來說明如何用一張或者兩張圖片實現大背景網站的設計。經常會犯的錯誤：背景被裁減（查看樣本）查看樣本檔案，在小於1280解析度時，是沒有問題的。但是如果你的顯示器的解析度大於1280像素，你會看到背景圖片以外的部分。執行個體1：一張圖片（查看樣本）簡單的解決問題的方法：將圖片邊緣的顏色設定成和網頁背景色相同的顏色。這裡我用Web

 概念瀏覽器是通過判斷優先順序，來決定到底哪些屬性值是與元素最相關的，從而應用到該元素上。優先順序是由選取器組成的匹配規則決定的。如何計算?優先順序是根據由每種選取器類型構成的級聯字串計算而成的. 它不是一個對應相應匹配運算式的權重值.如果優先順序相同,元素最終會應用 CSS 中靠後的聲明.注意:

　　網頁的製作中對於用div和css結構寫靜態頁目前已經很成熟，但許多新入行的朋友對於使用div和css結構還有很多誤區，這些誤區也是我曾經經曆過的並且被“老鳥”指正的地方，所以總結下來分享給大家，希望對寫網頁有所協助。　　1、用div+css結構製作靜態html網頁不等於徹底拋棄古老的table寫法。之所以不建議用table來布局網頁是因為在網頁載入很慢的時候要等table結構載入完成才能看到網頁，其次是table的布局沒有一定的語義，網頁代碼修改起來比較麻煩。　　在寫

　　飛魚的聲納頂部的搜尋方塊讓我頭疼了很長時間，原因是總不能獲得跨瀏覽器的統一樣式。主要的問題有這麼兩個：一是input標籤的高度不能統一，Firefox和IE中的高度始終不能一致;二是在IE瀏覽器中屬性為text的input標籤中的輸入文字不像標準瀏覽器中的那樣垂直置中顯示，而是靠輸入框的左上方顯示。　　為了徹底解決搜尋方塊的這些問題，我以GreenGaint主題搜尋方塊的樣式為準，重寫了一遍代碼並且以像素為單位測量了一下在沒有任何樣式表的情況下<input>標籤在預設瀏覽器中的實

　　很多時候，希望能夠在HTML中使用空格排版。但瀏覽器在解析HTML時，會把連續的空格解析成一個，所以我們會使用等這樣的預留位置。　　但是也不是很可靠，比如空格間距非常大，那麼我們必須增加多個預留位置，同時頁面的體積會變得非常大。  　　同時，注意到Safari中的寬度是已設定字元的空格寬度（Safari的預設字型為Times），也就是說一個中文字元需要兩個預留位置。　　具體情況如下圖所示：　　其實，這不是Safari的問題，而是字型的問題。解決的方式就是使用下面的屬性　　

 　　當然，產生縮圖這個工作如果交給程式來完成，效果會好很多，但是有時出於某種因素，例如伺服器不支援GD之類的，難免就要請CSS代勞。　　把一副大圖片按比例縮小到某個尺寸，對於現代瀏覽器，直接使用max-width和max-height兩條CSS屬性即可。　　對於IE

 給連結定義樣式a:link 表示尚未訪問的連結，滑鼠未划過和點擊a:visited 表示已經訪問的連結a:hover 表示滑鼠劃入的連結a:active 表示啟用的連結，也就是滑鼠點選連結的一瞬間注意上面這四個連結的偽類在使用的時候要有一定的順序，即上面列舉的順序，否則看不到效果。可以簡單記為LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。給段落定義樣式:first-letter 為一行中的第一個字元建立樣式:first-line

 　　如果使用注釋的方法得當的話，為你的CSS檔案添加註釋可以在開發過程中給予你和其他人很大的協助。最常見的是為CSS樣式規則添加提示資訊，不過使用注釋對最佳化組織圖和提升效用也很有協助。　　提示和標籤　　這是注釋最常用的途徑，可以為自己或其他開發人員留下提示資訊可以避免後期引起的不必要的困惑和麻煩。這種應用簡潔性最為重要。例如：　　/* Turn off borders for linked images */　　img { border: 0;

 幾天在用CSS寫三列布局的時候突然想到的這樣一個方法，這個想法自己都覺得有些瘋狂，如果其中有什麼不對的地方請各位不吝指教。 當需要寫一個三列布局的時候，一般情況下我會選擇使用如下的DIV布局方式：  使用這樣的嵌套方式無疑可以使代碼出錯的機率減少很多，但同時這樣的布局也略顯複雜，對於後期的維護也略顯不便。我們在布局導航時經常會使用到一個方法，那就是使用<ul>列表來進行布局，而導航可以形容為多列式的布局，既然如此，那麼我們也就可以使用<

 　　普通文本段落的換行　　案例說明：在實際應用中我們常遇到這樣的問題，就是一段文本，有了明確的寬度，需要文本自動換行。(如下圖)　　案例分析：上面兩個圖，沒有使用任何排版的CSS屬性，也就是預設情況下，塊元素裡的文本，達到邊緣以後會自動換行。但是這裡有個特例：就是內容全部為英文字母(沒有單詞句子，沒有詞和詞之間的空格)，此時文本就不自動換行了(見下圖)　　特殊情況：有時候你寫的東東，預設情況下並不自動換行，這多半是由於你在其他的CSS屬性設定裡，無意中關聯了那個段話。比如你的 p

 　　於是稍作研究下，在此記錄下：　　當然，達到透明，很多一般使用三種方式：　　1、直接使用透明圖片，這個確實比較直接省事，不過往往需要再製作圖片，個人認為，可維護性不好　　2、使用如下代碼設定透明度，可是你會發現這種方式不能對其子節點的元素設定不透明　　代碼如下:　　filter: alpha(opacity = 50);　　-moz-opacity: 0.5;　　-khtml-opacity: 0.5;　　opacity:

在預設的情況下，我們的CSS將Table的邊框清除掉了，下面與大家分享下CSS控制Table內外邊框、顏色、大小的樣式，想學習的朋友可以參考下 其實按照常理來說，現在的網站應該早已經拋棄什麼表格了，現在肯定是DIV+CSS當道嘛！不過客戶的網站在新增內容的時候始終不滿意那些邊框效果：要麼沒有，要麼很粗。看得出來，這位客戶是位完美主義者。在預設的情況下，我們的CSS將Table的邊框清除掉了，是沒有的，看到的效果是這樣的。無邊框Table為了給，表格加一個邊框，我在CSS裡面寫了這樣一句

 　　當我們定義了Div width後，裡面的內容有可能比較多，會超出來，將div或表格撐的大大的，變形了影響網頁美觀，介紹一種方法，用CSS強制隱藏掉多餘的內容並自動顯示省略符號，比如下面這段HTML的定義方法：　　在上面的CSS代碼中，text-overflow:ellipsis指當對象文本溢出時顯示省略符號標記(...)，text-overflow:clip是預設取值，不會顯示省略標記(...)，而是裁切掉多餘內容。不過還要注意，在CSS代碼中：　　overflow:

 　　三欄布局是最常見的網頁布局，主要頁內容放在中間一欄，邊上的兩欄放置導航連結之類的內容。基本布局一般是標題之下放置三欄，三欄佔據整個頁面的寬度，最後在頁的底端放置頁尾，頁尾也佔據整個頁面寬度。本文介紹一種用CSS的float和clear屬性來獲得三欄布局的方法。　　絕大多數網頁設計者都熟悉傳統的網頁設計技術，用這些技術可以產生帶有表格、建立固定寬度布局或者“液態”(它可以根據使用者瀏覽器視窗寬度自動調整)布局的網頁。　　基本方法　　基本的布局包含五個div，

 水平置中，如果知道元素的寬度，則可以使用代碼如下.cell{width:300px; margin:0 auto;

今天給大家帶來一個刮刮樂的小例子~基於HTML5 canvas的，有興趣的可以改成Android版本的，或者其他的~：貼一張我中500w的照片，咋辦啊，怎麼花呢~好了，下面開始原理：1、刮獎地區兩個Canvas，一個是front ， 一個back ，front遮蓋住下面的canvas。2、canvas預設填充了一個矩形，將下面canvas遮蓋，然後監聽mouse事件，根據mousemove的x,y座標，進行擦出front canvas上的矩形地區，然後顯示出下面的canvas的。很簡單把~嘿嘿~