一个注册页面的前端模板（html+css+javascript）可自适应屏幕

最新推荐文章于 2024-09-21 13:58:42 发布

齊天大聖

最新推荐文章于 2024-09-21 13:58:42 发布

阅读量1k

点赞数

分类专栏：杂记文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/baiqi123456/article/details/122450284

版权

杂记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

一个注册页面的前端模板（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>