<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>实名认证</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
*{
margin:0;
padding: 0;
}
body{
background-color: #EDEDED;
}
a{
text-decoration: none;
}
form{
width: 100%;
height: auto;
position: relative;
}
.retbtn{
display: inline-block;
width: 1rem;
height: 1rem;
position: absolute;
line-height: 1.1rem;
text-decoration: none;
z-index: 999;
text-align: center;
left: 0.1rem;
}
.retbtn img{
width:0.6rem;
height: 0.6rem;
}
.headline{
font-size: 0.45rem;
text-align: center;
display: block;
padding: 0.3rem;
border-bottom: 2.5px solid #ccc;
font-weight: bold;
}
.prompt_title{
display: block;
padding: 0.25rem;
font-size: 0.4rem;
background-color:#E3E3E3;
color: #999999;
}
.lab{
padding: 0 0 0.3rem;
display: block;
background-color: #fff;
margin-bottom: 1.5px;
line-height: 1.2rem;
box-shadow: 0 0 0.05rem 0 rgba(0,0,0,.1);
}
.name_first1,
.name_first2,
.name_first{
font-size: 0.45rem;
vertical-align: middle;
}
.lab input{
width: 7rem;
height: 0.8rem;
vertical-align: middle;
font-size: 0.4rem;
text-align: right;
border: none;
}
.btn{
width:8rem;
height: 1.3rem;
margin-left: 1rem;
margin-top: 0.6rem;
font-size: 0.5rem;
background-color: #3462FF;
color: white;
border: none;
-webkit-appearance: none;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<form id="form1">
<input type="hidden" name="member_id" value="2" />
<a class="retbtn" href="javascript:history.go(-1);">
<img src="" alt="" />
</a>
<span class="headline">实名认证</span>
<span class="prompt_title">请填写 本人实名信息</span>
<div class="information">
<label class="lab">
<span class="name_first">真实姓名</span>
<input type="text" name="real_name" id="real_name" value="" placeholder="请输入您的真实姓名" />
<span class="spa spa1"></span>
</label>
<label class="lab">
<span class="name_first1">身份证号</span>
<input type="text" name="identity_card_no" id="identity_card_no" value="" placeholder="请输入您的身份证号" />
<span class="spa spa2"></span>
</label>
<label class="lab">
<span class="name_first2">银行卡号</span>
<input type="text" name="bank_card_no" id="bank_card_no" value="" placeholder="请输入您的银行卡号" />
<span class="spa spa3"></span>
</label>
</div>
<input class="btn" type="submit" value="开始认证" id="btn1" />
</form>
</body>
</html>
<script>
// 获取屏幕宽度
let htmlWidth = document.documentElement.clientWidth ||
document.body.clientWidth; // 兼容写法
// 计算fontSize
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
</script>
rem单位 -- 响应式布局
最新推荐文章于 2022-06-14 20:25:45 发布