一个注册页面的前端模板（html+css+javascript）可自适应屏幕，修改样式即可用。
截图
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>the first webpage</title> <style type="text/css"> /* 整体布局*/ *{ padding:0; margin:0; } html{ height:100%; } body{ height:100%; } #head{ width:100%; height:10%; background-color:#456123; } #content{ width:100%; height:85%; /* background-color:#856491; */ } #foot{ width:100%; height:5%; background-color:#526341; } /*注册框样式设置*/ #zhuce { position: relative; width: 25%; height: 70%; top: 15%; left: 15%; text-align:center; /*圆角*/ border-radius: 15px; /*透明*/ /* background-color: rgba(255, 255, 255, 0.7); */ background-color: rgba(123, 214, 12, 0.7); } #headline { font-weight: bold; font-size:40px; text-align: center; cursor: default; } /*昵称*/ #username { border-radius: 5px; width: 80%; height: 10%; /* margin-top: 5%; */ font-size: 20px; background: #ffffff; border: none; } /*邮箱*/ #userid { border-radius: 5px; width: 80%; height: 10%; /* margin-top: 5%; */ font-size: 20px; background: #ffffff; border: none; } /*密码*/ #passid { border-radius: 5px; width: 80%; height: 10%; /* margin-top: 5%; */ font-size: 20px; background: #ffffff; border: none; } /*重复密码*/ #passidre { border-radius: 5px; width: 80%; height: 10%; /* margin-top: 5%; */ font-size: 20px; background: #ffffff; border: none; } /*确认提交按钮*/ #subid { border-radius: 5px; width: 80%; height: 10%; margin-top: 5%; font-size: 20px; font-weight: bold; color: #ffffff; background-color: #05a081; /*设置光标的形状*/ cursor: pointer; border: none; } .tip{ width:80%; height:5%; font-size:10px; color:red; margin: 3px auto; } </style> <script type="text/javascript"> /*昵称提示函数*/ function usernameOver(){ document.getElementById("tip_username").innerHTML="10个字符以内,2个字符以上"; } function usernameOut(){ document.getElementById("tip_username").innerHTML=""; } /*邮箱提示函数*/ function useridOver(){ document.getElementById("tip_userid").innerHTML="请输入真实邮箱,便于后期维护"; } function useridOut(){ document.getElementById("tip_userid").innerHTML=""; } /*密码提示函数*/ function passidOver(){ document.getElementById("tip_passid").innerHTML="至少包含8个字符,最多20个字符,至少包含字母和数字"; } function passidOut(){ document.getElementById("tip_passid").innerHTML=""; } /*再次密码提示函数*/ function passidreOver(){ document.getElementById("tip_passidre").innerHTML="请再次输入密码"; } function passidreOut(){ document.getElementById("tip_passidre").innerHTML=""; } </script> </head> <body> <div id="head">head</div><!--10%--> <div id="content"> <div id="zhuce"> <div id="headline"> 欢迎加入 </div> <div id="tip_username" class="tip"></div> <input type="text" id="username" placeholder="请昵称" onmouseover="usernameOver()" onmouseout="usernameOut()"></br> <div id="tip_userid" class="tip"></div> <input type="text" id="userid" placeholder="请输入邮箱" onmouseover="useridOver()" onmouseout="useridOut()"></br> <div id="tip_passid" class="tip"></div> <input type="password" id="passid" placeholder="请输入密码" onmouseover="passidOver()" onmouseout="passidOut()"></br> <div id="tip_passidre" class="tip"></div> <input type="password" id="passidre" placeholder="请再次输入密码" onmouseover="passidreOver()" onmouseout="passidreOut()"></br> <button id="subid" onclick="subform()">确定</button> </div> </div><!--85%--> <div id="foot">foot</div><!--5%--> </body> </html>
