小編給大家分享一下html中button標(biāo)簽的樣式如何設(shè)置,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
“只有客戶發(fā)展了,才有我們的生存與發(fā)展!”這是創(chuàng)新互聯(lián)建站的服務(wù)宗旨!把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品,產(chǎn)品思維更注重全局思維、需求分析和迭代思維,在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線,而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。本篇文章主要的介紹了關(guān)于HTML button標(biāo)簽的樣式設(shè)置,還有關(guān)于HTML button標(biāo)簽的美化樣式介紹,接下來就讓我們一起來閱讀本篇文章吧
首先我們先介紹HTML中的button標(biāo)簽的樣式設(shè)置:
普通按鈕設(shè)置:
把input元素的type屬性設(shè)置為“button”,可以創(chuàng)建普通按鈕。按鈕上顯示的文本是value屬性的值,如果沒有提供value屬性,則只創(chuàng)建一個(gè)空按鈕。如:
<input type="button" value="立即購買">
效果很明顯,這是默認(rèn)普通按鈕的設(shè)置。
默認(rèn)情況下,在普通按鈕上點(diǎn)擊,是沒有任何反應(yīng)的。因此,需要為普通按鈕注冊(cè)事件,并手動(dòng)編寫相應(yīng)的處理函數(shù)。假如希望單擊上述按鈕時(shí),提交表單,則要為按鈕注冊(cè)onClick 事件。如:
<form name="buy" action="form.html" method="post"> <button onClick="submitForm(buy)">立即購買</button> </form>
現(xiàn)在點(diǎn)擊按鈕,就會(huì)觸發(fā)onClick事件,并調(diào)用事件處理函數(shù)submitForm(buy),參數(shù)buy為待處理表單name屬性的值。如果希望點(diǎn)擊按鈕后提交表單,就可以在事件處理函數(shù)中調(diào)用form對(duì)象的submit()方法:
function submitForm(f) { f.submit(); }
這是一個(gè)默認(rèn)情況的設(shè)置,現(xiàn)在我們來看看給html button標(biāo)簽設(shè)置樣式:
給大家看一個(gè)完整的代碼實(shí)例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>創(chuàng)新互聯(lián)建站</title> <style> .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px black; color:white; font-weight: bold; } .div:active{ box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; border-color: rgba(0,0,0,.3); background: #bbb; } </style> </head> <body> <div class="div">Button</div> </body> </html>
這個(gè)的效果如圖:
這個(gè)的效果是不是很明顯,比默認(rèn)的時(shí)候好看多了,等到我們學(xué)到j(luò)s的時(shí)候,我們還能用js的技術(shù)把這默認(rèn)的按鈕設(shè)置的更加美觀。
看完了這篇文章,相信你對(duì)html中button標(biāo)簽的樣式如何設(shè)置有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,感謝各位的閱讀!
文章標(biāo)題:html中button標(biāo)簽的樣式如何設(shè)置-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://vcdvsql.cn/article42/iejhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)公司、定制開發(fā)、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容