亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用滑動(dòng)門技術(shù)設(shè)計(jì)按鈕的圖文教程

 更新時(shí)間：2007年07月23日 00:00:00   作者：  
本文為翻譯文章，全文地址：http://diger.cn/article.asp?id=351
原文地址：http://www.filamentgroup.com/lab/buttonElement/

Particle Tree 最近發(fā)布了一篇文章描述了一種他們拿出的設(shè)計(jì)按鈕元素的技術(shù)，對(duì)于那些不熟練的人來(lái)說(shuō)，表格按鍵是出了名的難以定制。典型的解決方案是使用瀏覽器提供的默認(rèn)按鈕，或者是使用一個(gè)圖形輸入。當(dāng)圖形輸入完成了需求結(jié)果時(shí)，它請(qǐng)求創(chuàng)建一個(gè)新的圖形為每一個(gè)按鈕用它的文本“Baked-in”（沒(méi)有提及以hovers交換它）。

盡管Particle Tree的技術(shù)提供了一種可靠的方案，它不能滿足我們的需求。我們需要一種使用了滑動(dòng)門技術(shù)的按鈕，一種真正的HTML文本，不需要請(qǐng)求JavaScript轉(zhuǎn)滾或者提交表格。滿足這些條件就意味著input和anchor元素被排除了。很顯然,按鈕元素正是我們唯一的選擇。下面的技術(shù)示范了一種使用滑動(dòng)門技術(shù)的跨瀏覽器的按鈕的技術(shù)。


查看Demo     

標(biāo)簽：
復(fù)制代碼 代碼如下:

<button value="submit" class="submitBtn"><span>Submit</span></button> 

CSS：

程序代碼
復(fù)制代碼 代碼如下:

button {  
  border:0;  
  cursor:pointer;  
  font-weight:bold;  
  padding:0 20px 0 0;  
  text-align:center;  
} 
button span {  
  position:relative;  
  display:block;  
  white-space:nowrap;  
  padding:0 0 0 20px;  
} 
/*blue buttons*/ 
button.submitBtn {  
  background:url(images/btn_blue_right.gif) right no-repeat;  
  font-size:1.3em;  
} 
button.submitBtn span {  
  height:50px;  
  line-height:50px; 
  background:url(images/btn_blue_left.gif) left no-repeat; 
  color:#fff;  
} 
button.submitBtn:hover { 
    background:url(images/btn_blue_right_hover.gif) right no-repeat;  
} 
button.submitBtn:hover span { 
    background:url(images/btn_blue_left_hover.gif) left no-repeat;  
} 

CSS For IE6和IE7（有時(shí)候需要）

復(fù)制代碼 代碼如下:

button {  
  width:auto;  
  overflow:visible;  
} 
button span {  
  margin-top:1px;  
} 

就像你能看到的那樣，每個(gè)狀態(tài)使用了2個(gè)圖片（總共4個(gè)圖片）。進(jìn)一步簡(jiǎn)化，可以將這些狀態(tài)轉(zhuǎn)化為兩個(gè)。但這種想法的最初測(cè)試出現(xiàn)了不一致的結(jié)果。











瀏覽器支持：
IE6，IE7，F(xiàn)irefox(mac/pc)，Safari，Opera，Camino等等。

警告：為了使hover在IE6中有效，你將需要編寫(xiě)一個(gè)類觸發(fā)器。盡管不像圖片交換一樣糟糕。

相關(guān)文章

最新評(píng)論