CSS超級技巧大放送(3)

css|技巧 八.多重class定義 一個標籤可以同時定義多個class。例如:我們先定義兩個樣式,第一個樣式背景為#666;第二個樣式有10 px的邊框。.one{width:200px;background:#666;}.two{border:10px solid #F00;} 在頁面代碼中,我們可以這樣調用<div class=one two></div>

CSS超級技巧大放送(4)

css|技巧 十.不需要給背景圖片路徑加引號 為了節省位元組,我建議不要給背景圖片路徑加引號,因為引號不是必須的。例如:background:url(images/***.gif) #333; 可以寫為background:url(images/***.gif) #333; 如果你加了引號,反而會引起一些瀏覽器的錯誤。十一.組選取器(Group selectors)

CSS濾鏡之Shadow屬性

ado|css|濾鏡 Shadow屬性可以在指定的方向建立物體的投影。它的運算式是這樣的:   Filter:Shadow(Color=color,Direction=direction)   在這裡,Shadow有兩個參數值:Color參數用來指定投影的顏色;Direction參數用來指定投影的方向。  這裡說的方向與我們在第二節Blur屬性中提到的“方向與角度的關係”是一樣的。

CSS濾鏡之Chroma屬性

css|濾鏡 Chroma屬性可以設定一個對象中指定的顏色為透明色,它的運算式如下:   Filter:Chroma(color=color)   這個屬性的運算式是不是很簡單,它只有一個參數。只需把您想要指定透明的顏色用Color參數設定出來就可以了。比如下面這幅圖:  圖中顯示兩種字型,兩種顏色,我們現在對“leaves”字型添加chroma屬性,使其透明。代碼如下:  <html>   <head>

CSS濾鏡之Xray屬性

css|濾鏡 Xray就是X射線的意思。  Xray屬性,顧名思義,這種屬性產生的效果就是使對象看上去有一種X光片的感覺。 它的運算式很簡單:   Filter:Xray   我們還是先來看一個頁面(如下圖):  如果在上面的頁面中加入Xray屬性,也就是在<head>的<Style>中,增添下面這一句代碼:  Filter:Xray   您再看這個頁面就會是另一種效果了:(如下圖)  看,是不是就像給它拍了一張X光片一樣。

CSS濾鏡之FlipH、FlipV屬性

css|濾鏡 Flip是CSS濾鏡的翻轉屬性,FlipH代表水平翻轉,FlipV代表垂直翻轉。它們的運算式很簡單,分別是:   Filter:FlipH   Filter:FlipV   我們先來看一幅圖:點擊可放大   下面我們分別對它實現水平翻轉和垂直翻轉,並且在圖片上方的一段文字,也發生翻轉。代碼如下:  <html>    <head>    <title>flip css</title&

CSS濾鏡之DropShadow屬性

ado|css|濾鏡 DropShadow屬性是為了添加對象的陰影製作效果的。它實現的效果看上去就像使原來的對象離開頁面,然後在頁面上顯示出該對象的投影。看一看它的運算式:   Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,            Positive=positive)   該屬性一共有四個參數: Color代表投射陰影的顏色。

CSS濾鏡:Gray屬性

css|濾鏡 Gray屬性把一張圖片變成灰階圖。它的運算式很簡單:   Filter:Gray   其實這個屬性沒什麼好講的,只需在您定義的IMG樣式中加入一句代碼:  {Filter:Gray}就一切OK了。  下面兩幅圖分別代表未加Gray屬性和添加了Gray屬性的效果: 這是原圖,點擊可放大 轉成gray屬性後的效果圖  本節講述的內容比較簡單,下一節將向您介紹Invert轉化屬性。

CSS定位二:空間定位

css 在這一節裡,我們來看一個利用z-index定位的例子,這個例子的效果在這裡。  我們看到例子中的兩幅圖片和一段文字分別處於不同的空間位置,文字覆蓋在那朵花的圖片上,而揮動小旗的小老鼠卻又覆蓋在文字的上面。那麼這種效果是怎樣實現的呢?這裡利用了CSS定位的z-index屬性,代碼如下:   <html>    <head>    <title>zindex</title>    

巧用CSS製作圖象特效

css 一張風景圖片,當滑鼠在圖片上面時,立即顯示圖片的文字說明,且有文字的地方圖象變模糊了,當滑鼠移開圖片時,圖片上的文字又消失了,圖片又恢複了原樣。這種效果是如何?的呢?用dreamweaver的Behavirs 功能可以實現,我在這裡介紹的是用CSS來製作,網頁的原始碼顯得更簡煉。   原理:利用CSS的屬性值可動態改變的特點。 

怎樣編寫CSS

css 上面的例子中,我們可以看到CSS的語句是內嵌在HTML文檔內的。所以,編寫CSS的方法和編寫HTML文檔的方法是一樣的。  您可以用任何一種文本編輯工具來編寫。比如Windows下的記事本和寫字板、專門的HTML文本編輯工具(Frontpage、Ultraedit等),都可以用來編輯CSS文檔。   那麼您可能會問,獨立編輯好的CSS文檔怎樣加入到HTML文檔中呢?其實在第一章中的例子裡已經介紹了兩種方法。  一種是把CSS文檔放到<

CSS屬性(滑鼠屬性)

css 我們知道,當把滑鼠移動到不同的地方時,當滑鼠需要執行不同的功能時,當系統處於不同的狀態時,都會使滑鼠的形狀發生改變。  用CSS來改變滑鼠的屬性,就是當滑鼠移動到不同的元素對象上面時,讓滑鼠以不同的形狀、圖案顯示。   在CSS當中,這種樣式是通過“cursor”屬性來實現的。Cursor屬性有很多的屬性值,我們來看一下它的詳細列表:   我們來看一個例子吧,請看下面這段代碼:  <html>    <head>  

CSS屬性(文字屬性)

css 3、文字屬性   ※定義間距  前面說了如何用CSS定義字型、顏色和背景屬性,那麼定義好的文本我們怎麼對它進行排版呢?  下面我們講述一下CSS的文字屬性,還是先來看一下文字屬性的詳細列表:  我們可以從表中看到在這裡可以定義文本的文字間距、字母間距、裝飾、對齊、縮排方式和行高等屬性。 舉個例子來看看吧。比如下面這段文字(如左下圖):

用css美化捲軸

css 果在您看夠了您的首頁中灰色的捲軸,想讓他變一種顏色,您該怎麼辦呢? 其實這很簡單,插入一段代碼就能實現了(必須是IE5以上,或者是以IE5為核心的瀏覽器)首先,先讓我們看這張圖這段代碼是在html中的和中加入其中#xxxxxx就是你選擇的顏色的代碼如果你還不明白請在看下面的幾個例子1 body { background: #4E544B; color: #FFFFFF; SCROLLBAR-FACE-COLOR: #6D7669;

基於CSS的表單:現代的解決方案

css|解決  原文:CSS-Based Forms: Modern Solutions作者:Sven Lennartz備忘:作者不辭辛苦不遺餘力地提供給我們這麼多的這麼好的參考,真是令人感動阿,我轉的手都麻了!Quote In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’

css布局定位系列:相對定位

css  英文原文:http://brainjar.com/css/positioning/default.asp 

把XHTML/CSS頁面轉換成為印表機頁面

css|xhtml|列印|頁面|轉換 在以前,為Web頁面建立一個印表機友好的版本意味著要設計一個布局和格式都經過修改的單獨頁面,這樣才能夠在列印的時候獲得令人滿意的效果。現在,通過使用結構化的XHTML和CSS,你可以實現同樣的效果而只用花費少得多的精力。  從螢幕顯示到列印效果大多數的Web頁面都是設計適用於在電腦螢幕上觀看的。然而,有的時候使用者需要將某些頁面列印出來,也許就是為了保留一個長期的記錄,或者將其用作方便的離線參考資料。

避免表格table被撐開變形的CSS

css

解決IE5/IE5.5/IE6/FF的相容性問題——CSS

css|解決|問題

CSS實現的中英文雙語導覽功能表

css|菜單 這是一個完全用CSS實現的中英文雙語導覽功能表,無指令碼和圖片,初始時,菜單語言是英文,當滑鼠移至上方在菜單上時,其變成中文,當然你也可以反過來做。實現原理:XHTML<ul id="nav"><li><a class="bi"

總頁數: 694 1 .... 101 102 103 104 105 .... 694 Go to: 前往

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.