<div class="topright">
<form>
登录<input type="text"placeholder="支持QQ/手机/邮箱登录" />
密码<input type="password"placeholder="密码"/>
<input type="submit" value="登录"/>
</form>
</div>
css：
.topright{float:right;
}
.topright input[type="text"]:focus,input[type="password"]:focus{border: #000000;
}
.topright input[type="submit"]{position: absolute;
background: gray;
color:#fff}
分享
我帮你改了一版样式，你试下看看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
body{
background-repeat: no-repeat;
background-size: 100% auto;
}
#login-box{
width: 30%;
height: auto;
margin: 0 auto;
margin-top: 15%;
text-align: center;
background: #00000060;
padding: 20px 50px;
}
#login-box h1{
color: #fff;
}
#login-box .form .item input{
margin-top: 15px;
}
#login-box .form i{
font-size: 18px;
color: #fff;
}
#login-box .form .item input {
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 2px solid#fff;
padding: 5px 10px;
background:#ffffff00;
color: #fff;
}
#login{
margin-top: 15px;
width: 180px;
height: 30px;
font-size: 20px;
font-weight: 700;
color: #fff;
background:linear-gradient(to right,#f30909 0%,#4013e6e1 100%);
border: 0;
border-radius: 15px;
}
</style>
<body>
<div class="topright">
<form>
<div id="login-box">
<h1>登录</h1>
<div class="form">
<div class="item">
<i class="fa fa-user-circle-o" aria-hidden="true">用户名:</i>
<input type="text" placeholder="支持QQ/手机/邮箱登录">
</div>
<div class="item">
<i class="fa fa-key" aria-hidden="true">密码:</i>
<input type="text" placeholder="密码">
</div>
</div>
<input type="submit" value="登录" id="login"/>
<!-- <button>Login</button>-->
</div>
</form>
<!-- <form>-->
<!-- <label>登录:</label><input type="text" placeholder="支持QQ/手机/邮箱登录"/>-->
<!-- 密码:<input type="password" placeholder="密码"/>-->
<!-- <input type="submit" value="登录" class="denglu"/>-->
<!-- </form>-->
</div>
</body>
</html>
分享
