本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：

代码如下：

XML/HTML Code 复制内容到剪贴板 </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 >      至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。