界面小项目之小米登录注册

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>登录注册</title>    <style>        body, ul {            margin: 0;            padding: 0;            list-style: none;        }        .login {            width: 300px;            height: 350px;            border: 1px solid #aaaaaa;            margin: 0 auto;        }        ul:after {            content: '';            display: block;            clear: both;        }        li {            width: 149px;            height: 42px;            float: left;            font-size: 20px;            text-align: center;            line-height: 50px;            margin-top: 10px;            cursor: pointer;

        }        li:nth-child(1){            border-right: 1px solid #cccccc;        }        li:nth-child(2){            border-left: 1px solid #cccccc;        }        li:hover {            color: orange;        }        li.live {            color: orange;        }        .login-box, .scan-box {            width: 300px;            height: 300px;            /**/            display: none;

        }        .scan-box {            /**/        }        .box.live{            display: block;            position: relative;        }

        .inp1 {            width: 260px;            height: 45px;            position: absolute;            border: 1px solid #cccccc;            /*margin: 20px auto;*/            left: 20px;            top: 25px;            font-size: 18px;        }        .inp2 {            width: 260px;            height: 45px;            position: absolute;            border: 1px solid #cccccc;            left: 20px;            top: 90px;            font-size: 18px;        }        .btn {            width: 260px;            height: 45px;            position: absolute;            border: 1px solid #cccccc;            left: 20px;            top: 155px;            color: white;            background-color: orange;            font-size: 18px;        }        img {            width: 180px;            height: 180px;            /*margin-left: 60px;*/            /*margin-top: 30px;*/            position: absolute;            left: 60px;            top: 30px;        }        /*.box-lcom {*/            /*width: 260px;*/            /*height: 50px;*/            /**/            /*position: absolute;*/            /*bottom: 20px;*/            /*left: 20px;*/            /*!*float: left;*!*/        /*}*/        /*.box-lcom:after{*/            /*content: '';*/            /*display: block;*/            /*clear: both;*/        /*}*/        /*.box-lcom-img {*/            /*float: left;*/            /*width: 50px;*/            /*height: 50px;*/            /**/        /*}*/    </style></head><body>    <div class="login">        <ul>            <li class="live">登录</li>            <li>扫码</li>        </ul>        <div>            <div class="box login-box live">                <input type="text" class="inp inp1" placeholder="邮箱/手机号码/小米账号">                <input type="password" class="inp inp2" placeholder="密码">                <input type="submit" value="登录" class="btn">                <!--<ul>-->                    <!--<li><img src="" alt="" class="box-lcom-img"></li>-->                    <!--<li><img src="" alt="" class="box-lcom-img"></li>-->                    <!--<li><img src="" alt="" class="box-lcom-img"></li>-->                    <!--<li><img src="" alt="" class="box-lcom-img"></li>-->                <!--</ul>-->            </div>            <div class="box scan-box">                <img src="img/001.png" alt="">            </div>        </div>    </div></body> <script src="jq/jquery-3.4.1.js"></script>    <script>        $('li').click(function () {            $(this).addClass('live').siblings().removeClass('live');            // $('li').eq(1).removeClass('live');            let index = $(this).index();            $('.box').eq(index).addClass('live').siblings().removeClass('live');        })    </script></html>

转载于:https://www.cnblogs.com/huanghongzheng/p/11151977.html

界面小项目之小米登录注册相关推荐

微信小程序如何实现登录注册带源码
前几天没事随手写了个小程序端的登录注册,现在分享给大家一.登录微信前端这是效果图与wxml代码这是wxss代码 input{height: 100rpx; text-align: center; ...
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...
java简单小程序_Java简易登录注册小程序
这篇文章主要介绍了Java图形界面开发,简易登录注册小程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的 ...
SPA项目开发之登录注册
SPA项目开发登录注册数据库后台代码 prox.xml 配置 web.xml 配置 CorsFilter HBuilder X api 目录 action.js http.js router 目 ...
微信小程序入门七登录注册
上一章介绍了微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转以及页面U ...
python实现用户登录注册界面_实现前后端登录注册界面
本篇博客讲解如何实现前后端的简单登录注册界面,后端代码由node.js实现,主要阐述登录注册时网页工作原理.感兴趣的同学可以参考一下. 注册界面功能: 判断用户是否输入邮箱,密码,验证密码(前端判断 ...
小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...
spa项目开发（登录注册）
目录一.spa项目完成登录注册布局 1.安装开发模块 2.引入main.js配置 3.登录注册页跳转二.vue数据交互实现登录功能引入main.js配置三.ajax 跨域问题 1.引入main ...

界面小项目之小米登录注册

界面小项目之小米登录注册相关推荐

最新文章

热门文章