老师出题:
看图复现页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
body{
background-image: url("bg.jpg") !important;
background-size: cover;
background-repeat: no-repeat;
}
.login-box{
display: flex;
justify-content: center; /* 水平 */
align-items: center; /* 垂直 */
width: 700px;
height: 400px;
background-color: white;
opacity: 100; /*透明度*/
border-radius: 10px;
margin: 0 auto;
margin-top: 10%;
}
.input-box {
position: relative; /* 让 .icon 相对于 .input-box 定位 */
}
.icon{
position: relative;
left: 75px;
}
.btn{
width: 75%;
background-color: blue;
color: white;
border-radius: 5px;
float: right;
padding-left: 0px; /* 不取消这行 按钮文字不对齐 */
}
input{
margin: 10px;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
p{
text-align: center;
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="login-box">
<div class="input-box">
<p>克不克后台管理系统</p>
<form action="" method="" onsubmit="return login()">
<span class="icon">🧑🏻</span>
账号<input type="text" name="" placeholder="请输入账号"><br />
<span class="icon">🔒</span>
密码<input type="password" name="" placeholder="请输入密码"><br />
<input type="submit" name="" value="立 即 登 录" class="btn">
</form>
</div>
</div>
<script type="text/javascript">
function login() {
if(true){
alert('登录成功');
}else{
alert('登录失败');
}
// 阻止表单默认submit
return false;
}
</script>
</body>
</html>
效果
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。