注册登陆页面（界面）

最新推荐文章于 2023-10-19 20:48:44 发布
最新推荐文章于 2023-10-19 20:48:44 发布
阅读量786 收藏 3
点赞数
分类专栏： javaweb 文章标签： HTML 注册页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43407321/article/details/101209304
版权 
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>注册登陆页面</title>
    <style>
        #overall{
            border:0px solid red;
            width: 1755px;
            height: 840px;
            margin: auto;
        }
        #logo{
            border:0px solid black;
            width: 1755px;
            height: 50px;
        }
        .top{
            border:0px solid green;
            width: 582px;
            height: 50px;
            float: left;
        }
        #top-3{
            padding-left: 80px;
            padding-top: 10px;
            border:0px solid black;
            width: 502px;
            height: 40px;
        }
        #menu{
            border:3px solid green;
            width: 1755px;
            height: 50px;
            background: black;
        }
        ul li{
            display: inline;
            color: white;
        }
        #backgroundimg1{
            border:0px solid red;
            width: 100%;
            height: 650px;
        }
        #Friendshiplink1 {
            border:0px solid yellow;
            width: 100%;
            height: 100px;

            text-align: center;
        }

    </style>

    <script>
         function CheckForm() {
             // 1.获取数据，检验用户名
             var uValue=document.getElementById("user").value;

             if(uValue==""){
                 alert("username can't be empty!")
                 return false;
             }
             // 检验密码
             var passValue=document.getElementById("password").value;
             if(passValue==""){
                 alert("password can't be empty!")
                 return false;
             }
             //检验确认密码
             var repassValue=document.getElementById("repassword").value;
             if(repassValue==""){
                 alert("repassword can't be empty!")
                 return false;
             }
             //检验邮箱
         //     var eValue=document.getElementById("emaile").value;
         //     if(( /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/).test(eValue)){
         //         alert("邮箱格式不正确")
         //         return false；
         //     }
          }
    </script>
</head>
<body>
  <div id="overall">
<!--      logo-->
      <div id="logo">
          <div class="top">
              <img src="img/2.jpg" width="100%" height="100%">
          </div>
          <div class="top">
              <img src="img/1.jpg" width="100%" height="100%">
          </div>
          <div class="top" id="top-3">
              <a href="#">登陆</a>&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="#">退出</a>
          </div>
      </div>
<!--      导航栏-->
      <div id="menu">
          <ul>
              &nbsp;&nbsp;&nbsp;
              <a href="#"><li style="font-size: 20px">首页</li></a>&nbsp;&nbsp;&nbsp;
              <a href="#"><li >生活用品</li></a>&nbsp;&nbsp;&nbsp;
              <a href="#"><li >数码科技</li></a>&nbsp;&nbsp;&nbsp;
              <a href="#"><li >孕婴保健</li></a>&nbsp;&nbsp;&nbsp;
              <a href="#"><li >家用电器</li></a>
          </ul>
      </div>
<!--      背景图片-->
      <div id="backgroundimg1" >
          <table border="0px"  width="100%" style="background:url(img/5.jpg) no-repeat right center" >
              <tr >
                  <td height="645px ">
<!--                      表单-->
                      <form action="#" method="get" name="reForm"  onsubmit="return CheckForm()">
                          <table border="1px"width="750px" height="360px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                              <tr height="40px">
                                  <td colspan="2">
                                      <font size="4">会员注册</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="4">USER REGISTER </font>
                                  </td>

                              </tr>

                              <tr height="40px">
                                  <td>用户名</td>
                                  <td>
                                    <span style="color: red ">*</span>  <input type="text" name="user" id="user" placeholder="请输入用户名"  size="34px"/>
                                  </td>
                              </tr>

                              <tr>
                                  <td>密码</td>
                                  <td>
                                      <span style="color: red ">*</span> <input type="password" name="password" id="password"/>
                                  </td>
                              </tr>

                              <tr>
                                  <td>确认密码</td>
                                  <td>
                                     <span style="color: red ">*</span>  <input type="password" name="repassword" id="repassword" />
                                  </td>
                              </tr>

                              <tr>
                                  <td>Emaile</td>
                                  <td>
                                      <span style="color: white ">*</span>   <input type="text" name="email"  id="emaile"/>
                                  </td>
                              </tr>

                              <tr>
                                  <td>姓名</td>
                                  <td>
                                      <span style="color: white ">*</span>   <input type="text" name="username" />
                                  </td>
                              </tr>

                              <tr>
                                  <td>性别</td>
                                  <td>
                                      <span style="color: white ">*</span>  <input type="radio" name="sex" value="男" checked="checkedr"/>男
                                      <input type="radio" name="sex" value="女"/>女
                                  </td>
                              </tr>

                              <tr>
                                  <td>出生日期</td>
                                  <td>
                                      <span style="color: white ">*</span>  <input type="text" name="birthday" />
                                  </td>
                              </tr>

                              <tr>
                                  <td>验证码</td>
                                  <td>
                                     <span style="color: red ">*</span>  <input type="text" name="yzm" />&nbsp;&nbsp;&nbsp;
                                      <img src="img/4.jpg"  width="100px" height="20px" align="center"/>
                                  </td>
                              </tr>

                              <tr>
                                  <td colspan="2" align="center">
                                      <input type="submit" value="注册" />
                                  </td>

                              </tr>


                          </table>
                      </form>
                  </td>
              </tr>
          </table>
      </div>


<!--      友情链接-->
      <div id="Friendshiplink1">
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <ul style="align: center">

              <a href="#"><li type="circle" style="color: #0000FF;">关于我们</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="#"><li type="circle"style="color: #0000FF;">网页信息</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="#"><li type="circle"style="color: #0000FF;">热情帮助</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="#"><li type="circle"style="color: #0000FF;">电话手机</li></a>&nbsp;&nbsp;&nbsp;&nbsp;

          </ul>
      </div>
  </div>



</body>
</html>

页面效果图：

 

 

图片放在一个文件夹中

脱俗仙子
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态实现web网页登陆和注册功能[保姆级教学]
小羊不会飞的博客
12-17 8006
动态实现页面登陆和注册功能！！！！
用html+css制作简单好看的登陆注册界面
热门推荐
小袁同学的博客
07-19 6万+
注重版权，转载请注明原作者和原文链接 作者：Bald programmer 先看看效果图 login.html代码 <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <style> body{ .
登录页面讲解
weixin_57727548的博客
03-08 1006
在很多网站和软件都会用到登录，所有今天就来讲一下登录。 生成验证码 在控制器中定义一个方法 首先声明一个字符串，可以直接赋值为固定的字符串，也可以生成一个随机字符串 例如：string strRandom = "abc"; string strRandom = ValidCodeUtils.GetRandomCode(3); 随机生成一个3位数的字符串 注：ValidCodeUtils.GetRandomCode和CreateImage自己定义的方法 方法详情已经在上一篇详细讲解了
前端之登录注册页面案例
KK_2018的技术博客_程序员不止是程序员
05-08 3万+
一、效果图 （1）登录界面 （2）注册界面 二、详细设计 （1）登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style> ...
html+css制作简单注册登录页面
m0_67930426的博客
10-19 1万+
光标为手的形状，当光标指定这个div的时候，光标为手的形状。没有账号，去注册 忘记密码。前端页面要得到css的布局，就得在html页面里调用css文件。方框（请输入用户名）方框（请输入用户名）写完这一步，然后再去运行，是没有东西的，但是并不是不存在。例如我在注册这一块级里，我用鼠标指定这一区域时会变成蓝色。如果不加，我们可以根据内容的多少，设计多少白色的部分。.b{ } 是针对注册两个字后面的白色部分进行布局。
登陆注册界面
03-10
两套登陆注册界面
IDEA登陆注册页面.rar
07-10
在本项目中，我们主要探讨如何使用IntelliJ IDEA（简称IDEA）开发一个基于Java的登陆注册页面，并集成MySQL数据库进行数据存储。这个过程涵盖了前端界面设计、后端业务逻辑处理以及数据库交互等多个关键环节。 首先...
lab6_end.rar_登陆注册界面
09-24
这里的“有登陆注册界面”，意味着项目中包含了处理用户登录和注册请求的JSP页面，以及可能的Servlet或JavaBean来处理业务逻辑。 在实际的登录注册系统中，通常包括以下几个主要部分： 1. **登录界面**：用户输入...
超级简单的登录注册界面（HTML+CSS）
weixin_74947024的博客
05-19 1990
初学html和css，然后用它写了一个简单的登录注册页面
QQ注册页面（完整版）
m0_63512120的博客
07-20 7200
用HTML5和CSS3实现的一个简易版QQ注册页面，希望能给大家带来帮助，在文章结尾附网页源码和图片素材！
五子棋源代码（包括自己做的登录界面）
07-08
自己开发五子棋源代码，希望对大家有用，里面包含有我自己做的登录界面，还有自己设计的五子棋界面。
登录注册页面
qq_45749629的博客
05-13 1万+
简单实现网站的登录，注册页面 一、登录界面 1、html <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body> <div class="container"&g
HTML5实现QQ注册页面，QQ登录页面，豆瓣电影网页
weixin_67259816的博客
10-31 3683
主要使用HTML5完成QQ注册页面，QQ登录页面，豆瓣电影页面。使用table标签完成布局，以及使用简单的CSS装饰页面，完成最终的效果
关于登录界面与登录的知识介绍
weixin_44543271的博客
05-15 4442
今天我给大家讲一下登录，下图是我弄的一个登录页面，还有一点没有弄完成，但是并不影响我接下来讲解的内容。登录其实比较简单。平常大家也经常登录各种APP平台。主要就是账号和密码验证码的输入。 登录页面图如下。 登录界面代码借鉴搭档的： 登录页面设计：就是个个标签之间的相互作用与配合了；下面是我设计这个页面的部分代码，至于CSS的样式调试我就不截图给大家看了，因为没什么可看。 首先看上面的图；大家可...
使用原生js写一个简单的注册登录页面
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
案例-简单的登录/注册界面
weixin_43670256的博客
04-17 744
案例
Ubuntu 中Qt PVP五子棋注册登录系统（内含代码）
Wolililili的博客
03-26 710
刚刚入手Qt，参考网上的各种资源和课上所学，做了一个PVP五子棋注册登录系统，由于能力有限，代码十分的长，但是实现了基本的功能，先看一下界面 简单介绍一下，各功能是如何实现的。注册登录系统是Qt与mysql数据库连接，登录注册其实就是查表和写入表，五子棋界面就是画家和鼠标事件的结合。在五子棋PVP对战这里，我的思路是： 1.设置背景，界面大小 2.画棋盘，将实际坐标转换成棋盘坐标 3.捕获鼠...
登录功能分析
weixin_45677987的博客
06-10 3200
1： 登录退出功能： (1): 登录业务流程 1： 在登录页面输入用户名和密码 2: 调用后台接口进行验证 3： 通过验证以后, 通过后端相应的状态跳转到项目主页 （如果登录失败, 提示用户。 如果登陆成功, 根据后端返回的状态, 则跳转到首页） (2) 登陆相关技术点： 1: http 请求是无状态的 2: 通过cokie 记录在客户端记录的状态 3: 通过session 在服务器端记录状态 4: 通过token 方式维持状态 如果不存在的跨域的问题, 建议采用cookie
个人博客项目——登录和注册
weixin_46631713的博客
03-30 2421
五、登录和注册 1、登录 1.1接口说明 接口url：/login 请求方式：POST 请求参数： 参数名称 参数类型 说明 account string 账号 password string 密码 返回数据： { "success": true, "code": 200, "msg": "success", "data": "token" } 1.2 JWT 登录使用JWT技术。 jwt 可以生成 一个加密的token，做为用户登录的令牌
javaweb登陆注册界面
最新发布
11-09
JavWeb是一种基于Jav语言的Web开发技术，可以用于开发各种类型的Web应用程序，包括登陆注册界面。下面是一个简单的JavWeb登陆注册界面的实现方法：\n\首先，需要创建一个JavWeb项目，并在项目中创建一个名为“gi.jsp”的JSP页面，用于显示登陆界面。在该页面中，可以使用HTML和CSS来设计登陆表单和样式。\n\接下来，需要创建一个名为“LogiServ”的Jav Serv类，用于处理用户提交的登陆请求。在该类中，可以使用Jav代码来验证用户输入的用户名和密码是否正确，并根据验证结果来决定是否允许用户登陆。\n\在“LogiServ”类中，可以使用Jav的Serv API来获取用户提交的表单数据，并使用Jav的JDBC API来连接数据库并查询用户信息。如果用户输入的用户名和密码与数据库中存储的信息匹配，则可以将用户信息保存到Sessi中，并跳转到一个名为“welcom.jsp”的JSP页面，用于显示欢迎信息。\n\如果用户输入的用户名和密码不正确，则可以将错误信息保存到Reques中，并返回到“gi.jsp”页面，用于重新显示登陆界面并提示用户输入错误。\n\除了登陆界面，还可以

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值