CSS

文章簡介：:nth-child 和 :nth-type-of 的區別. 原文：The Difference Between :nth-child and :nth-of-type譯文：:nth-child 和 :nth-type-of 的區別假設有以下 HTML 程式碼：<section> <p>Little</p>

1. The Menu menuThis another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.2. Pure CSS hover menuView DemoIn

核心提示：隨著Web設計向著精緻、巧妙的方向發展，設計師們開始考慮使用非Javascript的方 式製作滑鼠滑過、懸停菜單的效果，這時CSS Sprite應運而生。 CSS Sprites簡介　　通常被意譯為“CSS映像拼合”或“CSS貼圖定位”。CSS Sprites並不是一門新技術，目前它已經在網頁開發中發展得較為成熟，阿里巴巴各子公司的網頁中到處都可發現css sprites 的影子。

 　　近年來，CSS不透明算得上是一種相當流行的技術，但在跨瀏覽器支援上，對於開發人員來說，可以說是一件令人頭疼的事情。目前還沒有一個通用方法，以確保透明度設定可以在目前使用的所有瀏覽器上有效。　　這篇匯總主要是提供一些CSS不透明的詳細介紹，程式碼範例和解釋，以實現這項有用的CSS技術在您的項目中相容所有瀏覽器。　　關於CSS 透明度，有一點需要注意的是，它雖然使用了很多年，但它一直以來都不是一個標準屬性。它是一種非標準技術，應該是CSS3規範的一部分。1. 舊的Opacity設定　

譯自：iPad Orientation CSSiPad終於發布了，那麼如果用樣式區分iPad和iPhone中的safari瀏覽器，Jason Grigsby做了一個有用的實驗。就絕大部分而言，iPad上的移動版safari和iPhone上的事一樣的。我發現的一個不同是，iPad上的webkit支援基於方向(orientation)的CSS媒體查詢(media query)聲明。我為iPad建立了一個簡單的示範目標CSS的頁面。在CSS中使用orientation 非常簡單，代碼就行這樣：<

核心提示：檢查HTML元素是否有拼字錯誤、是否忘記結束標記,即使是老手也經常會弄錯div的嵌套關係。可以用Dreamweaver的驗證功能檢查一下有無錯誤。 1. 檢查HTML元素是否有拼字錯誤、是否忘記結束標記 即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。 2. 檢查CSS是否正確 檢查一下有無拼字錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查

核心提示：用CSS把標題超出的部分變成... <html> <body> <style> .ellipsis span {    white-space:nowrap;    text-overflow:ellipsis; /* for internet explorer */    overflow:hidden;

核心提示：設定這些距離時，你可以使用所學過的各種 長度單位或比例值。使用比例值時，比例值 指的是相對於母體要素的尺寸。 定位（左邊和頂部） css定位屬性將是網蟲們開啟幸福之門的鑰匙： H4 { position: absolute; left: 100px; top: 43px }這項CSS規則讓瀏覽器將<H4>的起始位置精 確地定在距離瀏覽器左邊100象素，距離其 頂部43象素的位置。

核心提示：網頁添加CSS樣式表的四種方式 一、使用STYLE屬性： 將STYLE屬性直接加在個別的元件標籤裡。 <元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}例如： <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%>這種用法的優點

有句話說的好，table能做到的效果，div全能，反之，則不竟然。水平置中，用CSS設定非常簡單，垂直置中，有時會難住一些人。以前的項目中沒遇到垂直置中的例子，也沒去過多的研究，近期閑暇，做了一個百分比高寬，垂直，水平置中。這個能舉一反三。百分比可以了，固定大小的就簡單了。 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

核心提示：Class可以反覆使用而ID在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反覆使用同一個ID不會出現問題，但在標準上這絕對是錯誤的使用，而且很可能導致某些瀏覽器的現實問題。 　　Class可以反覆使用而ID在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反覆使用同一個ID不會出現問題，但在標準上這絕對是錯誤的使用，而且很可能導致某些瀏覽器的現實問題。　　這兩個區別都是比較容易混淆的問題，尤其是Class與ID，

同時給P元素兩個類，中間用空格格開，這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有衝突的話，後設定的起作用，即在CSS檔案中放在後面的類的屬性起作用。

核心提示：CSS中調用網路字型資源Google Font API       Google前些天在Google I/O大會上發布了一個新的服務 Font API，這是一個很酷的東東，可以讓我們很方便的使用網路字型，而且這些字型都是免費的，你無需擔心著作權的問題。      Google Font

在一些大型的網站HTML代碼中，我們經常會看到<!－－[if IE 6]><!－－[if IE 7]>之類的代碼，那麼，他們有什麼用呢? 這些代碼在大多前端設計中很少會應用到，其實這是針對不同瀏覽器的樣式聲明，達到一個相容的效果，下面提供一個樣本給大家參考：<!--[if IE 6]><style>#head_menu_main li a span{

遇到css布局相容性等問題時，來看下這篇文章，估計對您有協助。 IE vs FFCSS 相容要點：DOCTYPE 影響 CSS 處理FF: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可置中FF: 設定 padding 後, div

網頁製作Webjx文章簡介：CSS:移動網站開發的前端技術和技巧. 上一篇我們談到了移動網站中的標籤，想必很多人也很想瞭解Mobile CSS的情況吧，本文將和大家一起探討移動網站中的CSS標準。介紹Mobile css的標準也是有些複雜的，與前一篇文章中提到的類似，之前存在著一個W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事實上它們都是CSS 2.1的子集，而且內容非常接近，不同的是，WAP CSS

css製作圓角教程，有html代碼和css全部代碼。 不用圖片，只用css製作圓角的另一方法。html代碼：<divclass="curvedBox"><span><spanclass="r1" ></span><spanclass="r2" ></span><spanclass="r3" &

網頁製作Webjx文章簡介：前端開發中的量化與細節. 前端開發方面，員工所做的工作，很難量化到細節。各項目組和人員工作的可比性不強。項目的不確定因素太多。之前曾經嘗試按設計稿的大小（1024*768解析度）為單位，在規定時間內做好指定大小的頁面，給予獎勵。技術人員的考核與激勵一直是我們比較頭疼的問題，具體到前端開發方面，員工所做的工作，很難量化到細節。各項目組和人員工作的可比性不強。項目的不確定因素太多。xhtml+css的績效考核之前曾經嘗試按設計稿的大小（1024*76

常常我們的CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，重覆性太高且顯得冗長，更不好管理....在CSS 文法的基本設定中，就可以把這幾個相同設定的選取器合并在一起，原本可能是寫了7~8 行相同的文法，合在一起後就只要短短的一小行，怎麼看都讓人心曠神怡啊~例如：當有好幾個選取器剛好都需要把文字的顏色設定為灰色的時候，一個一個分開寫的方法式，感覺就很繁瑣，如下： h1 { color:#666666; }

ie6目前依然是國內使用者的主要瀏覽器，因此作為網頁前端開發來說，無可避免必須相容IE6瀏覽器，這裡有十條使用有效html和css代碼修複可以相容ie6常見的問題。我們知道ie會在一段時間內仍然流行，但是我們仍然可以支援瀏覽器並且避免hacks和條件css嗎？這裡有十條使用有效html和css代碼修複可以相容ie6常見的問題。1、使用一個聲明你必須經常在html網頁頭部放置一個聲明，推薦使用嚴格的標準。例如或者xhtml使用最後你需要是ie6進入相容模式，這已經足夠相容的了。2、使用positi