本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：
代码如下：
XML/HTML Code复制内容到剪贴板 </pre><prename="code"class="html"><!DOCTYPEhtml> <htmllang="zh-CN"> <head> <title>按钮写法</title> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1"> <linkrel="stylesheet"href="css/style.css"> <styletype="text/css"> a:hover{text-decoration:none;} .btn{ display:inline-block; margin-top:10px; padding:10px24px; 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; } .bgbtnspan{ margin-left:10px; padding-left:20px; background:url(images/edit.png)leftcenterno-repeat; } .bgbtn02img{ margin-bottom:-3px; margin-right:10px; } </style> </head> <body> <> <ahref=""class="btn">a标签按钮</a> <> <inputclass="inbtnbtn"type="button"value="input标签按钮"/> <> <buttonclass="bubtnbtn">button标签按钮</button> <> <iclass="ibtnbtn">i标签按钮</i> <> <ahref=""class="bgbtnbtn"> <span>带图标按钮</span> </a> <ahref=""class="bgbtn02btn"> <imgsrc="images/edit.png"/>带图标按钮 </a> </body> </html> 至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。
【Html+css实现纯文字和带图标的按钮】相关文章：
★ Html中使用自定义图片来实现checkbox显示的方法