Html+Css+Javascript实现登录和注册页面

登录页面展示：

login.html

    
    
    
    
    
    



    
登  录
    

        

        

        

			
			
		
        学生
        宿管
        管理员


		没有账号？点击这里注册

        
    

Copyright    author © 【风潇潇】

 login.css

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    background:url('../image/1670411573391.gif');
    background-size: cover;
}
.login{
    width:25rem;
    height:27rem;
    background-color:white;
    border-radius: 30px;
    margin:100px auto;
    text-align: center;
    padding-top:28px;
}
.input_box{
    width:210px;
    height:23px;
    margin-top: 20px;
}
.input_box1{
    width:210px;
    height:23px;
    margin-top: 20px;
}
.yzm{
    display: flex; 
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.yzm .input_box2{
    width:135px;
    height:23px;
   margin-right: 10px;
}
 #mycanvas{
    width:68px;
    height:27px;
}  
.button_box {
    width: 210px;
    height: 35px;
    margin-top: 35px;
    border-radius: 5px;
    background-color: #9deaab;
    color: black;
}
.footer{
position:fixed;
bottom:10px;
right:650px;
}

 login.html的动态背景为：

 注：login.html页面中的验证码功能的实现参考博客：（在这个基础上做了改动）(15条消息) 【前端】简单验证码的制作_进阶er的博客-CSDN博客_前端简单验证码https://blog.csdn.net/qq_43466457/article/details/100559974

注册页面展示：

 register.html

    
    
    
    
    


    

        
注  册
      

        
请选择注册角色
        学生
        宿管
        管理员
         
用户名
         

         
密码
         

         
确认密码
         

         
备注
         

         Check me out

         
      
    

register.css

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    background: url("../image/1.jpg");
    background-size: cover;
}
.box{
  width:500px;
  margin:30px auto;
}
.box h1{
    text-align: center;
}
.box p{
    font-size: 20px;
    font-weight: 500;
}
.input_box{
    width:30rem;
    height: 1.7rem;
}
.cm{
    margin-top:30px;
}
.zc{
    width:98px;
    height:40px;
    background-color: aquamarine;
    border:2px solid black;
    margin-top:30px;
}

register.html页面背景图：

 图片源于：【动态桌面壁纸】高清动态图片_彼岸桌面壁纸 (netbian.com)http://www.netbian.com/dongtai/index.htm

环境用的是vscode运行的 >_< 安装了px to rem & rpx & vw (cssrem)插件