1、本次登录框的实现运用了定位及外边距对整体位置进行控制，然后用input的各种形式分别实现账号、密码输入及复选框，用a标签实现了链接跳转。
2、主要代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>登录框</title>
<style>
body,input{margin: 0;padding: 0;}
body{background-color: #666;}
*{box-sizing:border-box;}
a{text-decoration: none;}
.login-box{width: 400px;height: 300px;position: absolute;left: 50%;top: 50%;text-align: center;margin-left: -200px;margin-top: -150px;border-radius: 7px;background-color: #E5E5E8;}
.img-box img{width: 100px;border-radius: 50%;margin-top: 10px;}
.input-box{width: 300px;height: 30px;border: none;padding-left: 6px;border-radius: 5px;}
.user{margin-top: 10px;}
.pwd{margin-top: 8px;}
.tips{width: 300px;color: #757575;font-size: 14px;margin-top: 15px;display: inline-block;}
.check-box{float: left;}
.forget-pwd{color: #757575;float: right;}
.forget-pwd:hover{text-decoration: underline;}
.login-btn{width: 300px;height: 40px;background: linear-gradient(#5353DF,#5252B9,#7171C1);color: #fff;border: none;cursor: pointer;font-size: 18px;margin-top: 15px;border-radius: 5px;}
.login-btn:hover{background:rgba(57,57,198,.8);}
</style>
</head>
<body>
<div class="login-box">
<div class="img-box">
<img src="images/header-pic.png" alt="header-pic">
</div>
<form action="url" method="get">
<input type="text" class="input-box user" name="user" placeholder="请输入账号"><br>
<input type="password" class="input-box pwd" name="pwd" placeholder="请输入密码"><br>
</form>
<div class="tips">
<label class="check-box">
<input type="checkbox" checked value="自动登录"> 自动登录
</label>
<a href="##">忘记密码？</a>
</div>
<button>登 录</button>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
