用滑動門技術設計按鈕的圖文教程

2020-10-23 18:40:29

字體：大中小

來源：轉載

供稿：網友

本文為翻譯文章，全文地址：http://diger.cn/article.asp?id=351
原文地址：http://www.filamentgroup.com/lab/buttonElement/

Particle Tree 最近發布了一篇文章描述了一種他們拿出的設計按鈕元素的技術，對于那些不熟練的人來說，表格按鍵是出了名的難以定制。典型的解決方案是使用瀏覽器提供的默認按鈕，或者是使用一個圖形輸入。當圖形輸入完成了需求結果時，它請求創建一個新的圖形為每一個按鈕用它的文本“Baked-in”（沒有提及以hovers交換它）。

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

查看Demo

標簽：

復制代碼代碼如下:

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

CSS：

程序代碼

復制代碼代碼如下:

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（有時候需要）

復制代碼代碼如下:

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

就像你能看到的那樣，每個狀態使用了2個圖片（總共4個圖片）。進一步簡化，可以將這些狀態轉化為兩個。但這種想法的最初測試出現了不一致的結果。

瀏覽器支持：
IE6，IE7，Firefox(mac/pc)，Safari，Opera，Camino等等。

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

上一篇：ul在Firefox和IE下的不同表現的解決方法

下一篇：應用WEB標準實例：列表頁面的制作

學習交流

BIOS 中英文對照表 BIOS設置參考

BIOS 中英文對照表 BIOS設置參考...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

用滑動門技術設計按鈕的圖文教程