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

<!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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/462070.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Crusher Django 学习笔记4 使用Model

Crusher Django 学习笔记4 使用Model

http://crusher-milling.blogspot.com/2013/09/crusher-django-tutorial4-using-basic.html 顺便学习一下FQ Crusher Django转载于:https://www.cnblogs.com/impact-crusher/p/3339029.html
阅读更多...
C库中的输入函数、输出函数

C库中的输入函数、输出函数

关于这些C库输入函数、输出函数的用法&#xff0c;可以在命令行输入“man 3 xxx”来查询。 一、printf()函数、scanf()函数 1、printf()函数 函数模型 int printf(const char *format, ...); 函数作用 把存储在计算机中的二进制格式的数值&#xff0c;按照转换说明&#xff0c…
阅读更多...
【音乐】想不起来歌名的瞎唱

【音乐】想不起来歌名的瞎唱

1、风吹稻&#xff08;盗&#xff09;花香~好地方~ 2、转载于:https://www.cnblogs.com/wxl845235800/p/11152088.html
阅读更多...
PWM调光方法在LED亮度调节中的应用

PWM调光方法在LED亮度调节中的应用

LED 是一种固态电光源&#xff0c; 是一种半导体照明器件&#xff0c;其电学特性具有很强的离散性。它具有体积小、机械强度大、功耗低、寿命长&#xff0c; 便于调节控制及无污染等特征&#xff0c;有极大发展前景的新型光源产品。LED 调光方法的实现分为两种&#xff1a; 模拟…
阅读更多...
redhat rpmforge epel 安装源配置

redhat rpmforge epel 安装源配置

参考阅读 epel 直接安装 RPMforge for CentOS 6 The default RPMforge repository does not replace any CentOS base packages. In the past it used to, but those packages are now in a separate repository (rpmforge-extras) which is disabled by default. You can fi…
阅读更多...
知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页

知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页

回到目录 数据分页是这个经常说的东西&#xff0c;无论在WEBForm还是WinForm中它都会被单独拿出来&#xff0c;或者是公用组件&#xff0c;或者是公用类库&#xff0c;反正对于数据分页这个东西&#xff0c;总是我们关注的一个话题&#xff0c;但事实上&#xff0c;数据分页归…
阅读更多...
main函数的参数

main函数的参数

main函数可以带参数&#xff0c;这个参数可以认为是 main函数的形式参数。C语言规定main函数的参数只能有两个&#xff0c;习惯上这两个参数写为argc和argv。因此&#xff0c;main函数的函数头可写为&#xff1a; main (argc&#xff0c;argv)。C语言还规定argc(第一个形参)必须…
阅读更多...
leetcood学习笔记-2-两数相加

leetcood学习笔记-2-两数相加

题目描述&#xff1a; 方法一&#xff1a; # Definition for singly-linked list. # class ListNode: # def __init__(self, x): # self.val x # self.next Noneclass Solution:def addTwoNumbers(self, l1: ListNode, l2: ListNode) -> ListNode:cur…
阅读更多...
AIX samba服务器配置

AIX samba服务器配置

最简单的安装文件是。bff文件了&#xff0c;菜鸟的最爱。下载地址我找了很久&#xff0c;现在奉献出来&#xff1a;http://www.bullfreeware.com/一、下载samba-3.0.4.0.bff二、将文件放在AIX系统的临时安装目录下&#xff0c;如&#xff1a;/usr/samba三、 smit installp&…
阅读更多...
Forward框架的逆袭：解析Forward+渲染

Forward框架的逆袭：解析Forward+渲染

转载请注明出处为KlayGE游戏引擎&#xff0c;本文地址为http://www.klayge.org/2012/04/21/forward%e6%a1%86%e6%9e%b6%e7%9a%84%e9%80%86%e8%a2%ad%ef%bc%9a%e8%a7%a3%e6%9e%90forward%e6%b8%b2%e6%9f%93/ AMD在7900系列显卡发布的时候同时推出了Leo demo&#xff0c; 并说明它…
阅读更多...
atoi()函数：将字符串转换成整型数

atoi()函数：将字符串转换成整型数

C语言有atoi、atol、atof等库函数&#xff0c;可分别把ASCII编码的字符串转化为int、long、float类型的数字。这里讲述atoi()函数的内容&#xff0c;另外两个类似。 函数原型 int atoi(const char* nptr); 函数功能 将字符串转换成整型数。 补充说明 atoi()函数会检查nptr所指向…
阅读更多...
Java NIO学习系列三：Selector

Java NIO学习系列三：Selector

前面的两篇文章中总结了Java NIO中的两大基础组件Buffer和Channel的相关知识点&#xff0c;在NIO中都是通过Channel和Buffer的协作来读写数据的&#xff0c;在这个基础上通过selector来协调多个channel以同时读写数据&#xff0c;本文我们就来学习一下selector。 Java NIO中引入…
阅读更多...
android中的BitMap（二）从网络和资源文件中获得一个BitMap

android中的BitMap（二）从网络和资源文件中获得一个BitMap

//取得网络上图片资源的路径 String urlstring"http://img.wallba.com/Public/Upload/Image/qichebizi/ asidunmading7/134/20113151413962.jpg"; try { //建立网络连接 URL imageURlnew URL(urlstring); URLConnection conimageURl.openConnection(); con.co…
阅读更多...
Java JTable3

Java JTable3

预览&#xff1a; 代码 &#xff1a; /*** */ package com.han;import java.awt.Color; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; imp…
阅读更多...
ov7725摄像头调试经验-寄存器配置

ov7725摄像头调试经验-寄存器配置

之前调过一款摄像头&#xff0c;是MT9V034&#xff0c; 最近在调的是OV7725摄像头&#xff0c;感觉OV7725摄像头比MT9V034要难&#xff0c;特别是寄存器配置&#xff0c;要想玩转一款摄像头&#xff0c;必须要熟悉它的寄存器配置&#xff0c;而且要亲自去调试&#xff0c;然后才…
阅读更多...
关于ASCII字符的那些事儿

关于ASCII字符的那些事儿

1、单字符一般用单引号加一个字符表示&#xff0c;比如字符1表示为‘1’&#xff0c;而数字1直接表示为1&#xff1b; char ch 1 ;int num 1;2、计算机用数字来存储字符&#xff0c;比如字符1&#xff0c;在计算机里面为49&#xff08;十进制&#xff09;&#xff1b;而数字…
阅读更多...
SQL Server Transactional Replication 中的 CommitBatchSize 和 CommitBatchThreshold 属性

SQL Server Transactional Replication 中的 CommitBatchSize 和 CommitBatchThreshold 属性

最近遇到一个在SQL Server transactional replication 里关于CommitBatchSize 和CommitBatchThreshold设置的问题&#xff0c;BOL里面的解释很含糊&#xff1a;CommitBatchSize “Is the number of transactions to be issued to the Subscriber before a COMMIT statement is …
阅读更多...
JqueryMobile学习之二---对话框

JqueryMobile学习之二---对话框

对话框 通过在链接中添加data-rel”dialog”的属性&#xff0c;可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择 例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下 <p><a href"#about" data-rel&q…
阅读更多...
“leave the world behind”十一快乐出行

“leave the world behind”十一快乐出行

这个十一你打算怎么过&#xff1f;每天睡到自然醒&#xff0c;然后闷在家里埋头上网&#xff1f;选择晴朗好天气出去逛街&#xff0c;四处淘宝贝&#xff0c;淘美食&#xff1f;还是选择一个好的路线出去玩一周&#xff1f;其实行无论宅着还是选择出行&#xff0c;一定要让自己…
阅读更多...
my_atio()代码出错原因，完全代码

my_atio()代码出错原因，完全代码

1、//不明白这么简单的代码为什么会出错#includeint my_atoi(char *str);int main(void){char a[]" 12345";int b0;b my_atoi(a);printf("%d", b);getchar();return 0;}int my_atoi(char *str){char* p str;//char *p; p str;int inter_symbol 1;int …
阅读更多...
最新文章

Copyright @ 2022~2023