本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：
代码如下：
xml/html code复制内容到剪贴板
pre>pre name=code class=html>nbsp;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 href= class=btn>a标签按钮a>            input class=inbtn btn type=button value=input标签按钮/>            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>
至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。