雪碧图实现登陆页面
Posted sandraryan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了雪碧图实现登陆页面相关的知识,希望对你有一定的参考价值。
这是素材:
这是代码:
<!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>
这是效果:
总结一下: 雪碧图就是把网页要用的小图放在一起,需要的时候直接选取所在的位置,减少服务器请求次数。
以上是关于雪碧图实现登陆页面的主要内容,如果未能解决你的问题,请参考以下文章