项目制作——个人相册

最新推荐文章于 2022-11-21 19:47:48 发布

夜·封尘

最新推荐文章于 2022-11-21 19:47:48 发布

阅读量485

点赞数 1

文章标签： html css js

本文链接：https://blog.csdn.net/qq_49032349/article/details/117809195

版权

本文档详细介绍了如何制作一个个人相册项目，包括创建登录和注册界面，以及实现3D旋转相册功能。在登录界面中，通过文本框和按钮设计实现了错误提示。注册页面利用正则表达式进行信息验证，并存储用户信息。最后，使用CSS和JavaScript实现了一个3D旋转相册效果。

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

项目规划

制作一个登录界面，用于各个用户登录自己的相册

制作一个注册界面，用于多个用户注册账号

制作一个相册存放相片并实现3D旋转

第一步

首先设置登录界面的布局

<style>
        .div{
            width: 100%;
            height: 100%;
            position: absolute;
            background-image: url("综合项目图片素材/1623200097424.jpg");
        }
        .div1{
            width: 400px;
            height: 400px;
            color: darkgray;
            border-radius: 100%;
            background-color: white;
            position: absolute;
            top:50%;
            left:50%;
            margin-left: -200px;
            margin-top: -200px;
            opacity: 0.7;
            animation: zizhuan;
            animation-duration: 3s;
        }
        
        .div2{
            width: 250px;
            height: 250px;
            position: relative;
            top:50%;
            left:50%;
            margin-top: -125px;
            margin-left: -125px;
            text-align: center;
        }
</style>

其次，设计一下<input>的文本框和按钮的样式

<style>
 .in{
            text-align: center;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;   
        }
        .bu{
            width: 70px;
            height: 35px;
            border-radius: 50%;
            background-color:darkorange;
            
        }
</style>

<body>部分

<div class="div">
        <div class="div1">
            <div class="div2">
                <h4 align="center">立即登录</h4>
                邮箱<br>
                <input type="text" class="in" id="e-mails"><br>
                密码<br>
                <input type="password" class="in" id="passwords"><br><br>
                <a href="">忘记密码</a><br><br>
                <input type="submit" value="登录" class="bu" onclick="l()">
                <input type="submit" value="注册" class="bu" onclick="creat()">
            </div>
        </div>
    </div>

在div1的样式中，设置了一个动画效果，让div1在出场时有个三秒钟的自转，代码如下：

@keyframes zizhuan {
            0% {
                transform: rotate3d(0,1,0,0deg) ; 
                opacity: 0; 
                }
            100% {
                transform: rotate3d(0,1,0,360deg);
                opacity: 0.7;
            }
            
                }

布局部分到此结束，下面是JS部分，当输入的邮箱或者密码错误时，给出相应的提示

<script>
        function creat(){
            window.location.href="综合项目二.html"
            
            }
        function l(){
            var mail=document.getElementById("e-mails").value
            var password=document.getElementById("passwords").value
            var e=localStorage.getItem("e-mail")
            var p=localStorage.getItem("password")
            if(mail==e && password==p){
                 window.location.href="综合项目三.html"
               
            }
            else{
                alert("邮箱或密码错误，请重试！")
            }
        }
    </script>

实现效果如下

代码整合

<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>
        .div{
            width: 100%;
            height: 100%;
            position: absolute;
            background-image: url("综合项目图片素材/1623200097424.jpg");
        }
        .div1{
            width: 400px;
            height: 400px;
            color: darkgray;
            border-radius: 100%;
            b