最近實習一直在做前端切圖，也是一種需要繡花般耐心的活兒，在這裡總結一下一些基礎頁面元素的實現方式，後續陸續更新。首先我們遇到最多的可能是按鈕的切圖，按鈕可能有很多種外觀，但是一般可分為純文字的和帶表徵圖的按鈕，下面就來說說這兩種按鈕的實現方法。效果圖如下：
代碼如下：
</pre><pre name="code" class="html"><!DOCTYPE html><html lang="zh-CN"><head> <title>按鈕寫法</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <link rel="stylesheet" href="css/style.css"><style type="text/css"> a:hover{text-decoration: none;} .btn{ display: inline-block; margin-top: 10px; padding: 10px 24px; border-radius: 4px; background-color: #63b7ff; color: #fff; cursor: pointer; } .btn:hover{ background-color: #99c6ff; } .inbtn{ border: none; } .bubtn{ border: none; } .btn{ font-style: normal; } .bgbtn span{ margin-left: 10px; padding-left: 20px; background: url(images/edit.png) left center no-repeat; } .bgbtn02 img{ margin-bottom: -3px; margin-right: 10px; }</style></head><body><!--<a>標籤按鈕--><a href="" class="btn">a標籤按鈕</a><!--<input>標籤按鈕--><input class="inbtn btn" type="button" value="input標籤按鈕"/><!--<button>標籤按鈕--><button class="bubtn btn">button標籤按鈕</button><!--任意標籤按鈕--><i class="ibtn btn">i標籤按鈕</i><!--帶背景表徵圖按鈕--><a href="" class="bgbtn btn"> <span>帶表徵圖按鈕</span></a><a href="" class="bgbtn02 btn"> <img src="images/edit.png"/>帶表徵圖按鈕</a></body></html> 至於各種標籤的優缺點，還是需要大家去體會啦，如果大家有什麼好玩的按鈕要寫，可以留言，我們一起實現哦。
Author：事始
Sign：只要你還在嘗試，就不算失敗。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
