CSS

CSS網頁布局的一大特點就是列表元素的應用，在傳統的表格版面配置中往往將列表元素作為表格來處理，這樣的方式非但不具有語義還產生了許多不必要的代碼。　　今天我們共同學習一款“圖文混排CSS列表”的製作。首先從分析一下此列表的特點，然後編寫HTML代碼，最終應用CSS樣式實現最終的效果。列表的效果：最頂部是欄目名稱“模板無憂 MB5U.com ”與欄目導航“CSS酷站欣賞 DivCSS教程 CSS模板下載”。欄目名稱用標題元素Hx來表示，欄目導航可以用ul

　　我們首先分析一下如何製作：li是固定的寬度與高度（儲存格），設定li在ul中浮動，當ul不夠寬的時候，li就會自動另起一行排列（一行有多少列通過計算即可得到ul的寬度，如一行四列，一列寬100px，那ul寬就是400px加上一定的邊距）。這樣就實現了類似於表格的效果，或者說我們用UL+LI類比了表格的效果。我們開始HTML代碼的編寫： Example Source Code

1.樣式命名外　套：　　wrap主導航：　　mainnav子導航：　　subnav頁　腳：　　footer整個頁面：　content頁　眉：　　header頁　腳：　　footer商　標：　　label標　題：　　title主導航：　　mainbav（globalnav）頂導航：　　topnav邊導航：　　sidebar左導航：　　leftsidebar右導航：　　rightsidebar旗　志：　　logo標　語：　　banner菜單內容1： menu1 content菜單容量：　menu

1.使用背景圖片實現等高自適。這種方法感覺上是種視覺上的欺騙，實際是布局元素的高度並不是相等的。原理是：將需要等高自適的塊（如A、B）都包含在一個容器C中，給容器C一個背景圖片，這張圖片包含需要等高自適的塊A和B的背景（圖片要處理好，像素要算準）。當A、B高度不等時，由於較高的塊將容器C給撐開了，那麼容器C的背景圖片顯示的高度就是較高者的高度，導致視覺上A、B兩者的高度似乎相等了，實際是不相等的。實際操作方法和Demo參看：http://www.52css.com/article.asp?id=

原文：Efficiently Rendering CSS 我承認我並不經常想這個問題......我們寫的css的效率是怎麼樣的呢，瀏覽器渲染的速度又如何呢？這是應該是瀏覽器開發人員應該關心的(頁面載入更快，使用者就會更愉快)。Mozilla有一篇文章： about best practices . Google 當然也很關心這個問題，他們也有這樣一篇文章：Optimize browser rendering

一.使用css縮寫  使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則請參看《常 用css縮寫文法總結》，這裡就不展開描述。  二.明確定義單位，除非值為0  忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100，但是在CSS中，你必須給一個準確的單位，比 如：width:100px width:100em。只有兩個例外情況可以不定義單位：行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。  三.區分大小寫 

HTML檔案是通過CSS樣式進行顯示的控制的，也就是結合XHTML與CSS來表現頁面內容。那麼到底有哪些方式在XHTML檔案中引入CSS樣式呢？一、內聯引用CSS將STYLE屬性直接加在個別的元件標籤裡，<元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}例如： <td style="color:#c00; font-size:15px; line-height:18px;>模板無憂 -

CSS文檔流與區塊層級元素（block）、內嵌元素（inline），之前翻閱不少書籍，看過不少文章， 看到所多的是零碎的CSS布局基本知識，比較表面。看過O'Reilly的《CSS權威指南》，發現裡面提到的文檔流概念讓我很敏感。 可惡的是書中並沒有解釋文檔流是什麼東西，或許作者覺得這個太簡單了以至於不值一提。但我覺得，這個概念實在太重要了。理解了它，一堆CSS布局的理論都 變得易於理解，並且體會到CSS這套設計的合理性所在。文檔流將表單自上而下分成一行行，

alpha濾鏡用於設定圖片或文字的不透明度。它是把一個目標元素與背景混合，通俗地說就是一個元素的透明度。通過指定座標，可以指定點、 線、面的透明度。文法：filter: Alpha(參數1=參數值, 參數2=參數值,…)說明：alpha屬性包括很多參數，如下表所示。alpha屬性的參數設定參數具體含義及取值opacity代表透明度水準，預設的範圍是從0到100，表示透明度的百分比。也就是說，0代表完全透明，100代表完全不透明finishopacity是一個選擇性參數，如果要設定漸層的透明效果，

css字型設定字型族科文法:   font-family: [[<族科名稱> | <種類族科>],]* [<族科名稱> | <種類族科>]允許值:   <族科名稱> 任意字型族科名稱都可以使用          <種類族科> serif (e.g., Times)                      sans-serif (e.g., Arial or Helvetica)                     

 使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則如下：顏色16進位的色彩值，如果每兩位的值相同，可以縮寫一半，例如：#000000可以縮寫為#000;#336699可以縮寫為#369;盒尺寸通常有下面四種書寫方法:property:value1; 表示所有邊都是一個值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2property:value1 value2 value3;

　　（轉載：

  一.Firefox和chrome下textarea解決自動展開textarea { resize: none;} 二. IE7下，<p>等標籤內部<a>添加float屬性後沒有和文字排在一行 <!-- '顯示模式:' 和 '列表模式','縮圖模式' 沒有在同一行中顯示--><div class="view">　　顯示模式: <a style="float:right;" title="列表模式" href="#"

[原]WebPart引用.CSS 檔案與.JS檔案  昨天突然有個想法：WebPart能不能引用CSS檔案與JS檔案，然後上網找資料幾乎沒有看到這樣的資料，最終沒有解決；上網購的一本書《亮劍》昨天剛好到，早上沒事翻開一看，哎呀，印入我的眼帘了；給它寫出來跟大家分享一下，有不好的地方請指出； 在下面的代碼裡是非常的簡單的，這裡我並不是想展現My Code，而是講一個方法： 我們先定義兩個檔案，一個是.css檔案，一個是.js檔案，然後把它們都放在C:\Program Files\Common

摘自：http://ce.sysu.edu.cn/hope/Item.aspx?id=13402   設計師常常使用一些獨特的字型效果和頁面效果，陰影是其中一個，它可以讓頁面中的文字和元素具有立體的效果，從而被突出出來。比如對於文字陰影，傳統的方法可能需要將文字切出來，直接使用圖片，如果考慮SEO和網站效能，還可能會使用CSS Sprites等技術將圖片整合。拼合圖片會花掉你的大量時間，而且為了實現更好視覺效果，你可能還要使用高品質的32位png圖片，這又要讓你面對該死的IE

10個你未必知道的CSS技巧1.CSS字型屬性簡寫規則一般用CSS設定字型屬性是這樣做的：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;但也可以把它們全部寫到一行上去：font: bold italic small-caps 1em/1.5em

前言：最近半年多的時間裡我都在參與TAPD項目的設計與前端開發。之所以把設計和前端開發一起承擔主要是考慮到一種較為理想的設計流程，在進行設覺設計的同時把Html、CSS的實現都考慮進去，這樣無論是設計還是代碼都是統一的設計理念和風格，便於維護和後續開發。後來發現TAPD的規模遠大於自己所想，互動研究、視覺設計、代碼設計每一部分都是一份龐大的工作，每個頁面的設計與實現都沒有太多的時間仔細琢磨…還好後期英明的Boss把設覺與互動設計部分交給了其他同事，我才得以對前端代碼仔細研究，用了一個月的時間把所

 一、自己總結的公用樣式解析html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }img { border: 0 none; vertical-align: top; }ul, li { list-style-type: none; }h1, h2,

用法：eg: height： 1%\9; 匯總下IE各版本的css

--1--行內樣式（style=“color：orange”）>ID選取器（name）>類別選取器（class）>標籤選取器（p）多個類別選取器，前者為準。(class=“purple red”)  取purple[一般越特殊的樣式（針對性越強）， 優先順序越高] --2--css編寫一般只給外層標記定義class或id內層標記通過嵌套方式，子標記無法利用此規則時，才單獨進行聲明，eg：ul li{...} 可以給某個li 單獨設定id或class p span {color: