本文总结一下一些基础页面元素的实现方式,后续陆续更新。首先我们遇到最多的可能是按钮的切图,按钮可能有很多种外观,但是一般可分为纯文字的和带图标的按钮,下面就来说说这两种按钮的实现方法。效果图如下:
代码如下:
XML/HTML Code
1.
2.
3.
4.
按钮写法 5.
6.
7.
8.
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.
41.
42.
43.
44.a标签按钮
45.
46.
47.
48.
49.
50.i标签按钮
51.
53. 带图标按钮
54.
56. 带图标按钮
57.
58.
59.
至于各种标签的优缺点,还是需要大家去体会啦,如果大家有什么好玩的按钮要写,我们一起实现哦。