html5+css3个人相册网页制作

最新推荐文章于 2024-05-28 14:12:40 发布
最新推荐文章于 2024-05-28 14:12:40 发布
阅读量4.4k 收藏 74
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52204142/article/details/117751574
版权

一、登录界面设计
使用正则表达式验证邮箱且密码长度至少为6位且为字母与数字的组合，如果输入框为空输出提示信息，能够提取localStorage中存的数据比较验证。
正则表达式验证邮箱：
邮箱的正则表达式为：/^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/
验证函数：

function jd(){
        var y=document.getElementById("email").value;
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(y)){
        alert("邮箱格式错误");
        }
       }

密码长度至少为6位且为字母与数字的组合正则表达式为/^(?![0-9]+ ) ( ? ! [ a − z A − Z ] + )(?![a-zA-Z]+ )(?![a−zA−Z]+)[0-9A-Za-z]{6,}$/，验证函数：

var p=document.getElementById("mima");
        p.οnchange=function(){
        var m=document.getElementById("mima").value;
        var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
       if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}
    }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-image: url("背景.jpeg");
        }
        #dl{
            width: 350px;
            height: 350px;
            margin: 10% auto;
            background-color: white;
            border-radius: 200px;
            opacity: 0.6;
            animation: move 2s ease-in-out 1s 1 alternate;
        }
        #box{
            padding: 10%;
            text-align: center;

        }
        input{
            width: 200px;
            border-top:0;
            border-left:0;
            border-right:0;
        }
        button{
            width: 90px;
            border-radius: 15px;
            background-color:darkorange;
            border-style:solid;
        }
        @keyframes move{
            100%{
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
   <div id="dl">
       <form>
           <div id="box"><h2>立即登录</h2>
           邮箱<br>
           <input type="text"name="mailbox"id="email"onchange="jd()"><br>
           密码<br>
           <input type="password"name="password"id="mima"placeholder="      密码长度至少6位数"><br>
           <a href="#">忘记密码？</a><br><br>
           <button id="denglu"onclick="yz()">登陆</button>
           <button id="zhuce"onclick="jump()">注册</button>
           </div>
       </form>
   </div> 
   <script>
       function jump(){
        window.location.href="注册界面.html";
        window.event.returnValue=false; 
       }
       function jd(){
        var y=document.getElementById("email").value;
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(y)){
        alert("邮箱格式错误");
        }
       }
        var p=document.getElementById("mima");
        p.onchange=function(){
        var m=document.getElementById("mima").value;
        var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
       if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}
    }
       function yz(){
           var m=document.getElementById("email").value;
           var i=document.getElementById("mima").value;
            var ml=localStorage.getItem("mailbox");
            var mi=localStorage.getItem("password");
            if(m.length==0||i.length==0)
            {
                alert("邮箱或密码不能为空");
            }
           else if(m!==ml){
                alert("用户不存在");
        }
        else if(i!==mi){
                alert("密码错误");
        }
        else{
            window.location.href="个人相册.html";
            window.event.returnValue=false; 
        }

       }
   </script>
</body>
</html>

实现效果：
在这里插入图片描述
二、注册界面设计
建立一个注册表单并且 使用正则表达式验证邮箱，用户名长度不能超过五位， 密码长度至少为6位且为字母与数字的组合验证两次密码输入是否一致。
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-image: url("背景.jpeg");
        }
        #box1{
            width: 500px;
            height: 500px;
            background-color:white;
            margin-left: 25%;
            margin-top: 100px;
            float: left;
            opacity: 0.6;
        }
        #box2{
            width: 250px;
            height: 500px;
            background-image: url("背景2.jpg");
            margin-top: 100px;
            float: left;
            text-align: center;
        }
        #box{
            text-align: center;
        }
        #box3{
            margin-top: 100%;
        }
        input{
            width: 220px;
            border-top:0;
            border-left:0;
            border-right:0;
        }
        #btn1{
            width: 200px;
            border-radius: 20px;
            border-style:solid;
            background-color:darkorange;
        }
        #btn2{
            width: 100px;
            border-radius: 20px;
            background-color:transparent;
            border-style:solid;
            border-color: white;
            color:white;
        }

    </style>
</head>
<body>
 <div>
    <div id="box1">
        <form>
            <div id="box">
                <h2>立即注册</h2>
                邮箱<br>
                <input type="text"name="mailbox"id="email"onchange="jd()"><br><br>
                用户名<br>
                <input type="text"name="username"id="user"placeholder="      用户名长度不能超过5位数"><br><br>
                性别<br>
                <input type="radio" name="gender" value="male"style="width: 30px;" checked>男       
                <input type="radio" name="gender" value="female"style="width: 30px;">女<br><br>
                头像<br>
                <input type="file"name="photo"style="text-decoration: underline;"><br><br>
                密码<br>
               <input type="password"name="password"id="mima"placeholder="      密码长度至少6位数"><br><br>
               确认密码<br>
               <input type="password"name="psd"id="que"placeholder="      两次密码必须一致"><br><br>
               <button id="btn1">注册</button>
            </div>
        </form>
    </div>
    <div id="box2"> 
        <div><h1>已有账号？</h1>
        <p>有账号就登录吧，好久不见了！</p>
        </div>
        <div id="box3">
            <button id="btn2" >登录</button>
        </div>
    </div>
</div>
<script>
    var r=document.getElementById("btn2");
    r.onclick=function(){
        window.location.href="登陆界面.html";
    }
        function jd(){
        var y=document.getElementById("email").value;
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(y)){
        alert("邮箱格式错误");
        // e.focus();
        }
    }
    
    
     var u=document.getElementById("user");
     u.onchange=function(){
        var x=document.getElementById("user").value;
        if(x.length>5){alert("用户名长度不能超过5位");}
    }
    var p=document.getElementById("mima");
    p.onchange=function(){
        var m=document.getElementById("mima").value;
        var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
       if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}
    }
    var qr=document.getElementById("que");
    qr.onchange=function(){
        var m=document.getElementById("mima").value;
        var q=document.getElementById("que").value;
        if(p!==q){alert("两次密码不一样");}
    }
    var s=document.getElementById("btn1");
    s.onclick=function(){
           var ml=document.getElementById("email").value;
           var uh=document.getElementById("user").value;
           var mi=document.getElementById("mima").value;
           var qmi=document.getElementById("que").value;
           if(ml.length==0||uh.length==0||mi.length==0||qmi==0){
               alert("错误，请完善信息");
           }
           else{
            localStorage.setItem("mailbox",ml);
            localStorage.setItem("username",uh);
            localStorage.setItem("password",mi)
            window.location.href="个人相册.html";
            window.event.returnValue=false;
            alert("注册成功");}
}

    
</script>
</body>
</html>

实现效果：
在这里插入图片描述
三、个人相册界面设计
实现图片3D旋转：
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding: 0px;
            margin: 0px;
            background-image: url("背景.jpeg");
        }
        #box4{
            width: 100%;
            height:55px;
            background-color: rgb(94, 84, 84);
            float: left;
        }
        #btn1{
            border-radius: 15px;
            opacity: 0.6;
            position: relative;
            left:85%;
            top: 15px;
        }
        #box{width: 250px;
            height: 350px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: move 20s linear infinite;
           }
           #box:hover {
	        animation-play-state: paused; /* 动画暂停 */
	        cursor: pointer;
        }
        #box img{width: 250px;
                 height: 350px;
                 position: absolute;
                 left: 0;
                 top: 0;
        }
        #box img:nth-child(1){
            transform: rotateY(0deg) translateZ(550px);}
        #box img:nth-child(2){
            transform: rotateY(40deg) translateZ(550px);}
        #box img:nth-child(3){
            transform: rotateY(80deg) translateZ(550px);}
        #box img:nth-child(4){
            transform: rotateY(120deg) translateZ(550px);}
        #box img:nth-child(5){
            transform: rotateY(160deg) translateZ(550px);}
        #box img:nth-child(6){
            transform: rotateY(200deg) translateZ(550px);}
        #box img:nth-child(7){
            transform: rotateY(240deg) translateZ(550px);}
        #box img:nth-child(8){
            transform: rotateY(280deg) translateZ(550px);}
        #box img:nth-child(9){
            transform: rotateY(320deg) translateZ(550px);}
		@keyframes move {
		    0%{transform: rotateX(0deg) rotateY(0deg);}
		    25%{transform: rotateX(-10deg) rotateY(180deg);}
		    50%{transform: rotateX(0deg) rotateY(360deg);}
		    75%{transform: rotateX(10deg) rotateY(540deg);}
		    100%{transform: rotateX(0deg) rotateY(720deg);}
		
		}
    </style>

</head>
<body>
    <div id="box4">
        <div>欢迎您登陆:
            <button id="btn1"onclick="getcookie()">个人信息</button>
            <button id="btn1"onclick="jump()">退出</button>

        </div>
        <script>
         function jump(){
        window.location.href="登陆界面.html";
        window.event.returnValue=false; 
       }
       function getcookie() {
           alert("邮箱"+localStorage.getItem("mailbox")+"用户名"+localStorage.getItem("username"))
       }
       var m=localStorage.getItem("username");
       document.write(m); 


        </script>
    </div>
    <div id="box5">
            <div id="box">
                    <img src="1.jpeg">
                    <img src="2.jpeg">
                    <img src="3.jpeg">
                    <img src="4.jpeg">
                    <img src="5.jpeg">
                    <img src="6.jpeg">
                    <img src="7.jpeg">
                    <img src="8.jpeg">
                    <img src="9.jpeg">
         
                </div>
    </div>
</body>
</html>

实现效果：
在这里插入图片描述

Jian Yue
关注
  • 6
    点赞
  • 踩
  • 74
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML实现3D相册
兔子王
05-11 3万+
本期小编给大家推荐一个炫酷的3D相册，可以更换照片哦，一起来看看吧~
一个简单的HTML网页 个人网站设计与实现 HTML+CSS+JavaScript自适应个人相册展示留言博客模板
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
静态网页相册制作-记录你们的快乐时刻
~矢量~的博客
05-11 420
手把手教你如何建一个静态网页相册，记录你们的快乐时光！
html静态网页3D相册代码（520/七夕表白代码）
最新发布
weixin_tank88921的博客
05-28 1070
在这个特别的日子里，人们会表达爱意，分享甜蜜的时刻。 无论是通过礼物、约会、写情书还是其他方式，重要的是真诚地表达你的感情，享受与对方在一起的时光。爱情是多样的，每个人的体验都是独一无二的，享受探索和体验爱情的过程吧！
手把手教你基于HTML、CSS搭建我的相册（下）
官方推荐
03-22 1万+
利用HTML、CSS搭建我的相册
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
手把手教你基于HTML、CSS搭建我的相册（上）
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
HTML5期末大作业：个人空间相册网页设计 (6页) HTML+CSS+JavaScript
qq_365392777
04-22 1944
HTML5期末大作业：个人空间相册网页设计 (6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品​临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想...
Html5+jQuery+CSS制作相册小记录
10-20
主要为大家详细介绍了Html5+jQuery+CSS制作相册小记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5+css3实现3D相册的功劳
11-15
在本项目中，“html5+css3实现3D相册的功劳”展示的是如何利用这两种技术来创建引人入胜的3D相册效果。通过结合HTML5的新特性与CSS3的强大的样式和动画功能，开发者可以构建出极具视觉冲击力的动态相册，从而提升...
html,js,css+流星3D旋转相册
04-24
情人节送女朋友的流星3D旋转相册，独属理科人的浪漫。 需要注意：1.网页html请使用Microsoft edge或者QQ浏览器打开。 2.照片在img里替换，名字为从1到10依次编号，拓展名统一使用gif，故也可以显 示gif动图。照片...
Web前端大作业-个人网页(html+css+javascript)
06-28
【标题】"Web前端大作业-个人网页(html+css+javascript)"揭示了这个项目的核心是构建一个基于HTML、CSS和JavaScript的个人网页。这三种技术是Web开发的基础，用于创建动态、交互式的网页内容。 HTML（HyperText ...
web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-02 1万+
web网页设计期末课程大作业~粉色的服装购物商城页面模板 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页，登录页，瀑布流列表页，详情页带评价带晒单
php 制作相册,Html 制作相册
weixin_30298279的博客
03-10 373
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。主要功能点：Html5进行布局调用jQuery(借用官网的一句话：The Write Less, Do More)极大的简化了JavaScript编程CSS 样式将表现与内容分离话不多说，先上效果图：代码如下：The second html pageul li{list-style-type:georgian;text-alig...
HTML- 超美超简单的相册
DaMeng1219的博客
08-17 4512
HTML-> 超美超简单的相册 实现内容： ​ 1.四张小图每次鼠标点击时大相册显示被点击的小图并且其它图片变灰色。（你也可以设置更多张相片）。 ​ 2.默认状态下展示第一张相片； 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&...
HTML网页制作代码——简约的旅游图文相册博客HTML模板(12页)HTML+CSS+JavaScript 静态HTML旅行主题网页作业
qq_38514094的博客
03-19 532
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
用html5写个炫酷的3d电子相册
热门推荐
weixin_46601559的博客
01-20 15万+
用html5+css+js制作一个抖音爆火的3d电子相册
HTML以及CSS制作相册
qq_51131331的博客
01-11 2801
1.效果图： 2.设计思想： 在设计相册网页时，需要先想好一个整体的大致内容，然后再去具体实施。在这次设计相册的实验中，将整个相册都放在了一个div块中，而这个div块又被分为了三个部分，在最上方是一个的相册的英文标题，然后在下方，有2个div块，在第一个div块中存放的是分割线，在第二个div块中存放的是图片，当把基本框架设计好了之后，还有最后一个部分：JavaScript，设计好功能函数，在这里，使用了jquery，可以更方便简单地达到效果，在鼠标移到照片时，照片会放大并且偏...
html5+css3ppt课件.ppt
11-16
本资源是一份关于HTML5和CSS3的PPT课件，详细讲解了这两种前端开发技术在网页设计中的基础应用。课程内容分为多个章节，涵盖了关键的HTML5元素和语义化结构。 首先，第三章介绍了HTML5的基本结构，包括六级标题的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值