CSS

今天把公司平台中前設計師做的按鈕部分重新設計了下，原先他使用的JS實現圖片交替變化的方式，但那樣的缺點是：佔用了input裡的ID屬性，而且disabled也不能使用，不利於程式的設計製作。按鈕重新製作的思想：1、實現觸發與不觸發之間的差別；2、適用input和a；3、多種瀏覽器下無差別。按鈕重新製作的過程：1、利用不同樣式實現觸發與不觸發之間的差別；2、利用boder來類比按鈕陰影以下代碼在IE6、IE7、FF下測試正常！CSS部分：  代碼如下複製代碼

1、DIV置中 body {text-align: center;} div {margin-right: auto; margin-left: auto;}說明： 對於IE，在父元素定義“text-align: center;”就可以了對於FF等其他瀏覽器，僅這樣不能置中，需在子項目中定義“margin-right: auto; margin-left: auto;”。2、背景置中 body {background:url(#) #fff no-

1、DIV置中  代碼如下複製代碼 body {text-align: center;} div {margin-right: auto; margin-left: auto;} 說明： 對於IE，在父元素定義“text-align: center;”就可以了對於FF等其他瀏覽器，僅這樣不能置中，需在子項目中定義“margin-right: auto; margin-left: auto;”。2、背景置中

　　如何使整個頁面內容置中，如何使高度適應內容自動調整。這是學習CSS布局最常見的問題。下面就給出一個實際的例子，並詳細解釋。（本文的經驗和是藍色理想論壇xpoint、guoshuang共同討論得出的。）　　首先先按這裡看實際運行效果，這個頁面在mozilla、opera和IE瀏覽器中均可以實現置中和高度自適應。我們來分析代碼：CSS：  代碼如下複製代碼 body{background:#999;text-align:center;color:

先看下面代碼：  代碼如下複製代碼 <html> <head> </head> <body> <form name="form1"> <input type='file' name='file1' id='file1' style='display:none'> <input id='text1' style='border:1 solid black;height:22'>

當我們用於定義背景樣式時常常這樣寫：  代碼如下複製代碼 body{ background:url(img/header_top.gif) left top no-repeat;} 如我們又想定義一個背景色，又要在background中加入顏色就可以了，不過要注意的是如果你想用background-color這個樣式時請不要把這個樣式放在background之前就是不要這樣：  代碼如下複製代碼

　　1. 不要放過任何一個看上去很簡單的小問題——他們往往並不那麼簡單，或者可以引伸出很多知識點； 　　2. 會用CSS，並不說明你會CSS； 　　3. 看CSS的書，是學不了CSS語言的； 　　4. 浮躁的人容易說：css語言太難學了，應該還用表格；——那你已經落武了！ 　　5.浮躁的人容易問：我到底該從哪開始學；——別問，從最基礎的學就行了； 　　6.浮躁的人容易問：css有錢途嗎；——建議你去搶銀行； 　　7.浮躁的人容易說：我要中文版！我英文不行！——不行？學呀！

　　我是這樣來做DIV布局代碼的．不知道說的清楚不清楚，湊和看吧　　我把class分為２種，布局class，風格class，布局class是骨架，風格class是衣服　　舉個例子：　　比如布局中的左欄　　首先它的屬性有：是左欄，寬度，背景顏色，字型顏色等　　１．首先會定義一個class,比如:.layout,主要用來控制頁面整個的大小.layout{width:98%;margin:0

不使用 position 這種情況下每一層都遵循 HTML 定位規則,其中的 left,right,top,bottom 定位資訊對其無效,z-index 也不會發揮作用因為沒有層疊的情況出現.2. 使用 absolute 如兩個絕對位置對象的 z-index 屬性具有同樣的值,那麼將依據它們在HTML文檔中聲明的順序層疊. 2.1 未使用 z-index 這種情況下,依據它們在HTML文檔中聲明的順序層疊,因為 z-index 在未設定的情況下,預設為 0 .  代碼如下複製代碼

style="filter:濾鏡名(屬性1＝值1,屬性2＝值2......)"其中，“濾鏡名”就是你在DW樣式設定模組的濾鏡下拉式清單中看到的名稱，屬性值只需填入數字即可。下面是DW所提供的主要幾個濾鏡的功能說明：（以下二組表格採用了“盒子”、“邊框”、“區塊”、“類型”等CSS樣式）Alpha：設定透明層次blur：建立高速度移動效果，即模糊效果Chrom

1、有疑問，先驗證 調試時，先對代碼進行驗證。格式不正確的XHTML/CSS會導致許多錯誤。先在你最常用的瀏覽器中撰寫和測試CSS代碼，並盡量完善代碼。然後再設法相容其它瀏覽器。這樣從一開始你的代碼就是符合標準的，不必再為支援其它瀏覽器而勞心費神。（遵從標準的瀏覽器是Mozilla/Firefox, Safari,

很多朋友對我說，她/他有代碼潔癖，即，讓她/他寫XHTML的話，從來不願意加上額外的標籤（tag）。舉個簡單的例子，相信很多人從很多地方都看到過的：  代碼如下複製代碼 <div id="nav"> <ul>  <li></li>  <li></li>  ...... </ul></div>

css可以處理16,777,216顏色，可以使用名字、rgb值或十六進位代碼。red紅色等同於rgb(255,0,0)等同於rgb(100%,0%,0%)等同於#ff0000等同於#f00　　有17個預先確定的顏色，它們是：　　aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, 　　olive, orange, purple, red, silver, teal, white, and

DIV+CSS進階布局已逐漸流行，但面對所謂DIV+CSS布局的叫法讓人更為擔心，不要讓DIV成為Table的替代品，多層嵌套的DIV會嚴重影響代碼的可閱讀性，活用HTML為我們提供的標籤吧。什麼時候應該用DIV?雖然在這方面沒有什麼硬性的規定,但個人認為DIV更適用於大體架構的定位.例如我們要定義一塊頭部的地區,一般會這樣定義一個DIV:<div

應用Div+CSS網頁布局，製作符合web標準的網站，容易出現的一些問題。現在總結一下，以便大家能夠看到明白問題出在那裡。一.CSS校正的問題我們設計的網頁，都希望符合XHTML標準，CSS通過W3C的校正。有些未通過CSS2.0校正，主要校正錯誤都是:“Line : 0 font-family:

　　CSS selector 選擇符是我們進行CSS網頁布局的基礎。CSS selector到底有哪些，如何合理的運用呢？選擇符可以分為三類，除了第一類HTML selector之外，其它兩類我們是可以自己命名的，在進行命名時，注意包含語義，或者添加必要的注釋，使我們的代碼更清晰，易讀。　　HTML selector 標籤選擇符　　HTML selector就是HTML的標籤，如：DIV，TD，P，H1等等，如你用 

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 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個

　　前段時間客戶傳來一張網站效果圖，由於客戶是做平面設計人員，並無製作網頁的經驗，因此效果圖中大量使用漸層色,而且多層重疊著使用,導致整個切圖工作無法進行，因此不得不考慮採用CSS樣式。      筆者根據效果圖大致類比了一張兩層漸層的重疊效果圖，如下：圖1     

最後定義的 CSS 樣式將會覆蓋在其之前定義的所有已經存在、或與之衝突的樣式，比如下面這個例子：p { color: red; background: yellow }p { color: green }以上的段落最終將呈現綠色的字型，並帶有黃色的背景，這是因為最後定義的 color:green 將之前定義的 red 覆蓋掉了，至於黃色背景為何沒有消失，那是因為第二個 p 的定義中並沒有與之衝突的定義，因此它還是有效。你真的懂了嗎？好，我們來做個小測試：p.red { color: red

　　本來之前我打算寫表現本文主題的文章，但最近在新浪部落格群中看到了這篇文章，就不用我多費心血了，這裡轉載過來，希望對大家有所協助。　　li {list-style-image: url(images/disc.gif);}　　li的這個樣式定義是將清單項目使用圖片來代替顯示的小圓點。當然您也可以顯示成其它效果，詳細請參閱下面的定義:　　清單項目效果的CSS定義　　*list-style-type: circle(可換成自己想要的樣式);　清單項目樣式　　disc :　　　　　CSS1　實心圓