在注册页基础上改造即可
css增加
.form-item{
/* 为美观,设置一下宽度 */
width:300px;
....
}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* body加背景色
设置字体大小*/
body{
margin:0;
background-color: #007FC6;
font-size: 12px;
}
/* 头部设置高度和背景颜色
顶部固定定位*/
.navbar-header{
width:100%;
height:36px;
background-color:#F8F8F8 ;
position: fixed;
top:0;
}
/* 头部字体向右,设置字体颜色 */
span{
padding-left: 500px;
color:#777777;
}
/* 整个form的样式 flex垂直布局*/
.login-form{
width:30%;
margin:50px auto;
background-color: #F5F5F5;
display: flex;
flex-direction: column; /*垂直布局 */
align-items: center; /* 各子项居中 两侧留边*/
justify-content: space-around;/*垂直方向分散布局*/
}
/* 各子项间加间距 */
.form-item{
/* 为美观,设置一下宽度 */
width:300px;
margin:5px;
}
/* 按钮加样式 */
button{
width:100%;
height:24px;
background-color: #337AB7;
color:white;
}
.btn2{
background-color: #008000;
/* 以下两行字垂直居中 */
height:24px;
line-height: 24px;
/* 文字水平居中 */
text-align: center;
}
/* a标签未被点击时的样式 */
a:link{
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar-header">
<img src="imgs/logo.png" style="width: 170px;margin-left: 100px;margin-top:10px" />
<span>欢迎使用个人电子码</span>
</div>
<div class="login-form">
<h2>个人电子码登录</h2>
<form id="fm" method="post" >
<div class="form-item">
<label for="telephone">手机号码：</label>
</div>
<div class="form-item">
<input type="text" id="telephone" name="telephone" placeholder="请输入手机号码" onblur="checkTel()" />
</div>
<div class="form-item">
<label for="idcard">身份证号码：</label></div>
<div class="form-item"><input type="text" id="idcard" name="idcard" placeholder="请输入身份证号码" onblur="checkIdCard()"/></div>
<div class="form-item">
<button type="submit" onclick="getCard()" >获取健康码</button>
</div>
<div class="btn2 form-item">
<a href="index.html">注册健康码</a>
</div>
</form>
</div>
</div>
</body>