HTML+CSS+JS实现个人相册登录注册

最新推荐文章于 2022-03-03 21:00:00 发布

衣冠小兽

最新推荐文章于 2022-03-03 21:00:00 发布

阅读量710

点赞数 4

文章标签： javascript html css

本文链接：https://blog.csdn.net/maojiaolin/article/details/117789661

版权

该博客介绍了如何使用HTML、CSS和JavaScript来创建个人相册的登录和注册页面。任务包括使用正则表达式验证邮箱、设定密码长度要求，并确保注册时两次输入密码一致。博客内容涵盖登录、注册和相册页面的实现代码，以及最终的项目演示。

摘要由CSDN通过智能技术生成

一、任务一
完成《个人相册》项目登录页面
要求：

使用正则表达式验证邮箱
密码长度至少为6位且为字母与数字的组合

二、任务二
完成《个人相册》项目注册页面
要求：
使用正则表达式验证邮箱
用户名长度不能超过五位
密码长度至少为6位且为字母与数字的组合
两次密码输入须一致

三、任务三
完成《个人相册》项目相册页面

四、注册代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*背景*/
        .first {
     
           background-image: url(1.jpg);
            margin-left:150px ;
            width: 1200px;;
            height: 700px;
            float: left;
        }
        .second{
     
            width: 1100px;
            height: 600px;
            margin-left: 50px;
            margin-top: 50px;
            float: left;
        }
        .left {
     
            background: rgba(241, 247, 241, 0.4);
            width: 700px;
            height: 600px;
            margin-left:50px;
            float: left;
        }
        .right{
     
           background-image: url(4.jpg);
            width: 300px;
            height: 600px;
            margin-right: 50px;
           
            float: right;
        }
        #anniu1{
     
            background-color: orange;
            border-radius: 10px;
           width: 164px;
          height: 25px;
        }
        #anniu2{
      
        border-radius: 10px;
        width: 80px;
        height: 30px;
        opacity: 0.5;
        }


    </style>

</head>
<body>
    <div class="first">
        <div class="second">
            
            <div class="right" align="center">
               <br><br><br><br><br><br>
                    <strong><a href="#end2" id="yes"><font color="#FFFFFF">已有账号？</font> </a></strong> <br>
                    <td align="center"><font color="#FFFFFF">有账号就登录吧，好久不见了</font></td><br>
                    <br><br><br><br><br><br>
                    <button type=“reset” id="anniu2" onclick="gologin()">登录</button></td>    

            
            </div>
            <div class="left" align="center">
               
                    <h1 align="center">立即注册 </h1>
                    <tr>
                        <td align="center">邮箱</td><br>
                    </tr>
                    <tr>
                        <td align="center"><input type="text" name="username" id="email"></td><br>
                    </tr>
                    <tr>
                        <td align="center">用户名</td><br>
                    </tr>
                    <tr>
                        <td align="center"><input type="text" id="un"placeholder="用户名长度不能超过5位"></td>