大布and科比
2015-08-19 18:42
希望相互交流,看到不同的布局思路。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 220px;
height: 400px;
background: #ebf2fa;
}
.login-form {
padding: 15px;
}
.login-input {
display: block;
width: 188px;
height: 32px;
border: 1px solid #abd6c9;
border-radius: 3px;
text-indent: 30px;
margin-top: 15px;
font-size: 15px;
}
p {
height: 13px;
margin-top: 15px;
}
p a {
font-size: 13px;
text-decoration: none;
float: right;
}
p lable {
font-size: 13px;
vertical-align: top;
}
.btn {
width: 190px;
height: 38px;
margin-top: 15px;
border: 0;
background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg) no-repeat;
text-indent: -999em;
cursor: pointer;
}
.btn2 {
background-position: 0 -38px;
}
hr {
margin-top: 20px;
color:#CCC;
}
</style>
</head>
<body>
<div class="box">
<form class="login-form">
<input class="login-input" type="text" placeholder="邮箱/手机号/用户名"/>
<input class="login-input" type="password" placeholder="请输入密码"/>
<p>
<input id="autologin" type="checkbox" />
<label for="autologin">下次自动登录</label>
<a href="#">忘记密码?</a> </p>
<input type="submit" class="btn" value="登录"/>
<hr />
<input type="button" class="btn btn2" value="注册"/>
</form>
</div>
</body>
</html>
CSS Sprite雪碧图应用
47092 学习 · 241 问题
相似问题