CSS

昨天我和大家介紹了一個提供展示和分享優秀CSS設計的網站Stylecrunch，今天在網上找了一下，還找到很多類似收藏和分享優秀CSS設計的網站，在這裡列出和大家來分享。這些網站本身的CSS設計也非常出色。連結：http://www.stylecrunch.com/連結：http://www.bestwebgallery.com/網站分類：Flash (83)；CSS (63)；Portfolio (77)；Blog (54)；Illustration (14)；Corporate

http://www.jadu.co.uk簡潔大方,用色謹慎，排列規矩，崇尚高光/鏡面/立體透視設計技巧。典型DIV+CSS重構革命下的web網站。介面上已經贏得了觀者的認可，即便是與自身需求無關，也願意停下來，再此歇歇腳。css下的基本特點是布局規矩，div是矩形快，自然在介面設計上矩形布局塊狀布局為多。強烈的色彩是個人的第一印象，給頁面帶來了活力，鎖定了受眾群體，同樣也使得照片如此新鮮，豔麗（藍色調的照片放在這個設計demo上的確是一種不錯的選擇）。雖然四四方方，但整體統一和諧，你會認為這就

****************************************************CSS命名規則****************************************************    頭：header 　　內容：content/containe 　　尾：footer 　　導航：nav 　　側欄：sidebar 　　欄目：column 　　頁面外圍控制整體布局寬度：wrapper 　　左右中：left right center

原文地址：http://naked.dustindiaz.com/Welcome to the third year of CSS Naked Day!. The first year turned out great, and the second year even better. Now Naked Day '08 is going to push the numbers even further on April 9th. English, Spanish, French, Thai,

以前在網上看到的一個技巧，來相容IE6 7 和Firefox之間的問題。使用一些特速符號來相容，看。*  星號是IE系列都指出的，Firefox不支援。_  底線是IE6支援的，IE7和Firefox都不支援。!important 是 IE7和Firefox支援的。以前!important是相容IE6和Firefox最好的辦法，自從IE7出來以後就不行了。具體的用法：先寫一段css代碼：Code highlighting produced by Actipro CodeHighlighter (

CSS 定位 (Positioning) 屬性允許你對元素進行定位。CSS 定位和浮動CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，使用者代理程式對 CSS2 中定位的支援遠勝於對其它方面的支援，對此不應感到奇怪。另一方面，

div比傳統上的table要難控制多了這裡做的是一個常見的3列布局headerleftcontentrightfootercss部份寫得不是很精簡，歡迎大家評批指正，指點指點這個正在初學階段的菜鳥 ^_^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:

div比傳統上的table要難控制多了這裡做的是一個常見的3列布局headerleftcontentrightfootercss部份寫得不是很精簡，歡迎大家評批指正，指點指點這個正在初學階段的菜鳥 ^_^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><meta

常用的CSS命名規則  　　頭：header 　　內容：content/container 　　尾：footer 　　導航：nav 　　側欄：sidebar 　　欄目：column 　　頁面外圍控制整體布局寬度：wrapper 　　左右中：left right center 　　登入條：loginbar 　　標誌：logo 　　廣告：banner 　　頁面主體：main 　　熱點：hot 　　新聞：news 　　下載：download 　　子導航：subnav 　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>    <title>New Document </title>    <style>        .ctl        {            table-layout: fixed;        }        .xx        {           

CSS 布局在很多時候不是技術活而是體力活，快速頁面重構的訣竅很大程度上不在熟練而在於平時的積累，還沒有完成這樣積累的同學可以看看下面這樣圖，圖中展示的是 224 個 CSS 布局的一部分。構建網頁布局的時候，如果有這樣一個布局庫將是非常棒的一件事。這張圖截取自layouts.ironmyers.com，這個網站中羅列的 224 個 CSS 布局模板稍加變通，幾乎覆蓋了所有的日常開發的應用，並且它們相容所有瀏覽器。閱讀以下段落，將協助你更快地理解與運用它們。這套布局以“主欄目 (Main

這套布局模板來自於html.it， 總計 40 個，覆蓋流體、固定寬度、兩列、三列等等各種常見的布局形式。最讓人稱道的是，這 40 個模板採用了完全一致的 HTML 結構(based on the same markup)，並嚴格遵循了“重要內容優先載入”的原則(頁面的content部分)，HTML 與 CSS 部分均能通過 W3C 驗證，同時在 IE/win 5.0+, Opera 8.5+, Firefox 1.5+ 和 Safari 2+都有非常好的相容性。它使用的 HTML

一、檢查HTML元素是否有拼字錯誤、是否忘記結束標記　　即使是老手也經常會弄錯div的嵌套關係，可以用dreamweaver的驗證功能檢查一下有無錯誤。　　二、檢查CSS是否正確　　檢查一下有無拼字錯誤、是否忘記結尾的“}”等。可以利用CleanCSS來檢查CSS的拼字錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼字錯誤。　　三、確定錯誤發生的位置　　假如錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊後顯示恢複正常，即可確定錯誤發生的位置。　　四、利用border

http://meyerweb.com/eric/tools/css/reset/The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;

      內聯級元素(inline-level element)中試圖插入塊級(block-level element)元素。這樣做是不允許的。唯一的能在內嵌元素中插入區塊層級元素的例外是object標籤。那麼什麼是內聯級元素(inline-level element)和塊級(block-level element)元素呢？。       塊元素(block

 1.CLASS和ID的優先順序比較.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8"

<title>無標題文檔</title><style type="text/css">/*方法一：使用一個GIF檔案的方法*/ .gifshadow { padding:4px 10px 10px 4px; border:0; border-top:#eee 1px solid; border-left:#eee 1px solid; background-image: url(shadow.gif);/*換成你的圖片*/

   開發過Android應用的同學們都知道，Android工程-res-layout資源檔夾下存放著控制view布局的xml檔案，我們可以同過getViewById(int