Time of Update: 2017-07-17
標籤:css一、說明設定元素在被使用者啟用(在滑鼠點擊與釋放之間發生的事件)時的樣式。IE7及更早瀏覽器只支援a元素的:active,從IE8開始支援其它元素的:active。另:如果需要給超連結定義:訪問前,滑鼠移至上方,當前被點擊,已訪問這4種偽類效果,而又沒有按照一致的書寫順序,不同的瀏覽器可能會有不同的表現。超連結的4種狀態,需要有特定的書寫順序才會生效。注意,a:hover必須位於a:link和a:visited之後,a:active必須位於a:hover之後。可靠的順序是:l(lin
Time of Update: 2017-06-30
發現在css中,當把border-collapse設定為separate為,要不要empty-cells結果是一樣的,而且用show與hide值都一樣,望各位指點。在css2標準中 文法:empty-cells : show | hide取值:show : 預設值。顯示邊框 hide : 隱藏邊框 說明:設定或檢索當表格的儲存格無內容時,是否顯示該儲存格的邊框。只有當表格行和列的邊框獨立(例如當 border-collapse 屬性等於 separate
Time of Update: 2017-06-30
一、caption-side屬性表格加入邊框之後,預設樣式情況如:如果我們想要調整表格標題,那該怎麼辦呢?在CSS中,我們使用caption-side屬性來定義表格標題的位置。文法:caption-side:屬性值;說明:caption-side屬性取值如下:舉例:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head>
Time of Update: 2017-07-20
製作一個響應式導航條,能夠自動隨著不同的螢幕解析度或瀏覽器視窗大小的不同而改變導航條的樣式,這裡主要用到的就是CSS3的Media Query。另外需要提到的是,ie6-ie8是不支援CSS3的Media Query的,因此對於ie6-ie8我們需要特殊處理,就讓他們保持預設樣式,這對於布局及樣式上都要考慮到這一點。首先看一下布局這一塊,html代碼如下:<p class="navBar"> <p class="nav">
Time of Update: 2017-07-20
現在有這麼一個執行個體要求: 1)畫五個盒子,分別用紅、紫、橙、綠、藍字型顏色來表示; 2)滑鼠點擊其中一個盒子時,邊框加粗並顯示與盒子字型顏色一致的顏色; 效果如: (圖1)盒子 下面是具體的實現思路: 一、html內容構建 首先利用html內容表達五個盒子內容,代碼如下:<ul id='levelGroup'> <li id='level1'
Time of Update: 2017-07-20
1. class是設定標籤的類, class屬性用於指定元素屬於何種樣式的類。 如樣式表可以加入.content1 { color: red; background: #ff80c0 } 使用方法:class="content1" . id是設定標籤的標識。id屬性用於定義一個元素的獨特的樣式。如一個CSS規則#content2 { font-size: larger } 使用方法為:id="content2"
Time of Update: 2017-07-19
Active的一段話 active的英文解釋為“積極的”,表現在滑鼠上就是點擊的意思。關於active選取器最多的樣本恐怕就是應用在連結上面的,然而開啟連結是一個一瞬間的動作,這不能很好的體現active選取器的特點。 Active的特點其實我們開啟一個帶有active連結,啟用acive是有一個過程的,就是點擊模組後直到鬆開模組。如果我們不指定這個過程所花費的時間,筆者認為其預設花費零點幾秒。<!DOCTYPE html><html> <head>
Time of Update: 2017-07-19
效果:html 代碼:<p class="banner_area"><p class="item"><span class="ck_item one" itemType='jjjz'></span></p><p class="item"><span class="ck_item two"
Time of Update: 2017-06-29
這篇文章主要介紹了純CSS實現氣泡對話方塊尖角處理的實現代碼,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧先來看一下:簡單粗暴上代碼:html:<p class="dialog-box"> <span class="bot"></span> <span class="top"></span> </p>less:.dialog-box {
Time of Update: 2017-07-19
一般情況下導覽功能表的背景圖片都是比較有規則的,但是平時我們也會遇到很多背景圖片形狀不規則導航條(比如但滑鼠移上的時候,背景圖片不規則,本例只討論此種類型),如所示:(圖一)當滑鼠移上去的時候背景變成紅色箭頭,也許,咋一看,覺得這個效果並沒有什麼特別的地方,但是仔細看看我畫上去的綠色框框部分,就會發現每一塊都是接在一起的不會斷開的;如果說按照普通方法來做,那麼實現的可能是所示的效果:(圖二)即是塊與塊之間是斷開的。<!DOCTYPE html PUBLIC
Time of Update: 2017-07-19
首先我們要瞭解樣式中的這兩種定位;absolute(絕對位置):將被賦予的對象從文檔流中拖出,使用left,right,top,bottom等屬性相對於最接近的一個最有定位設定的父級對象進行絕對位置,如果父級沒有進行定位屬性設定,則按照預設規則來設定(根據body左上方作為參考進行定位),同時絕對位置的對象可層疊。relative(相對定位):對象不可重疊,使用left,right,top,bottom等屬性在正常的文檔流中進行定位,其對象不可以層疊。置中:1,對於使用了absolute定位的對
Time of Update: 2017-07-19
目前幾乎所有主流的瀏覽器都支援position屬性("inherit"除外,"inherit"不支援所有包括IE8和之前版本IE瀏覽器,IE9、IE10還沒測試過),以下是w3school對position五個值的解釋:其中absolute和relative是最常用的,fixed用得也比較多(其中IE6並不支援fixed)。1、absolute(絕對位置)absolute是產生覺對定位的元素,脫離了文字資料流(即在文檔中已經不佔據位置),參照瀏覽器的左上方
Time of Update: 2017-06-29
原始碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
Time of Update: 2017-07-17
css中voice-family: "\"}\"";有什麼作用?#centercontent { background-color: #006600; background-image: url(../img/home_main_bg.gif); background-repeat: repeat-x;
Time of Update: 2017-07-17
voice-family屬性#sidebar { width: 200px; padding: 10px; border: 10px solid black;}在此設定寬度為200px,內邊距為10px,邊框為10px,但在Window
Time of Update: 2017-07-16
製作頁面的時候,我們常用“font-family ”來定義字型,然而我們用“font-family “定義的字型在使用者的瀏覽器中是否可以呈現取決於使用者的電腦上是否有安裝我們定義的字型。在網路上我們經常可以看到國外的一些網站使用了一些不常見而又很漂亮的字型,而這些字型使用者的電腦上一般是沒有安裝的,那麼我們今天就來介紹下如何在頁面中使在使用者電腦上沒有安裝的字型。css3 @font-face說@font-face是CSS3的新屬性其實是不準確的,因為在CSS2就已經支援這一特性了,並且IE5
Time of Update: 2017-07-08
mark標籤: mark元素表示頁面中需要突出或高亮顯示的內容,在搜尋結果中也常常出現,比如檢索結果中的關鍵詞高亮顯示。 案例:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Time of Update: 2017-07-08
".PageNext{page-break-after:always;}控制html列印分頁有關問題":關鍵詞:pagenext page-break-after always 控制 html 列印 分頁 有關 問題.pagenext{page-break-after: always;} 控制html列印分頁問題.pagenext{page-break-after: always;} 控制html列印分頁,第一頁有十六行,但是後面的頁都只有十四行 這個是在哪控制的...?
Time of Update: 2017-07-08
一、作者,下載,demo等Minimum Page項目是幾個老外最近整出來的,還是有些參考價值的,故拿來說說。這兩位仁兄是Peter Wilson 和 Josh
Time of Update: 2017-06-17
用CSS和jQuery來實現它,盡量看起來和原效果一樣。最終本教程裡,我將使用CSS,HTML和jQuery來建立一個近似Apple TV視差效果,如果你正在閱讀,我假設你對上述三種技術都有基本的瞭解。廢話不多說,開始第一部分。HTML頁面我們的頁面結構像下面這樣:<p class="poster"> <p class="shine"></p> <p class="layer-1">&