html登录界面示例分享

最新推荐文章于 2024-03-04 14:18:16 发布
最新推荐文章于 2024-03-04 14:18:16 发布
阅读量296 收藏 1
点赞数
分类专栏： 笔记 文章标签： css js javascript html 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58821483/article/details/117712057
版权

 效果图

代码中不含背景图，图片片自己设置

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登录</title>  
</head>
<script type="text/javascript">
    function checkEmail(node){
        var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i;
        if(reg.test(node.value))
        {
            node.style.color="#28ff28";
        }
        else
        {
            node.style.color="#ff2d2d";
        }
    }
    function checkPsw(node){
        var reg = /^(?!_)(?!.*?_$)[\w]{6,16}$/i;
        if(reg.test(node.value))
        {
            node.style.color="#28ff28";
        }
        else
        {
            node.style.color="#ff2d2d";
        }
    }
    function confirm(){
    }
</script>
<style>
    * {
    padding:0;
    text-decoration:none;
    list-style:none;
    box-sizing:border-box;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
body {
    font-family:宋体;
}
.Login_wrapper{
    margin:auto;
    margin-top:100px;
    width: 400px;
    height:400px;
    background-color: #d3d8e4;
    color: #000;
    border-radius: 200px;
    padding: 20px;
    opacity: 0.8;
    animation-name: div;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.Login_wrapper .header{
    text-align: center;
    margin-top: 20px;
    font-size: 30px;
    text-transform: uppercase;
    height:20px;
}

.Login_wrapper .input_wrapper{
    margin-top: 20px;
    padding-top: 20px;
}

.Login_wrapper .input_wrapper input{
    background-color: #2f3542;
    border: 0;
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    outline: none;
    text-transform: uppercase;
}

.Login_wrapper .input_wrapper input::-webkit-input-placeholder{
    color: #fff;
    font-size: 15px;
}

.Login_wrapper .input_wrapper .broder_wrapper{
    margin:0 auto;
    background-image: linear-gradient(to right,#e8198b,#0eb4dd);
    width: 230px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Login_wrapper .input_wrapper .broder_wrapper .broder_item{
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    border-radius: 30px;
}

.Login_wrapper .active{
    display: flex;
    justify-content: center;
}

.Login_wrapper .active .btn{
    width: 80px;
    height:30px;
    margin-top: 30px;
    text-transform: uppercase;
    border: 2px solid #1e90ff;
    background-color:#7b7b7b;
    color:#fcfcfc;
    text-align: center;
    border-radius: 30px;
    cursor: pointer;
    transition: .2s;
}

.Login_wrapper .active .btn:hover{
    background-color: #0080ff;
}

.Login_wrapper .link{
    text-align: center;
    margin-top: 10px;
    font-size: 10px;
    text-transform: uppercase;
    height:20px;
}

.Login_wrapper .link a{
    color: #000;
}

#Login_wrappe_left{
    margin:0,0,0,0;
    padding-left: 20px;
    width:150px;
    height:50px;
    margin-top:20px;
    float:left;
}

#Login_wrappe_right{
    text-align:end;
    padding-right: 20px;
    margin:0,0,0,0;
    width:150px;
    height:50px;
    margin-top:20px;
    float:right;
}

#Login_wrappe_left a{
    color:#000;
    margin-left: 50px;
    padding:3px 5px;
    border-radius:3px;
    font-size: 20px;
    text-transform:uppercase;
}

#Login_wrappe_right a{
    color:#000;
    margin-right: 50px;
    padding:3px 5px;
    border-radius:3px;
    font-size: 20px;
    text-transform:uppercase;
}
@keyframes div {
        0%{transform: translate(0px,0px);}
        50%{transform:rotateY(180deg)}
        100%{transform:rotateY(360deg)}
    }
</style>
<body>
    <form id="form1" runat="server" onsubmit="return false">
    <div class="Login_wrapper" id="Login_wrapper">
        <div class="header">登录</div>
        <div class="input_wrapper">
            <input type="text" class="broder_wrapper"  placeholder="邮箱" onblur="checkEmail(this)">
            <input type="password" class="broder_wrapper"  placeholder="密码:至少6位" onblur="checkPsw(this)">
        </div>
        <div class="active">
            <button class="btn" OnClick="confirm()">登录</button>
        </div>
        <div class="link">
            <a href="RegisterPage.html">忘记密码?</a>
        </div>
        <div id="Login_wrappe_left">
            <a href="RegisterPage.html">注册</a>
        </div>
        <div id="Login_wrappe_right">
            <a href="javascript:void();" onclick="parent.location.reload();">退出</a>
        </div>
    </div>
    </form>
</body>
</html>
谭家菜鸟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML案例（二）---登录页
qq_46150052的博客
10-24 137
这是一个仿世纪佳缘做的登录表，只使用了HTML中的form表单<table></table>表单控件。效果图如下： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <form> <!-- 请输入手
一个用户登录界面html
03-05
一个用户登录界面html
html部分示例
qq_17524035的博客
12-14 231
Insert title here 我的登录界面 用户名 密码 个人生日 选择上传文件 请选择性别 男 女 请选择爱好 足球 羽毛球 篮球 请选择喜欢的车
有趣的HTML实例（十五） 注册登录界面（css+js）
好好读书
03-01 1262
有趣的HTML实例（十五） 注册登录界面（css+js） 一款简单的 HTML+CSS+JS 咖啡选择（css+js） 实例 1、HTML 2、CSS 3、JS 4、舒适的画面感 5、注册登录界面
html css前端案例案例学习,jQuery实现登录案例
weixin_29022821的博客
06-20 159
html代码：实例html>jQuery实现登录案例form{width:500px;height:500px;margin:auto;}用户登录邮箱：密码：登录$('button').on('click',function(){//1.提交地址varURL='check.php?m=login'//2.要提交的数据vardata...
JS校验与最终登陆界面功能完整示例
01-19
本文实例讲述了JS校验与最终登陆界面功能。分享给大家供大家参考，具体如下： <html> <head> <title>注册页面</title> <meta charset=UTF-8/> [removed] // 校验用户名 ...
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
01-02
分享给大家供大家参考，具体如下： 登录界面 具体实现方法如下： login.html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </...
webkit引擎界面系统登录界面-易语言
06-12
3、最重要的一点，让做界面的去界面，写程序的去写程序吧，界面与程序分享得更彻底 4、支持js、jq和易语言 交互！ 5、页面文件由photoshop切片直接得到，文件包中带psd文件； 6、支持FLASH； 7、网页文件可以放在...
PHP实现的用户注册表单验证功能简单示例
01-02
分享给大家供大家参考，具体如下： 注册界面 register.html 用户注册 <form method=post action=register_verify.php> <input type=text placeholder=用户名 name=username> <br> <input ...
分享JS表单验证源码（带错误提示及密码等级）
10-15
接下来是CSS部分，`style.css`文件用于美化界面，包括字体、颜色、布局等。例如，错误提示可能通过改变文字颜色或添加背景色来突出显示。 然后是JavaScript部分，主要关注密码验证和错误提示。这里通常会编写一个...
html登录界面，很好看
12-11
中间是一个大圆，然后是用户名和密码 以及按钮 中间是一个大圆，然后是用户名和密码 以及按钮中间是一个大圆，然后是用户名和密码 以及按钮中间是一个大圆，然后是用户名和密码 以及按钮中间是一个大圆，然后是用户名和密码 以及按钮
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
html界面案例合集
12-11
HTML界面风格，包括登录和图片内容，图片和网页的风格
HTML5 CSS3登陆界面 优秀实例
05-14
HTML5 CSS3登陆界面 优秀实例
非常好好看的几个登录页面（html，css）
12-09
非常好好看的几个登录页面（html，css）
java 界面实例_java – 可运行的界面示例
weixin_30741527的博客
02-16 141
public class CreateThreadRunnableExample implements Runnable {public void run() {for (int i = 0; i < 5; i++) {System.out.println("Child Thread : " + i);try {Thread.sleep(50);} catch (InterruptedExc...
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 12万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
html网页制作之简单登入界面
最新发布
不蒸馒头曾口气的博客
03-04 1206
【代码】html网页制作之简单登入界面。
HTML、PHP实战：搭建一个网页登录页面。
m0_50818626的博客
05-21 7319
可以看到当我们输入用户名：zhangsan 密码：123456 时，后台的数据库能够查询到，所以登录成功。可以看到，当输入数据库中已经存在的用户时，会显示用户已经存在，并且在3秒之后会跳转回原来的页面。当注册成功时，可以看到数据库中新增了对应的用户名及密码。当用户注册时前后两次输入密码不一致时也会出现提示。而当用户名和密码不匹配时则登录失败。文件名：denglu.html。我这里用的是小皮一键搭建的。文件名：denglu.php。文件名：zhuce.html。文件名：zhuce.php。
html登陆界面代码
05-29
以下是一个简单的 HTML 登录界面代码： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <body> <h1>Login</h1> <form action="#" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <input type="submit" value="Login"> </form> </body> </html> ``` 这个代码包含一个标题、一个表单和一个提交按钮。表单中包含两个输入框，一个用于输入用户名，另一个用于输入密码。当用户点击登录按钮时，表单将被提交到服务器进行验证。请注意，这个代码只是一个示例，你需要使用适合你自己需求的代码来实现你的登录界面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值