CSS

1. position:static|無定位position:static是所有元素定位的預設值, 一般不用註明，除非有需要取消繼承的別的定位example: 以下是引用片段：>#div-1 {  position:static; }2. position:relative|相對定位使用position:relative，就需要top,bottom,left,right4個屬性來配合，確定元素的位置。如果要讓div-1層向下移動20px,左移40px:example:

　　css2.0 中的 background-position 大家用到過嗎？怎麼用的？用在哪裡？js控製圖片切換有兩個缺陷：1.有時後切換緩慢,需要預載解決；2.要製作2-3套圖片 　　看看怎麼用 background-position 解決這個問題，實現快速"切換"，這裡只用到一張圖片　　至於代碼中的font:10px/1也是不常見的用法　　可以參考這裡:http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm　

<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left;position:relative;}.menu ul li

 代碼如下複製代碼 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8" />         <style type="text/css"> &

外部參考的優點為什麼要把CSS聲明做成一個CSS檔案呢？這樣做的好處有三個。第一個好處，網頁處理速度會更快一些，尤其在有很多網頁共用一份CSS樣式表時更為好用！因為你不用為每一頁都寫同樣的CSS代碼，網頁自然就會更瘦一些輕快一些。第二個好處是，可以防止一些電腦程度較低的使用者直接看到CSS文法（就是有人不喜歡被看見文法），當然指的是無法直接看到，而非無法看到，稍微有點能力的，要查看CSS檔案的內容簡直是易如反掌。第三個好處當然就是維護方便了！你只要修改一個CSS檔案，不管你有幾千個網頁檔案，都會

CSS Hack的原理是什麼由於不同的瀏覽器對CSS的支援及解析結果不一樣，還由於CSS中的優先順序的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。CSS Hack大致有3種表現形式，CSS類內部Hack、選取器Hack以及HTML頭部引用(if IE)Hack，CSS Hack主要針對IE瀏覽器。類內部Hack：比如 IE6能識別底線”_”和星號” * “，IE7能識別星號” *

方法一，利用圖片寫在圖片上就不說了，方法二：靜態包裹通過這個方法，我們將每個字母包裹在一個span中，然後在CSS中設定它的display屬性為block  代碼如下複製代碼 <!DOCTYPE html><html><head><meta charset=utf-8 /><title>Vertical Text</title><style>  h1 span { display:

樣式代碼，四個屬性都是必須的，並且寬度必須設在當前容器上，父容器定寬無效：  代碼如下複製代碼 .box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 測試 IE6、IE7、IE8、IE9、Chrome、Firefox 均支援。測試執行個體  代碼如下複製代碼 <!DOCTYPE HTML>&

CSS Sprites和影像地圖現在已經隨處可見了，但由於IE6和IE7不支援Data

先看效果 下面為css代碼  代碼如下複製代碼 <style>.menu {     width:750px;     font-size:0.85em;     position:relative;     z-index:100; } /* remove all the bullets, borders and padding

最大寬度的樣式通過將 “margin: 1em 5%” 修改為 “margin: 0” 可以很容易的切換到最大寬度的樣式   代碼如下複製代碼 #container { margin: 0; /* changed from 1em 5% */background-color: #FFF; background-image: url(background.jpg); background-repeat: repeat-y;

上面是效果，下面看實現代碼  代碼如下複製代碼 .whatever {background: #808080;padding: 20px;}.whatever:hover, .whateverhover {background: #eaeaea;}</style> <!-- Additional IE/Win specific style sheet (Conditional Comments) --><!--[if lte IE 6]&

padding 簡寫屬性在一個聲明中設定所有內邊距屬性。說明這個簡寫屬性設定元素所有內邊距的寬度，或者設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。注釋：不允許使用負值。例子 1padding:10px 5px 15px 20px;上內邊距是 10px 右內邊距是 5px 下內邊距是 15px 左內邊距是 20px 例子

 代碼如下複製代碼 body { font: normal .8em/1.5em Arial, Helvetica, sans-serif; background: #ebebeb; width: 900px; margin: 100px auto; color: #666;}a { color: #333;}#nav { margin: 0; padding: 7px 6px

CSS讓一行文字顯示在圖片的底部，用來說明圖片的內容，當作圖片標題，標題文字和背景可以設定半透明，滑鼠經過圖片時邊框換色。代碼預覽  代碼如下複製代碼 <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>文字顯示在圖片上</title><style

多說自訂CSS樣式美化，用多說評論有一段時間了，有些樣式感覺看起來有點彆扭，所以就稍微的美化它一下，怎麼美化呢？多說的個人化裡有個自訂CSS，將你要更改的CSS樣式代碼粘貼進去儲存就好了；注意：有些屬性如果修改了沒效果的話，要在每個屬性後面加上一個!important，將優先順序調為最高就可以看到效果了，比如：padding:10px; 這個屬性沒生效的話就要這樣改：padding:10px !important;

絕對位置法三欄布局自適應：  代碼如下複製代碼 <!doctype html><html><head><meta

在Head中加入<meta name="save" content="history">添加css: input{behavior:url(#default#savehistory)};e.g. 頁面上存在<input type=text id="txttestsavehistory"/>給 input輸入值後重新整理頁面看看，輸入的值還在例子  代碼如下複製代碼 <!DOCTYPE

Css防止圖片尺寸過大添加如下CSS：  代碼如下複製代碼 img {  max-width: 800px;  height: auto;  }  代碼中的max-width:800px限制圖片的最大寬度為800像素，而下面的hight:auto很關鍵，可以保證圖片有正確的長寬比，不至於因為被調整寬度而變形。實用例子WordPress自動調整圖片大小1、開啟你的“樣式表 (style.css)”檔案，然後在 p

提示：您可以先修改部分代碼再運行 純CSS Lightbox效果 （無需JS） Close 提示：您可以先修改部分代碼再運行