这是素材：
这是代码：
<!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>
这是效果：
总结一下： 雪碧图就是把网页要用的小图放在一起，需要的时候直接选取所在的位置，减少服务器请求次数。
原文地址：https://www.cnblogs.com/sandraryan/p/10868669.html
时间： 2024-10-20 14:24:40