网页的登录和注册页面

最新推荐文章于 2024-04-30 10:00:00 发布
最新推荐文章于 2024-04-30 10:00:00 发布
阅读量2.2k 收藏 42
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45883291/article/details/104149834
版权

注册页面

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        .p{
            color:red;
            margin-left:20px;
            display:inline-block;
        }
        .c{
            color:red;
            margin-left:4px;
            display:inline-block;
        }
        .l{
            font-size:18px;
        }
        .d{
            height:35px;
            width:300px;
            display:inline;
        }
        .i{
            height:30px;
            width:300px;
        }
       
             .container 
        {
            width: 70%;
            margin: 10% auto 0;
            background-color: #f0f0f0;
            padding: 2% 5%;
            border-radius: 10px;

            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 500px;
            transform: translate(-50%, -50%);

        }

    </style>
</head>
<body>
    <div style="height: 80px;"></div>
    <form enctype="multipart/form-data">
        <div style="width:500px;float:left;margin:0 20px;" class="container">
            <div style="font-size:28px;">注册新用户</div>
            <br/>
            <span class="p">*</span>
            <label for="username" class="l">用户名:</label>
            <div style="height:35px;width:300px;position:relative;display:inline;">
                <input id="username" type="text" style="height:30px;width:250px;padding-right:50px;">
                <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;" ></span>
            </div>
            <br/><br/>
            <span class="p">*</span>
            <label for="phonenumber" class="l">手机号:</label>
            <div  class="d">
                <input id="phonenumber" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="login_password" class="l">登录密码:</label>
            <div  class="d">
                <input id="login_password" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="confirm_password" class="l">确认密码:</label>
            <div  class="d">
                <input id="confirm_password" type="text" class="i">
            </div>
            <br/><br/>
            <span class="p">*</span>
            <label for="ver_code" class="l">验证码:</label>
            <div  class="d">
                <input id="ver_code" type="text" class="i">
            </div>
            <br/><br/>
            <input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1"/>
            <span style="font-size:10px;">我已阅读并同意《用户注册协议》</span>
            <br/><br/>
            <input type="submit" value="同意以上协议并注册" style="margin-left:100px;height:30px;width:300px;display:inline-block;"/>
        </div>
    </form>

</body>
</html>

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

登录页面

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                登录页面
            </title>
        </meta>
        <style>
             .container 
        {
            width: 70%;
            margin: 10% auto 0;
            background-color: #f0f0f0;
            padding: 2% 5%;
            border-radius: 10px
        }
        h1{
            text-align: center;
        }
        </style>
    </head>
    <body>
        <div style="height:80px;"></div>
        <div style="width:500px;float: middle;margin:0 auto;" class="container">
            <h1>登录</h1>
            <label for="username" style="font-size:18px">
                用户名：
            </label>
            <div style="height:35px;width:400px;position:relative;display:inline">
                <input id="username" style="height:30px;width:350px;padding-right:50px;" type="text">
                    <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;">
                    </span>
                    
                </input>
            </div>
            <br/>
            <br/>
            <label for="password1" style="font-size:18px">
                密码：
            </label>
            <div style="height:35px;width:400px;position:relative;display:inline">
               
                <input id="password1" style="height:30px;width:350px;padding-right:50px;" type="text">
                    <span style="position:absolute;right:16px;top:2px;background-image:url(p.ico);height:16px;width:16px;display:inline-block;">
                    </span>
                    
                </input>
            </div>
            <br>
            <br>
                <div style="width:426px;float: middle;">
                    <input name="auto_login" type="radio" value="1"/>
                    自动登录
                    <a herf="找回密码网址">
                        忘记密码？
                    </a>
                    <a href="http://111.229.210.226/04.html">
                        注册
                    </a>
                </div>
                <br/>
                <br/>
                <div style="width:426px">
                    <a href="http://111.229.210.226/02.html"><input style="height:30px;width:200px;" type="submit" value="登录"/></a>
                </div>
            </input>
        </div>
    </body>
</html>

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

小番樊凡
关注
  • 3
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bilibili登录注册页面
weixin_46531884的博客
09-06 1712
效果图 main.js app.vue router.js 登录页面（父组件） 注册页面（父组件） 子组件
前端之登录注册页面案例
KK_2018的技术博客_程序员不止是程序员
05-08 3万+
一、效果图 （1）登录界面 （2）注册界面 二、详细设计 （1）登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style> ...
登录注册界面
菜鸟-传奇
04-14 1万+
登录注册界面 具体实现 先看一下最终效果，登陆和注册 背景图片： 附源码： login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <st...
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
最新发布
DL_dldlhhj的博客
04-30 1125
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
登录注册页面
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
SpringBoot+Vue 实现简单的：登录、注册、查看详情、商品页面、购物车功能
RuanFun的博客
09-25 9656
破解主要难点：如何定义cookie存储用户登录信息，提取cookie中数据，封装前端重复性代码，根据登录与否状态显示不同界面，实现验证码功能.....
登录注册页面的验证
weixin_45376650的博客
09-03 2089
登录注册验证是我们平时生活中碰到的最常见的验证，可以说是处处可见。 总结常见的验证流程： 用户选中某一个输入框，显示输入框的提示信息。 输入该输入框的信息。 用户输入完一段信息后，选中下一个输入框，这时上一个输入框失去焦点，开始对用户输入的信息进行判定。 判定分为很多，当然也有一边输入一边判定的。判定完毕后显示提示信息。 重复以上4个步骤，直到需要用户输入的数据全部都符合要求。 提交表单 这里...
JavaWeb登录注册页面
08-02
JavaWeb登录注册页面是Web应用开发中的基础模块，主要用于用户的身份验证和信息管理。这个项目集成了验证码生成与验证、记住账号密码的功能，并且利用了Filter进行请求拦截，以提高系统的安全性和用户体验。同时，该...
仿京东登录和注册页面
11-27
4. **响应式设计**：京东的登录注册页面应具备响应式布局，适应不同设备的屏幕尺寸，如手机、平板和桌面电脑。 【实现细节】 实现这个项目时，开发者可能使用了CSS3来处理样式和动画效果，比如使用`@media`查询...
红色风格网站登录注册页面html模板
04-01
标题中的“红色风格网站登录注册页面html模板”指的是一个网页设计资源，它是为创建具有红色主题的登录和注册页面而设计的HTML模板。这个模板是初学者学习HTML和CSS的一个好起点，因为它提供了完整的布局结构和合理...
漂亮大气注册登录页面模板.zip
04-03
"漂亮大气注册登录页面模板.zip" 提供的资源就是一个典型的Web界面设计案例，适用于快速构建简洁、美观的用户注册和登录界面。这样的模板能够帮助开发者节省时间，提高开发效率，同时也确保了界面的视觉吸引力。 ...
html网页设计注册与登录页面模板
10-09
在注册页面，通常需要验证用户提供的邮箱是否唯一，这可能涉及后端数据库查询，虽然这里的示例可能仅限于前端验证。 `images`文件夹可能包含图标和其他图形元素，这些元素能够提升页面的吸引力和可用性。例如，密码...
html网页制作—登录及注册页面设计
菇凉小伙de博客
04-11 5万+
一、文字处理 1、文字加粗：<strong><\strong> 2、文字换行：<br/> 3、文档标题：title 4、整体文字居中<body align="center"> 5、整体字体颜色：<body style="color:white"> 6、段落：<p> 7、标题：<h1>~<h6&g...
网页中登陆注册是如何实现的
weixin_44602430的博客
09-23 5233
摘要:登录注册是一个网站最常用的也是最基本的功能，本文就来详细的介绍一下在网页中，实现这两个最基本的需求从后端到前端需要做些什么。 一.前置知识 1.首先我们至少需要了解HTTP最基本的request请求和response响应的相关概念。可以先查看一位博主的文章:HTTP入门(请求与响应的基本知识). 2.再看一下服务端和客户端之间的交互,如下图: 用文字描述一下： 1.客户端（即浏览器）向服务端发起request请求 2.服务端通过监听80端口（http）或443端口（https）来接收请求 3.服务端
登录页面制作
XiuBi_251的博客
05-20 6769
登录页面，包含结构样式，以及登录和注册功能
登录注册HTML页面代码
zhaochongsi的博客
01-06 8万+
一、注册 创建register.html文件，录入如下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> form { width:100%;
HTML+CSS做登录注册界面
热门推荐
风从北方来的博客
05-29 14万+
在登录界面点注册会进入注册界面登录界面代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&am
HTML实现登录注册界面
qq_44892111的博客
04-09 7万+
我是一个初学者，学了有一星期的时间，分享一下最近在制作的登录注册界面。 登录页面：简单的运用了html和css的东西，没有用到js（目前功力不够）。 另外还用到了阿里巴巴矢量图标库的一些图标，毕竟自己不会做UI <!DOCTYPE > <html> <html lang="ch"> <head> <meta charset="utf-...
idea登录和注册页面的跳转
05-09
在进行Idea登录和注册页面跳转时，我们需要考虑到用户的使用习惯和体验，以便提供更好的服务。为了实现这一点，我们可以通过以下几种方式来进行页面跳转： 1. 利用常规导航链接 这是最基本的登录和注册页面跳转...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值