HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(一)

简介: HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!


需要的小伙伴关注评论区留言哦

界面一:

代码如下:

<div class="demo form-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
                    <form class="form-horizontal">
                        <div class="heading">注册页面</div>
                        <div class="form-group">
                            <i class="fa fa-user"></i><input required name="login[username]" type="email" class="form-control" placeholder="Username" id="exampleInputEmail1">
                        </div>
                        <div class="form-group">
                            <i class="fa fa-lock"></i><input required name="login[password]" type="password" class="form-control" placeholder="Password" />
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default"><i class="fa fa-arrow-right"></i></button>
                            <span><a href="" class="create_account">注册</a></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

界面二

部分代码如下:

<body>
<!--User-Login-->
<h1>用户登录</h1>
<div class="avtar">
  <img src="images/avtar.png" />
</div>
  <div class="login-form">
    <p>新用户?<a href="#">在这注册!</a></p>
      <form>
        <div class="form-text">
          <input type="text" class="text" value="用户名" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'USERNAME';}" >
          <input type="password" value="密码" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'Password';}">
        </div>
          <input type="submit"value="GO" >
      </form>
  </div>

界面三

代码如下:

<body>
<div id="window" style="display:none;">
  <div class="page page-front">
    <div class="page-content">
      <div class="input-row">
        <label class="label fadeIn">用户名</label>
        <input id="username" type="text" data-fyll="pineapple" class="input fadeIn delay1"/>
      </div>
      <div class="input-row">
        <label class="label fadeIn delay2">密码</label>
        <input id="password" type="password" data-fyll="hackmeplease" class="input fadeIn delay3"/>
      </div>
      <div class="input-row perspective">
        <button id="submit" class="button load-btn fadeIn delay4">
          <span class="default"><i class="ion-arrow-right-b"></i>登录</span>
          <div class="load-state">
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
          </div>
        </button>
      </div>
    </div>
  </div>

界面四

部分代码如下:

<div class="main">
      <div class="login">
        <div class="log-con">
          <span>登录</span>
          <input type="text" class="name" placeholder="请输入用户名"/>
          <input type="text" class="password" placeholder="请输入密码"/>
          <input type="text" class="code" placeholder="请输入验证码"/>
          <input type="button" id="code" οnclick="change();"/>
          <a>立即登录</a>
        </div>
      </div>
    </div>

界面五

部分代码如下:

<div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-form-title" style="background-image: url(images/bg-01.jpg);">
                    <span class="login100-form-title-1">登 录</span>
                </div>
                <form class="login100-form validate-form">
                    <div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
                        <span class="label-input100">用户名</span>
                        <input class="input100" type="text" name="username" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>
                    <div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空">
                        <span class="label-input100">密码</span>
                        <input class="input100" type="password" name="pass" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>
                    <div class="flex-sb-m w-full p-b-30">
                        <div class="contact100-form-checkbox">
                            <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                            <label class="label-checkbox100" for="ckb1">记住我</label>
                        </div>
                        <div>
                            <a href="javascript:" class="txt1">忘记密码?</a>
                        </div>
                    </div>
                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn">登 录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

界面六


HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(二)https://developer.aliyun.com/article/1383354

相关文章
|
22天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
103 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
20天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
47 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
123 63
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
98 2
|
3月前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符,placeholders占位符内容填写注册表单特效,非常有意思,欢迎有兴趣的朋友前来下载使用。
38 5
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
205 1
|
3月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
71 3
|
3月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
55 4
|
3月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
88 0
html5+three.js公路开车小游戏源码
|
Web App开发 移动开发 JavaScript
《HTML5触摸界面设计与开发》——导读
在我写作时, 11.42%的网页流量来自移动设备。这个数字一年前是7%,三年之前是1.77%。虽然桌面设备还会陪伴我们一段时间,但是Web的未来是在移动设备上的。
1108 0