網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

用樣式美化button(2)

日期:2013-12-13  來源:攀枝花惠康網絡公司


在這個例子中還可以在button中嵌入icon的來增添它的視覺效不美觀,篇幅有限就不在這里舉例子了。

在css中你會發現此賭暌姑到了position:relative;是為體味決ie和firefox下點擊后下沉錯位的問題。但在opera下仍是會沒解決失蹤。還請巨匠多多輔佐。

我們經常使用到a,button,input等標簽,經由過程css加布景等體例來實現按鈕的效不美觀??墒且鲆粋€通用的樣式類,又能保證在各個瀏覽器下默示一致,還能有很好的擴展性的按紐可不就那么輕易了。好了廢話少說。進入正題。

首先我們選擇a和button兩個標簽作為通用按紐的外包裝器。首要考慮到,在ie6不撐持a以外的:hover謂馓瀣使用a就可以對按鈕做懸浮狀況,這就是為什么選擇他們做為最外層的包裝器而不是span或者其他的標簽。為什么不用input下面會具體說到。

先來熟悉一下button的類型(type),button,默認的類型。submit,該可以用來提交表單,功能同<input type=”submit” value=http://www.css88.com/archives/”提交” />。reset,可以用來恢復表單默認值。如下

123456 &lt;form action=""&gt;&lt;input type="text" value="I LOVE CHINA" /&gt;&lt;button type="button"&gt;type="button",我是一個默認的button,&lt;/button&gt;&lt;button type="submit"&gt;type="submit",我可以用來提交表單&lt;/button&gt;&lt;button type="reset"&gt;type="reset",我可以來恢復表單默認值&lt;/button&gt;&lt;/form&gt;

但如不美觀想讓button在各個瀏覽器和各類操作系統下默示一致。仍是一件斗勁讓人頭疼的工作。

之前說了,當button的type屬性為submit的時辰,同樣可以對表單進行提交,那為什么要選擇button,而不是input。原因有兩點。

  1. 表單中,在css中可以經由過程標簽名字來作為選擇器,對輸入框和按鈕進行樣式節制,在不撐持css2屬性選擇器的瀏覽器中,這點很是主要。
  2. 可以在button內甚至可以嵌入div,p這樣的標簽標簽,其擴展性那是相當的好。

在對button斷根padding和border之后,ie6,7城市在上內邊距發生1個像素的空間,firefox2,3(beta5)則會發生擺布內邊距3個像素和上內邊距1個像素的空白,opera和safari則不會發生多余的內邊距填充。請看圖。這些差異給我們美化button上填了良多麻煩。

下面經由過程一個例子來演示一下通用button的建造

Html

1     &lt;button class=&lt;b&gt;&lt;b&gt;有樂趣有樂趣&lt;/b&gt;&lt;/b&gt;&lt;/button&gt;

在這里采用了三層標簽的結構,讓最內層<b>的布景repeat-x,獲得自順應文字寬度。當然也可以兩層標簽結構的使用滑動門手藝實現。但如不美觀要通用的話,那滑動門的布景至少要有800px的寬(考慮到寬屏,文字長等情形)

Images

左邊圓角

中心一再布景

右邊圓角

在建造的過程中,也許會問,為什么不將三張合成一張布景,其適ё儕因就是膳縵沔提到的。每個瀏覽器下對button標簽的默認內間距詮釋的都紛歧樣。所以只能經由過程布景垂直居中的體例來解決三張圖片對齊的問題。

CSS

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647     .btn{display:inline-block;display:-moz-inline-stack;*display:inline;zoom:1;margin:0;border:0;padding:0 5px 0 0;text-align:center;font-family:"微軟雅黑",YaHei,"黑體";vertical-align:middle;font-size:0.8em;color:#000;text-decoration:none;background:url("../img/span>right  no-repeat;}button.btn{cursor:pointer;width:auto;*overflow:visible;border:0 none;background-color:none;vertical-align:middle;}.btn b{display:inline-block;display:-moz-inline-stack;*display:inline;zoom:1;padding:0 0 0 5px;position:relative;white-space:nowrap;font-weight:normal;height:22px;line-height:22px;background:#FFD8D3 url("../img/yn_btn_pink_left.gif") left  no-repeat;_background-color:#FFF;}button.btn b b{_margin-top:1px;padding:0px 8px;height:22px;line-height:22px;cursor:background:#FFD8D3 url("../img/yn_btn_pink_center.gif") left repeat-x;_background-color:#FFF;}

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图