优美登录页+动态注册页

最新推荐文章于 2024-04-03 21:40:07 发布
最新推荐文章于 2024-04-03 21:40:07 发布
阅读量1.5k 收藏 30
点赞数 5
分类专栏： 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_hao_181/article/details/103048524
版权

目录

1. 登录页

2. 注册页

下载地址：https://github.com/twwch/login-register/archive/master.zip

1. 登录页

先看一下效果图：

html和css没什么好讲的，直接上代码：

login.html页面代码如下：

<!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">
    <link rel="stylesheet" href="css/login.css">
    <title>XXXX平台登录</title>
</head>
<body>
    <div id="container">
        <div id="container-child">
            <div><img src="images/login.jpg"></div>
            <div id="login-div">
                <div>
                    <p class="p-title">XXXXX平台登录</p>
                    <form id="login-form">
                        <div class="input-d">
                            <input class="input-text" type="text" name="username" id="username" placeholder="请输入您的账号">
                        </div>
                        <div class="input-d">
                            <input class="input-text" type="password" name="password" id="password" placeholder="请输入您的密码">
                        </div>
                        
                        <div class="div-input">
                            <div>
                                <input type="checkbox"  name="remember" id="remember">
                                <label>记住密码</label>
                                <a href="#">忘记密码</a>
                            </div>
                        </div> 
                        <button type="button" class="login-button">登&emsp;录</button>
                        <div class="footer"> <a href="regitser.html">注册</a> | <a href="#">切换账号</a></div>
                       
                    </form>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>

login.css代码如下：

body{
    background-color: rgba(223, 223, 223, 0.767);
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #186498;
}
#container{
    width: 640px;
    height: 380px;
    margin: auto;
    margin-top: 15%;
}
#container-child>div{
    float: left;
}
#container-child #login-div{
    width: 390px;
    height: 380px;
    background-color: rgb(255, 255, 255);
}
#login-div>div{
    width: 80%;
    margin: auto;
}
.p-title{
    color: #186498;
    font-size: 24px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 30px;
}
.input-text{
    display: inline-block;
    width: 96.5%;
    height: 40px;
    padding-left: 10px;
    /* margin-bottom: 24px; */
    font-size: 16px;
    border: 0;
}
.input-d{
    padding: 0;
    width: 100%;
    border: 1px solid #666666;
    margin-top: 30px;
}
.div-input{
    padding: 0;
    width: 100%;
    font-size: 14px;
    margin-top: 16px;
}
.div-input label{
    color:#666666;
}
.div-input a{
    margin-left: 168px; 
}
.div-input input{
    width: 20px;
    height: 20px;
    margin-left: 0px;
    vertical-align: middle;
    border: 0;
}
.login-button{
    width: 100%;
    height: 46px;
    background-color: #186498;
    text-align: center;
    border: 0px;
    margin-top: 26px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.footer{
    float: right;
    margin-top: 20px;
}

2. 注册页

注册页面的效果（自行下载jQuery.js）：

register.html

<!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">
    <link rel="stylesheet" href="css/register.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/register.js"></script>
    <title>XXXXX平台登录</title>
</head>
<body>
    <div id="head">
        <span id="logo-text">XXXXX平台登录</span>
        <span style="font-size: 28px;color: #ece8e8dc;">&emsp;|&emsp;</span>
        <span style="font-size: 20px;font-weight: bold;">用户注册</span>
        <span style="float: right; margin-top: 5px;"><a href="login.html">已有账号登录</a></span>
    </div>
    <div class="line"></div>
    <div id="body">
        <div class="boby-step">
            <div class="step-div">
                <div id="step-1" class="step-checkd">01</div>
                <div class="step-text-checkd">用户对象</div>
                <div id="step-01-line" class="step-line"></div>
            </div>
            <div class="step-div">
                <div id="step-2" class="step-uncheckd">02</div>
                <div id="step-2-text" class="step-text-uncheckd">账户信息</div>
                <div id="step-02-line" class="step-line"></div>
            </div>
            <div class="step-div">
                <div id="step-3" class="step-uncheckd">03</div>
                <div id="step-3-text" class="step-text-uncheckd">密码设置</div>
                <div id="step-03-line" class="step-line"></div>
            </div>
            <div class="step-div">
                <div id="step-4" class="step-uncheckd">04</div>
                <div id="step-4-text" class="step-text-uncheckd">注册成功</div>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div id="step-01">
            <div style="margin-top: 50px;">
                <div style="font-size: 20px;font-weight: bold;">用户对象</div>
                <div class="line1"></div>
            </div>
            <div style="clear: both;"></div>
            <div>
                <form name="userobjectform" id="userobjectform">
                    <div class="userobject">
                        <div>
                            <input type="radio"  name="userobject" checked="checked" value="XXXX学校老师">
                            <label>XXXX学校老师</label>
                        </div>
                        <div>
                            <input type="radio"  name="userobject" value="XXXX学校老师">
                            <label>XXXX学校学生</label>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div>
                        <button type="button" onclick="next(1)" class="next-step">下一步</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="step-02" style="display: none;">
            <div style="margin-top: 50px;">
                <div style="font-size: 20px;font-weight: bold;">账户信息</div>
                <div class="line1"></div>
            </div>
            <div style="clear: both;"></div>
            <div style="margin-top: 50px;">
                <form name="userinfoform" id="userinfoform">
                    <div class="accountinfo">
                        <label for="username">用户姓名</label>
                        <input type="text" name="username" id="username" placeholder="请输入您的姓名">
                    </div>
                    <div class="accountinfo">
                        <label for="userNationality">工号|学号</label>
                        <input type="text" name="userNationality" id="userNationality" placeholder="请输入工号|学号">
                    </div>
                    <div class="accountinfo">
                        <label for="IDNumber">证件号码</label>
                        <input type="text" name="IDNumber" id="IDNumber" placeholder="请输入您的证件号码">
                    </div>
                    <div class="accountinfo">
                        <label for="email">用户邮箱</label>
                        <input type="text" name="email" id="email" placeholder="请输入您的邮箱">
                    </div>
                    <div class="accountinfo">
                        <label for="phoneNumber">手机号码</label>
                        <input type="text" name="phoneNumber" id="phoneNumber" placeholder="请输入您的手机号码">
                    </div>
                    <div>
                        <button type="button" onclick="next(2)" class="next-step">下一步</button>
                        <button type="button" onclick="previous(2)" class="previous-step">上一步</button>
                    </div>
                </form>
            </div>
        </div>

        <div id="step-03" style="display: none;">
            <div style="margin-top: 50px;">
                <div style="font-size: 20px;font-weight: bold;">密码设置</div>
                <div class="line1"></div>
            </div>
            <div style="clear: both;"></div>
            <div style="margin-top: 50px;">
                <form name="passwordform" id="passwordform">
                    <div class="accountinfo">
                        <label for="password">登录密码</label>
                        <input type="password" name="password" id="password" placeholder="请输入您设置登录密码">
                    </div>
                    <div class="accountinfo">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" name="confirmPassword" id="confirmPassword" placeholder="请输入您再次确认密码">
                    </div>
                    <div>
                        <button type="button" onclick="next(3)" class="next-step">下一步</button>
                        <button type="button" onclick="previous(3)" class="previous-step">上一步</button>
                    </div>
                </form>
            </div>
        </div>
        <div id="step-04" style="display: none;">
            <div>
                <div class="img">
                    <img src="images/suss.png" alt="注册成功">
                </div>
                <div class="img-text">恭喜您注册成功</div>
                <div class="step-04-button">
                    <button type="button" onclick="gologin()" class="next-step">登 录</button>
                    <button type="button" onclick="goindex()" class="previous-step">首 页</button>
                </div>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
    <div id="footer">
        <div>
            <div id="footer-img">
                <img src="./images/reg-footer.jpg">
            </div>
            <div style="margin-left: 50px;">
                <table>
                    <tr>
                        <th class="text">我们</th>
                        <th class="text">案例</th>
                        <th class="text">方案</th>
                        <th class="text">发现</th>
                        <th class="text1">联系我们</th>
                    </tr>
                    <tr>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                    </tr>
                    <tr>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                    </tr>
                    <tr>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                    </tr>
                    <tr>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                        <td>XXXX</td>
                    </tr>
                </table>
            </div>
        </div>
        
    </div>
</body>
</html>

register.css

body{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: #0C75BB;
}
#head{
    width: 85%;
    height: 80px;
    line-height: 80px;
    margin: auto;
    cursor: pointer;
}
#logo-text{
    color: #0C75BB;
    font-size: 28px;
    font-weight: bold;
}
.line{
    /* display: block; */
    width: 100%; 
    height: 2px; 
    background-color: #cccccc;
    box-shadow: 0px 0px 2px 1px rgba(194, 194, 189, 0.5);
}
.line1{
    width: 100%; 
    height: 3px; 
    background-color: rgb(34, 32, 32);
    margin-top: 12px;
    box-shadow: 0px 0px 2px 1px rgba(194, 194, 189, 0.5);
}
#body{
    width: 85%;
    height: 700px;
    /* background-color: azure; */
    margin: auto;
    margin-top: 20px;
}
.boby-step{
    width: 100%;
}
.boby-step div{
    float: left;
    cursor: pointer;
}
/* .step-div{
    width: 25%;
} */
.step-checkd{
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #0C75BB;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 16px;
    font-weight: bold;
}
.step-uncheckd{
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #cccccc;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 16px;
    font-weight: bold;
}
.step-text-checkd{
    height: 50px;
    line-height: 50px;
    color: #0C75BB;
    font-size: 20px;
    font-weight: bold;
    margin-left: 12px;
}
.step-text-uncheckd{
    height: 50px;
    line-height: 50px;
    color: #cccccc;
    font-size: 20px;
    font-weight: bold;
    margin-left: 12px;
}
.step-line{
    width: 150px;
    margin-top: 23px;
    height: 3px;
    background-color: #cccccc;
    margin-left: 25px;
    margin-right: 25px;
}
.userobject{
    margin-top: 40px;
}
.userobject>div{
    float: left;
    margin-right: 50px;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    color: #5e5e5e;
}
.userobject input{
    vertical-align: middle;
    width: 20px;
    height: 20px;
}
.userobject label{
    vertical-align: middle;
}
.next-step{
    margin-top: 50px;
    width: 110px;
    height: 48px;
    background-color: #0C75BB;
    text-align: center;
    line-height: 50px;
    border: 0;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.previous-step{
    margin-top: 50px;
    width: 110px;
    height: 48px;
    background-color: #cccccc;
    text-align: center;
    line-height: 50px;
    border: 0;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 50px;
}
.accountinfo{
    font-size: 16px;
    color: #5e5e5e;
    margin-top: 20px;
}
.accountinfo input{
    vertical-align: middle;
    width: 708px;
    height: 50px;
    font-size: 16px;
    border: 1px solid #5e5e5e;
    padding-left: 20px;
    color: #5e5e5e;
}
.accountinfo label{
    vertical-align: middle;
    margin-right: 25px;
}
.img{
    position: relative; 
    width: 150px;
    height: 100px;
    line-height: 100px;
    margin: auto;
    margin-top: 100px;
}
.img img{
    position: absolute;
    top:50%; 
    left:50%;
    transform: translate(-50%,-50%);
}
.img-text{
    width: 150px;
    height: 50px;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    color: #0C75BB;
    font-size: 18px;
    font-weight: bold;
}
.step-04-button{
    width: 275px;
    height: 80px;
    margin: auto;
}
#footer{
    /* position: fixed; f1efefda;*/
    width: 100%;
    height: 200px;
    background-color: #f1f1f1da;
    bottom: 0;
}
#footer>div{
    margin-left: 100px;
    margin-top: 40px;
    height: 100px;
}
#footer>div div{
    float: left;
    position: relative;
    top: 40px;
}
#footer-img{
    width: 150px;
    height: 100px;
}
.text{    
    width: 200px;
    text-align: left;
}
.text1{
    width: 300px;
    text-align: left;
}

register.js

function next(i){
    if(i==1){
        $("#step-01").css("display","none");
        $("#step-02").css("display","block");
        $("#step-01-line").css("backgroundColor","#0C75BB");
        $("#step-2").css("backgroundColor","#0C75BB");
        $("#step-2-text").css("color","#0C75BB");
    }else if(i==2){
        $("#step-02").css("display","none");
        $("#step-03").css("display","block");
        $("#step-3").css("backgroundColor","#0C75BB");
        $("#step-02-line").css("backgroundColor","#0C75BB");
        $("#step-3-text").css("color","#0C75BB");
    }else if(i==3){
        $("#step-03").css("display","none");
        $("#step-04").css("display","block");
        $("#step-4").css("backgroundColor","#0C75BB");
        $("#step-03-line").css("backgroundColor","#0C75BB");
        $("#step-4-text").css("color","#0C75BB");
        console.log($("#userobjectform").serialize());
        console.log($("#userinfoform").serialize());
        console.log($("#passwordform").serialize());
        //serializeObject()
    }else{
        console.log(225)
    }
}

function previous(i){
    if(i==2){
        $("#step-01").css("display","block");
        $("#step-02").css("display","none");
        $("#step-01-line").css("backgroundColor","#cccccc");
        $("#step-2").css("backgroundColor","#cccccc");
        $("#step-2-text").css("color","#cccccc");
    }else if(i==3){
        $("#step-02").css("display","block");
        $("#step-03").css("display","none");
        $("#step-02-line").css("backgroundColor","#cccccc");
        $("#step-3").css("backgroundColor","#cccccc");
        $("#step-3-text").css("color","#cccccc");
    }
}
function gologin(){
    window.document.location.href="login.html"
}

function goindex(){
    alert("请先登录！");
    window.document.location.href="login.html"
}

需要用到的图片：

IT一氪
关注
  • 5
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
优美的登录页设计
10-27
一个小小的登录页面设计与实现，响应式设计理念，使用html5+css3
动态背景的登入注册界面
qq_50898676的博客
06-12 1648
用canvas做动态背景写登入注册页面
HTML动态注册页面
qq_46223732的博客
03-02 264
HTML动态注册页面
使用SSM框架实现登陆注册
最新发布
JUNYI23的博客
04-03 1918
使用SSM框架实现登录注册功能，实现前后端交互
SSM整合之登录注册
sssxlxwbwz的博客
04-07 8799
一、概述 本文以一个登录注册的小功能作为示例，对SSM框架做一个整合。 二、SSM整合 SSM框架是指Spring、SpringMVC和Mybatis，SpringMVC是包含在Spring中的，因此SSM框架整合核心是将Mybatis整合到Spring中。 2.1 DAO 1. 创建如下的数据库表格： CREATE TABLE `user` ( `id` int NOT NULL AUTO_INCREMENT, `user_name` ...
SSM框架实现登录注册功能
热门推荐
m0_63608865的博客
05-04 3万+
SSM框架实现登录注册功能
SSM（3） —— 用户注册和登录（完整）
Archer__13的博客
05-26 4907
一. 创建数据库和表 创建一个数据库ssm，在该数据库下创建一个user表 CREATE TABLE `ssm`.`user` ( `id` INT NOT NULL AUTO_INCREMENT, `username` VARCHAR(45) UNIQUE, `password` VARCHAR(45), `email` VARCHAR(45), PRIMARY KEY (`id`)); 二. 编写JavaBean对象 package com.server.pojo;
高端大气网站登录注册页面html模板源码
12-04
高端大气网站登录注册页面html模板源码
优美的前端页面模板45+
07-29
收集的45个漂亮的前端页面模板。页面布局灵感的源泉。交互方式学习参考。可以直接项目中一直。便于快速开发。
HTML 简约好看的错误页面合集
06-01
预览图；https://z3.ax1x.com/2021/06/01/2nlCFI.jpg
纯asp实现优美注册页面，只兼容IE6
12-02
这是一个纯asp实现的注册操作，没有用到任何数据库，以文本操作的形式来模仿数据的操作。目前版本只兼容IE6，没时间去搞了，感兴趣的可以自己hack一下，好了就这么多，界面还是不错的~~用到了vbs、js、css。
响应式动态式登录注册界面
11-03
Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。
登录动态页面
07-25
动态网页 实业登录注册页面。
H5炫酷登录页 视频背景 包含素材
04-04
HTML5登录模板(炫酷动态星空背景) 包含 震撼蓝色科技感粒子星空背景视频素材
炫酷的动态登录页面
03-12
一个炫酷的动态登录页面，里面包含javascript,css,jquery技术。
SSM框架实现注册登录功能
03-30
使用Maven管理项目，SSM框架实现最最简单的注册登录功能，博客有有关的搭建流程，提供给大家相互学习！
登录界面实现动态背景
oldolder的博客
03-20 1368
实现动态背景
SSM实现简单登录注册
qq_41195778的博客
11-22 9071
SSM实现简单登录注册 重构了一下以前的SSM登录注册案例，SSM的三大核心IOC，AOP，DI不用多说，网上随便翻一下都有 ，本篇直接上手，使用Maven工程搭建一个简单的SSM框架实现简单的登录注册，验证重名功能，适合刚上手的朋友看看 数据库就不贴了，俩字段，username和userpwd，指定username为主键 项目结构图 web.xml配置文件 <?xml version="...
SSM框架实现用户登录与注册功能
weixin_60249074的博客
04-18 7447
结构 SysUserController.java package lx.controller; import lx.entity.model.SysUser; import lx.service.SysUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springfr...
vue超好看的动态玻璃登录页面
06-07
最近，一款以Vue为基础开发的动态玻璃登录页面吸引了不少人的注意。这个页面以其优美的设计、炫酷的效果和流畅的动画赢得了许多人的喜爱。 页面的背景采用了动态玻璃效果，通过虚化处理和透明度变化来呈现出逼真的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值