本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：
代码如下:
XML/HTML Code
1.</pre><pre name="code"><!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="">a标签按钮</a>
45.<!--<input>标签按钮-->
46.<input type="button" value="input标签按钮"/>
47.<!--<button>标签按钮-->
48.<button>button标签按钮</button>
49.<!--任意标签按钮-->
50.<i>i标签按钮</i>
51.<!--带背景图标按钮-->
52.<a href="">
53. <span>带图标按钮</span>
54.</a>
55.<a href="">
56. <img src="images/edit.png"/>带图标按钮
57.</a>
58.</body>
59.</html>
至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。
- 办公场所的修饰礼仪
- 绿色校园演讲稿
- 灯谜协会2013年年终总结和2014年度工作规划
- 积极向上的团队口号
- 2013-2014学年度第一学期总务工作总结
- 2013年联席会议秘书处工作总结
- 影响人际关系的十“小节”
- 房产销售团队口号
- 2013-2014年度英语分层教学工作总结
- 中华美德颂演讲稿
- 名片的知识和礼仪
- 设计团队口号
- 关于孝的演讲稿
- 企业发布会的基本礼仪
- 求职信的礼仪用语
- 与美同行演讲稿
- 诚信考试宣传口号
- 领导的离别赠言范文
- 给同事的离别赠言范文
- 网上求职礼仪
- 节约用水的口号
- 招商引资标语口号2篇
- 关于加强校园安全管理的讲话稿
- 威海文明城市口号
- 计生宣传口号
- online bank
- online-bank
- online banking
- online-banking
- online blog
- online brokerage
- online-brokerage
- online casino
- online catalogue
- online-catalogue
- 按说
- 按部就班
- 按金
- 按钉
- 按钮
- 按键
- 按需分配
- 按验
- 挎
- 挎包
- 用化学方法鉴别醇和酮，醇跟醛、酮怎么鉴别出来?
- 用化学方法分离铁镀银，用化学方法分离胶和银
- 用化学方法鉴别苯酚乙醚乙醇
- 有机化学的记忆方法口诀
- 用化学方法鉴别苯,甲苯,环己烷
- 用化学方法鉴别苯酚和乙醇
- 有机化学除杂方法，除杂题解题方法
- 药物化学学习方法小技巧
- 药物化学学习方法，药化学的复习方法
- 用化学分离方法分离,有机物分离提纯方法