<!doctype html>
<html><head><meta charset="utf-8"><title></title></head><link rel="stylesheet" href="../css/登录页面.css" /><body><form action="#" method="get" autocomplete="on"><div class="zh">账 号 登 录</div><hr /><div class="tab"><label for="username">账号:</label><input type="text" name="username" value="" class="uspa" required placeholder="请输入账号" /></div><div class="tab"><label for="password">密码:</label><input type="text" name="password" value="" class="uspa" required placeholder="请输入密码" /></div><hr /><div class="tab"><input type="submit" class="btn" value="登录" /><input type="reset" class="btn" value="重置" /></div></form></body>
</html>
css
body {background-color: beige;}form {background-color: cadetblue;/* 背景颜色 */width: 33rem;/* 宽度 */height: 14rem;/* 高度 */text-align: center;/* 水平居中 */margin: auto;/* 外面距自适应 */margin-top: 8rem;/* 顶部距离 */border-radius: 3rem;
}/* 表头字体样式 */
.zh {color: orange;font-size: 1.875rem;
}/* 账号密码,字体样式*/
label {font-size: 1.2rem;color: beige;
}div {line-height: 40px;
}/* 账号密码,输入框样式*/
.uspa {text-align: center; /* 提示文字水平居中*/border: 2px solid #F5F5DC;border-radius: 15px;/* 圆角 */width: 15rem;/* 款 */height: 2rem;/* 高 */outline: none;/* 取消边框 */font-size: 1rem;
}
.btn{display: inline-block;color: cornflowerblue;font-size: 1.2rem;margin-top: 10px;width:30%;height: 40px;border-radius: 1rem;text-decoration: none;
}