本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：
代码如下:
XML/HTML Code
1.</pre><pre name="code" class="html"><!DOCTYPE html>
2.<html lang="zh-CN">
3.<head>
4. <title>按钮写法</title>
5. <meta charset="UTF-8">
6. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
7. <link rel="stylesheet" href="css/style.css">
8.<style type="text/css">
9. a:hover{text-decoration: none;}
10. .btn{
11. display: inline-block;
12. margin-top: 10px;
13. padding: 10px 24px;
14. border-radius: 4px;
15. background-color: #63b7ff;
16. color: #fff;
17. cursor: pointer;
18. }
19. .btn:hover{
20. background-color: #99c6ff;
21. }
22. .inbtn{
23. border: none;
24. }
25. .bubtn{
26. border: none;
27. }
28. .btn{
29. font-style: normal;
30. }
31. .bgbtn span{
32. margin-left: 10px;
33. padding-left: 20px;
34. background: url(/images/edit.png) left center no-repeat;
35. }
36. .bgbtn02 img{
37. margin-bottom: -3px;
38. margin-right: 10px;
39. }
40.</style>
41.</head>
42.<body>
43.<!--<a>标签按钮-->
44.<a href="" class="btn">a标签按钮</a>
45.<!--<input>标签按钮-->
46.<input class="inbtn btn" type="button" value="input标签按钮"/>
47.<!--<button>标签按钮-->
48.<button class="bubtn btn">button标签按钮</button>
49.<!--任意标签按钮-->
50.<i class="ibtn btn">i标签按钮</i>
51.<!--带背景图标按钮-->
52.<a href="" class="bgbtn btn">
53. <span>带图标按钮</span>
54.</a>
55.<a href="" class="bgbtn02 btn">
56. <img src="/images/edit.png"/>带图标按钮
57.</a>
58.</body>
59.</html>
至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
