前端实战之登陆注册页

最新推荐文章于 2024-10-01 20:03:47 发布
最新推荐文章于 2024-10-01 20:03:47 发布
阅读量5.6k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a0100034930/article/details/42375347
版权

这是我自己仿照简书的板式用bootstrap写的一个登陆注册页面，由于是新手，估计有的方法用的很不恰当，请大家不吝赐教。

废话不多说了，直接上代码
- HTML部分

<!DOCTYPE html>
<html lang="zh-cn">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>
    </title>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
    rel="stylesheet">
  </head>

  <body>
    <div class="navbar-USF">
      <div class="dropdown">
        <a href="/">
          <span class="glyphicon glyphicon-home"></span>
        </a>
        <a href="/">
          <span class="glyphicon glyphicon-th"></span>
        </a>
      </div>
    </div>
    <div class="container">
      <div class="sign-page">
        <div class="alert alert-info" role="alert">
          <p>
            注册成功，请登陆
          </p>
        </div>
        <div class="signup-page">
          <form>
            <h3>
              Sign up with Email
            </h3>
            <p class="slogan">
              Join us, start working
            </p>
            <div class="input-prepend">
              <span class="glyphicon glyphicon-user"></span>
              <input type="text" placeholder="用户名">
            </div>
            <br>
            <div class="input-prepend">
              <span class="glyphicon glyphicon-envelope"></span>
              <input type="text" placeholder="Email">
            </div>
            <br>
            <div class="input-prepend">
              <span class="glyphicon glyphicon-lock"></span>
              <input type="password" placeholder="******">
            </div>
            <br>
            <div class="input-prepend">
              <span class="glyphicon glyphicon-lock"></span>
              <input type="password" placeholder="******">
            </div>
            <br>
            <button class="btn btn-lg btn-primary btn-block">
              <span>注册</span>
            </button>
          </form>
        </div>
        <div class="signin-page">
          <form>
            <h3>
              Sign in
            </h3>
            <p class="slogan">
              Quick Start
            </p>
            <div class="input-prepend">
              <span class="glyphicon glyphicon-user"></span>
              <input type="text" placeholder="用户名">
            </div>
            <br>
            <div class="input-prepend">
              <span class="glyphicon glyphicon-lock"></span>
              <input type="password" placeholder="******">
            </div>
            <br>
            <span id="control-group">
              <label>
                <input type="checkbox" value="option1">
                Remember Me |
              </label>
              <a href="/user/newpasswd">Forgot Password?</a>
            </span>
            <br>
            <button class="btn btn-lg btn-danger btn-block">
              <span>登陆</span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </body>

</html>
  • CSS部分 
.navbar-USF{
        left:0;
        top:0;
        position:fixed;
        height:100%;
        width:45px;
        background-color:#3C3C3C;
    }
    .navbar-USF a{
        display:block;
        padding:10px;
        line-height: 25px;
        height:45px;
        font-size:16px;
        text-align: center;
    }
    .navbar-USF a:hover{
      background:#E0E0E0;
    }
    .navbar-USF a span{
        height:25px;
        width: 25px;
    }

  .sign-page{
    margin-top:30px;
    padding:40px;
  }

  .alert{
    position:absolute;
    width:18%;
    left:40%;
    top:5%;
    display:none;
  }


  .alert p{
    text-align:center;
  }
  .signup-page{
    float:left;
    width:49%;
    display:inline-block;
    vertical-align:top;
    border-right: 1px solid #d9d9d9;
  }

  .signin-page{
    float:left;
    width:49%;
    display:inline-block;
    vertical-align:top;
  }

  form{
    width:301px;
    display:block;
    margin:20px;
    margin-left:100px;
  }
  .input-prepend span{
    width:42px;
    height:42px;
  }
  .input-prepend input{
    width:228px;
    height:42px;
    padding:4px 12px;
  }
 span#control-group{
   margin:0 0 100px 0;
 }
  • 效果截图

a0100034930
关注
前端之登录注册页面案例
KK_2018的技术博客_程序员不止是程序员
05-08 3万+
一、效果图 （1）登录界面 （2）注册界面 二、详细设计 （1）登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style> ...
前端登录注册流程
ajsbxi的博客
05-10 1825
本文档介绍了前端（登录+注册）流程，包括封装HTTP请求的request.js、处理用户注册的user.js服务，以及Vue组件中的表单验证和异步注册逻辑。整个流程涉及数据绑定、表单验证和Token管理。
实现基础用户登录与注册页面的前端开发
weixin_35755640的博客
09-06 1462
本文还有配套的精品资源，点击获取 简介：标题"Simple-user-login-registration-page"指出了一个基本的Web前端开发任务，即实现一个用户登录和注册页面。本项目侧重于使用JavaScript处理用户输入验证、事件监听、发送AJAX请求、错误处理、状态管理和UI更新等前端功能。开发者需要理解如何利用JavaScript来增强页面的交互性和用户体验...
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
web前端登陆注册界面（html+css+js）
Anqefdc的博客
06-22 6533
制作内容：粉丝网页登录注册功能页面 作品风格：主题：以“时代少年团”为爱豆，制作粉丝可以交流、获取爱豆动态、购买爱豆周边的网页。 网站的登录界面：背景是七个爱豆在舞台上的光影图，登陆界面整体色彩为蓝色也是意寓粉丝可以在这样一个蓝色深海般的网站中畅所欲言。页面含有背景音乐 “少年时代”听之舒缓安心会让整个登录过程中的粉丝更加沉浸。 注册界面：整体颜色采用了深沉灰色，结构框架简约大方。 网页界面：整体选择蓝色，页面介绍爱豆团体的口号并在旁边轮播爱豆的美图，右侧依次有其他功能，功能选择背景颜色为橙色使之更加醒目，
Web前端设计HTML5+CSS3+JQuery设计登陆注册无刷新页面
09-23
小编自己编写的一款透明的登陆界面，log可随意自己添加，美美的！！！
学习建立web前端登录与注册页面
2303_76505156的博客
05-14 1137
主要运用了函数：document.forms[ ][ ]两个值分别为表名与值名将得到的值存有一个变量；本次我学习的自我建立 web前端登录与注册页面，本次参考了“小k师兄”哔哩哔哩up主的思路，大家要是感兴趣可以去多看看。主要是先修饰了各个标签之间的外边距与内边距，<from>标签修饰宽度与高度，加入了背景颜色运用了rgba格式对齐修饰。js的编写，我本身学习的js还未能熟练运用所有js对我来说有的难，也是参考了多个代码在自我慢慢写出来的。本次登录功能实现了密码与用户号的校验功能。消除内外边距在进行编写。
网页前端html、css、js--登录注册页面案例
m0_52822058的博客
12-08 1531
当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使id=‘username_err’ 的span标签显示出来，给出用户提示。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使id='password_err’的span标签显示出来，给出用户提示。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='tel_err’的span标签显示出来，给出用户提示。如果有一个不符合规则，则不允许提交表单。
适合练手的10个前端实战项目(附视频+源码）
热门推荐
码农王也的博客
08-28 5万+
当下前端开发可以说是一个比较火的职业，所以学习的人比较多，不管是培训还是自学都是希望通过前端可以找到一份好的工作，但是很多自学的朋友在自学过程中有些盲目，不仅大大降低了学习的效率，而且也会打击自己的学习热情。 那么当我们学习了前端的一部分知识之后，对前端有了进一步的了解，我们就急需要一些项目去帮我们整理一下自己学习的知识点以及提高一下编程能力，这样更有助于我们的学习和工作实践，最重要的是提高自己的项目经验，对于找工作而言有着大大的帮助。 下面小编整理了几个我们的学员项目，在学习前端的新人可以拿去练练手。
Vue.js前端开发实战-源代码.zip
07-07
- 登录注册系统：涉及用户认证、表单验证和路由保护。 - 数据展示：通过API获取数据，展示列表、卡片、轮播图等。 - 动画效果：使用Vue的过渡系统实现组件的入场、出场动画。 - 动态加载和懒加载：优化用户体验，按...
【项目实战】登录与注册业务的实现（前端+后端+数据库
2401_84447149的博客
05-01 238
返回首页去登录
Web前端用户注册
09-11
登录，注册是我们使用的较多的表单认证，每个项目都从头开始写，显然是没有必要的。下面和大家分享下我所写的表单验证： 下面的代码，会附上完整代码，使用的过程中，只需要根据自己的项目进行简单的修改即可，非常方便。
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）
12-31
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。
前端移动端登录注册页
07-24
包含登录注册两个功能的页面，注册页可以进行手机号验证，手机验证码倒数，密码验证，注册之后完善个人信息页面。
前端代码+登陆与注册
08-28
前端登陆与注册界面 主要包括账号登陆、扫码登陆、短信验证等功能
flutter web登录和注册页
04-12
本项目是一个Flutter Web的实战示例，旨在演示如何轻松创建登录和注册界面，并实现页面间的有效导航。 首先，我们从创建基本的Flutter Web项目开始。你需要安装Flutter SDK并设置好环境，然后通过`flutter create ...
Vue2 登录界面实战：手把手教你构建简单美观的登录页面从0开始：用 Vue2 实现简洁实用的登录页面，适合前端新手！Vue2+CSS 新手教程：快速实现两种风格的登录界面轻松上手！用 Vue2
最新发布
南北极之间
10-01 887
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
web登录注册页面
m0_67391518的博客
06-18 1万+
项目地址：https://download.csdn.net/download/qq_41505957/14938383 存储实体类,属性有，，三个属性，与数据库中对应。 UserMapper.java 是类在数据库中的操作的接口，这里我直接用注解完成了。 IndexServlet.java IndexServlet.java是对index.jsp中登录按钮进行处理。判断用户的用户名和密码是否正确，如果正确，显示登录成功，如果错误则显示登录失败。 RegisterServlet.java RegisterS
web前端注册界面
weixin_62880319的博客
12-28 4152
前端注册页面
多页面链接的Javaweb前端实战项目模板
该模板适用于进行大作业、上机任务以及Javaweb和前端的实战项目练习。它涉及多个页面，包括主页、订单页面、前台员工页面、客户页面、房屋信息页面、聊天页面、个人资料页面、客户注册页面、展示控制页面和计数器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值