我的第一个“大工程”，欢迎来到m78星云

最新推荐文章于 2024-09-02 20:34:02 发布

兔龙辰

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量271

点赞数 1

文章标签： css html js

本文链接：https://blog.csdn.net/qq_45614405/article/details/117747884

版权

本文记录了作者初次尝试制作个人相册的过程，包括登录和注册界面的实现。登录界面和注册界面都涉及正则表达式验证邮箱和密码规则，注册界面还增加了用户名长度限制及两次密码输入一致性检查。代码示例和效果展示也在文中给出。

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

大家好，今天也是努力写博客的一天。学习了那么久，终于是迎来了学习上的一大挑战，制作一个个人相册，其中包括三个部分，一个登录界面，一个注册界面，以及一个相册界面。

1：登录界面

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

分析：此处的两个要求我们应用的正则表达式来解决，方法为昨天使用的方法，不懂的小伙伴请自行去看博主的上一篇的博客。这里就不再讲了。代码如下：

<style>
    #a{

        width: 1000px;
        height: 400px;
        background-image:url("m781.jpg");
        background-size:100% 100%;
        background-repeat: no-repeat; 
        background-position: center;
        position: relative; 
        border: 0px;
        /* margin: 0; */
        top: 100px;
        left: 130px; 
    }
    #b{
        background:rgba(255,255,255,0.3);
        width: 350px;
        height: 350px;
        border-radius: 175px;
        position: absolute;
        margin:auto;
        top: 20px;
        left: 325px;
        text-align:center;
        /* vertical-align: auto; */
        line-height:120px;
        animation-name: div;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
    }
    button{
        background-color: rgba(139, 228, 231,0.5);
        border: 1px;
            border-radius: 5px;
            width: 50px;
            height: 30px;
    }
    img{
        width: 1000px;
        height: 400px;
    }
    #username{
            border-top: none;
            border-bottom: 1px solid black;
            border-left: none;
            border-right: none;
            background:rgba(255,255,255,0);
            text-align: center;
        }
    #password{
            border-top: none;
            border-bottom: 1px solid black;
            border-left: none;
            border-right: none;
            background:rgba(255,255,255,0);
            text-align: center;
        }
    
    @keyframes div {
        0%{transform: translate(0px,0px);}
        50%{transform:rotateY(180deg)}
        100%{transform:rotateY(360deg)}
    }

</style>
<body style="margin:0px;">
    <div id="a">
    <div id="b">
        奥特名：<input type="text"

最低0.47元/天解锁文章

兔龙辰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一个“大工程”，欢迎来到m78星云

大家好，今天也是努力写博客的一天。学习了那么久，终于是迎来了学习上的一大挑战，制作一个个人相册，其中包括三个部分，一个登录界面，一个注册界面，以及一个相册界面。1：登录界面要求：...
复制链接

扫一扫