这是素材：
这是代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .logn{ height: 260px; width: 230px; margin: 0 auto; border: 1px solid black; background-color: rgb(200, 223, 230); } .box1{ height: 35px; width: 190px; margin: 10px; } .chose{ font-size: 12px; color: gray; display: inline-block; height: 13px; line-height: 13px; } .tips{ float: right; color: blue; font-size:12px; } button{ background-image: url("index.jpg"); height: 35px; width: 190px; margin: 10px; } .lognin{ background-position: 0 -3px; } .lognon{ background-position: 0 -40px; } hr{ color: gray; margin: 0; } </style> </head> <body> <div class="logn"> <form> <input class="box1" type="text" placeholder="邮箱/手机号/用户名"/> <br/> <input class="box1" type="password" placeholder="请输入密码"/> <br/> <input type="checkbox"> <span class="chose">下次自动登陆</span> <span class="tips">忘记密码</span> <br/> <button class="lognin"></button> <hr/> <button class="lognon"></button> </form> </div> </body> </html>
这是效果：
总结一下： 雪碧图就是把网页要用的小图放在一起，需要的时候直接选取所在的位置，减少服务器请求次数。