1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 button.cc{ 8 background-image:url(xl.png); 9 background-position:left bottom;/*用背景图片定位的时候一定要写宽高*/ 10 width:150px; 11 height:40px; 12 outline:none; 13 } 14 button.cc:hover{ 15 color:#fff; 16 } 17 .aa input{ 18 border:none; /*去掉默认的灰色边框*/ 19 height:27px; 20 width:145px; 21 background-image:url(xl.png); 22 background-position:left -140px;/*-40一定是一个图片从上到下面的距离*/ 23 outline:none; /*去掉默认的橙色边框*/ 24 display:block; 25 float:left; 26 padding-left:5px; 27 28 29 } 30 .bb input{ 31 border:none; 32 height:28px; 33 width:30px; 34 background-image:url(xl.png); 35 background-position:-145px -140px; 36 display:block; 37 float:left; /*控制哪个就让那个左对齐，如果没有效果试试把他改成盒子模型*/ 38 outline:none; 39 } 40 41 42 43 </style> 44 </head> 45 46 <body> 47 <button class="cc">用户注册</button> 48 <button class="cc">提交</button> 49 <br><br><br> 50 <form action="save.php" method="post"> 51 <div class="ab"> 52 <div class="aa"> 53 <input type="text" name="seach" placeholder="搜索关键字"> 54 </div> 55 <div class="bb"> 56 <input type="submit" name="seach" value=""> 57 </div> 58 </div> 59 </form> 60 61 62 <br><br><br><br><hr> 63 <img src="xl.png"> 64 65 66 67 </body> 68 </html>
原文：http://www.cnblogs.com/lsr111/p/4394944.html