Htmlcss实现纯文字和带图标的按钮.docxVIP

本文总结一下一些基础页面元素的实现方式， 后续陆续更新。 首先我们遇到最多的可能 是按钮的切图， 按钮可能有很多种外观， 但是一般可分为纯文字的和带图标的按钮， 下面就来说说这两种按钮的实现方法。效果图如下： 代码如下 : XML/HTML Code 1.lt;/pregt;lt;pre name=code class=htmlgt;lt;!DOCTYPE htmlgt; nbsp; nbsp;nbsp; 2.lt;html lang=zh-CNgt; nbsp; nbsp;nbsp; 3.lt;headgt; nbsp; nbsp;nbsp; nbsp;lt;titlegt; 按钮写法 lt;/titlegt; nbsp; nbsp;nbsp; nbsp;lt;meta charset=UTF-8gt; nbsp; nbsp;nbsp; nbsp;lt;meta http-equiv=X-UA-Compatiblecontent=IE=Edge,chrome=1gt; nbsp; nbsp;nbsp; nbsp;lt;link rel=stylesheet href=css/style.cssgt; nbsp; nbsp;nbsp; 8.lt;style type=text/cssgt; nbsp; nbsp;nbsp; nbsp;a:hover{text-decoration: none;} nbsp; nbsp;nbsp; nbsp;.btn{ nbsp; nbsp;nbsp; nbsp; nbsp;display: inline-block; nbsp; nbsp;nbsp; nbsp; nbsp;margin-top: 10px; nbsp; nbsp;nbsp; nbsp; nbsp;padding: 10px 24px; nbsp; nbsp;nbsp; nbsp; nbsp;border-radius: 4px; nbsp; nbsp;nbsp; nbsp; nbsp;background-color: #63b7ff; nbsp; nbsp;nbsp; nbsp; nbsp;color: #fff; nbsp; nbsp;nbsp; nbsp; nbsp;cursor: pointer; nbsp; nbsp;nbsp; nbsp;} nbsp; nbsp;nbsp; nbsp;.btn:hover{ nbsp; nbsp;nbsp; nbsp; nbsp;background-color: #99c6ff; nbsp; nbsp;nbsp; nbsp;} nbsp; nbsp;nbsp; nbsp;.inbtn{ nbsp; nbsp;nbsp; nbsp; nbsp;border: none; nbsp; nbsp;nbsp; nbsp;} nbsp; nbsp;nbsp; nbsp;.bubtn{ nbsp; nbsp;nbsp; nbsp; nbsp;border: none; nbsp; nbsp;nbsp; nbsp;} nbsp; nbsp;nbsp; nbsp;.btn{ nbsp; nbsp;nbsp; nbsp; nbsp;font-style: normal; nbsp; nbsp;nbsp; nbsp;} nbsp; nbsp;nbsp; nbsp;.bgbtn span{ nbsp; nbsp;nbsp; nbsp; nbsp;margin-left: 10px; nbsp; nbsp;nbsp; nbsp; nbsp;padding-left: 20px; nbsp; nbsp;nbsp; nbsp; nbsp;background: url(images/edit.png) left center no-repeat; nbsp; nbsp;nbsp; nbsp;} nbsp; nbsp;nbsp; nbsp;.bgbtn02 img{ nbsp; nbsp;nbsp; nbsp; nbsp;margin-bottom: -3px; nbsp; nbsp;nbsp; nbsp; nbsp;margin-right: 10px; nbsp; nbsp;nbsp; nbsp;} nbsp; nbsp;nbsp; 40.lt;/stylegt; nbsp; nbsp;nbsp; 41.lt;/headgt; nbsp; nbsp;nbsp; 42.lt;bodygt; nbsp; nbsp;nbsp; 43.lt;!--lt;agt; 标签按钮 --gt; nbsp; nbsp;nbsp; 44.lt;a href= class=btngt;a 标签按钮 lt;/agt; nb