实现登录框

今天课程要求实现百度的登录框功能,晚上花费了两个小时终于搞定,直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        font-size: 14px/18px arial, sans-serif, "Microsoft YaHei", tahoma;
    }
    
    li {
        list-style: none;
    }
    
    input {
        outline: 0;
    }
    
    html,
    body {
        height: 1000px;
    }
    
    .ul {
        padding: 10px;
    }
    
    .mask {
        display: none;
        position: relative;
        width: 390px;
        height: 502px;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        border: 1px solid #D9D9D9;
    }
    
    .head {
        height: 47px;
        width: 100%;
        background: #F7F7F7;
        position: relative;
    }
    
    .head_title {
        width: auto;
        height: 18px;
        font-size: 16px;
        font-family: 宋体;
        font-weight: bold;
        text-indent: 50px;
        margin-right: 29px;
        display: block;
        text-overflow: ellipsis;
        text-align: left;
        box-sizing: content-box;
        background: url("https://passport.baidu.com/passApi/img/baidu_logo_24_718a6c4.png") 18px 8px no-repeat;
        padding: 15px 0px 13px;
        overflow: hidden;
    }
    
    .close {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 20px;
        top: 16px;
    }
    
    .close a {
        width: 16px;
        height: 16px;
        display: block;
        background: url('./images/icon.png') -10px -6px no-repeat;
    }
    
    .contain {
        transition: .3 ease;
    }
    
    .login {
        padding: 0 20px;
    }
    
    .phone_login {
        margin: 10px 0;
        text-align: right;
    }
    
    .color {
        font-size: 13px;
        background: url('./images/phone.png') no-repeat;
        padding-left: 15px;
    }
    
    .color:hover {
        color: #2e7fdb;
        text-decoration: underline;
    }
    
    .form .input {
        display: block;
        position: relative;
        height: 16px;
        padding: 12px 35px;
        border: 1px solid #ddd;
        font-size: 14px;
        color: #666;
    }
    
    .input {
        width: 276px;
    }
    
    .form .u {
        width: 350px;
        position: relative;
        margin-bottom: 15px;
    }
    
    .l_username,
    .l_password {
        display: block;
        position: absolute;
        top: 8px;
        left: 6px;
        width: 0;
        height: 24px;
        overflow: hidden;
        padding: 0 0 0 24px;
        background: url('./images/login.png') 0 -69px no-repeat;
        z-index: 11;
    }
    
    .l_password {
        background-position: 0 -147px;
    }
    
    .verify {
        display: flex;
    }
    
    .verifyImg {
        border: 1px solid #ddd;
        margin-right: auto;
        margin-left: auto;
        width: 100px;
        height: 42px;
    }
    
    .verifyCode {
        width: 160px;
        padding: 0 0 0 15px;
        margin-right: 10px;
        border: 1px solid #ddd;
    }
    
    .change {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    
    .check {
        display: flex;
        font-size: 14px;
    }
    
    .auto_log {
        margin-right: auto;
    }
    
    .checkbox {
        vertical-align: middle;
    }
    
    .button_submit {
        width: 350px;
        background-color: #4490f7;
        display: block;
        height: 48px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        color: #fff;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    
    .reg {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 55px;
    }
    
    .auth {
        border-top: 1px solid #eee;
        padding: 8px 0 5px 15px;
    }
    
    .qq,
    .wb {
        display: block;
        background: url('./images/icon.png') -73px -127px no-repeat;
        height: 32px;
        width: 38px;
        overflow: hidden;
    }
    
    .auth_ul {
        padding: 8px 0 0;
        display: flex;
    }
    
    .wb {
        background-position: 0px -127px;
        margin-left: 15px;
    }
    
    .qc {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 0;
        bottom: 0;
        cursor: pointer;
        background: url('./images/icon.png') no-repeat -129px -47px;
        z-index: 21;
        overflow: hidden;
    }
    
    .code {
        z-index: 11;
        position: absolute;
        left: 0;
        top: 47px;
        width: 390px;
        height: 450px;
        background: #fff;
        transition: .3 ease;
        display: none;
    }
    
    .code_con {
        width: 160px;
        margin: 50px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .code_title {
        margin-bottom: 25px;
        font-size: 16px;
    }
    
    .code_img {
        width: 160px;
        height: 160px;
        text-align: center;
        line-height: 160px;
    }
    
    .code_img img {
        width: 135px;
        height: 135px;
    }
    </style>
</head>

<body>
    <nav>
        <ul class="ul">
            <li><a href="#" id="login">登录</a></li>
        </ul>
    </nav>
    <div class="mask" id="mask">
        <div class="head">
            <div class="head_title">
                登录百度账号
            </div>
            <div class="close">
                <a href="#" id="close"></a>
            </div>
        </div>
        <!--con sta-->
        <div class="contain" id="contain">
            <div class="login">
                <div class="phone_login">
                    <a class="color" href="#">短信快捷登录</a>
                </div>
                <form action="#" method="post" class="form">
                    <div class="div_username u">
                        <label for="username" class="l_username"></label>
                        <input type="text" name="username" class="username input" placeholder="手机/邮箱/用户名">
                    </div>
                    <div class="div_password u">
                        <label for="password" class="l_password"></label>
                        <input type="text" name="password" class="password input" placeholder="密码">
                    </div>
                    <div class="verify u">
                        <input type="text" name="verifyCode" class="verifyCode" maxlength="6" placeholder="验证码">
                        <div class="verifyImg">![](./images/genimage.png)</div>
                        <div class="color change" style="background: none;">换一张</div>
                    </div>
                    <div class="u check">
                        <div class="auto_log">
                            <input type="checkbox" class="checkbox" checked="checked">
                            <label class="">下次自动登录</label>
                        </div>
                        <div><a href="#" target="_blank">登录遇到问题</a></div>
                    </div>
                    <input type="submit" value="登录" class="button_submit">
                </form>
                <div class="reg">
                    <a class="color change" style="background: none;" href="#" target="_blank">立即注册</a>
                </div>
            </div>
            <div class="auth">
                <div class="" style="font-size: 14px;">可以使用以下方式登录</div>
                <div class="auth_logo">
                    <ul class="auth_ul">
                        <li>
                            <a href="#" class="qq"></a>
                        </li>
                        <li>
                            <a href="#" class="wb"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--con end-->
        <!--code sta-->
        <div class="code" id="code">
            <div class="code_con">
                <h2 class="code_title">手机扫描,安全登陆</h2>
                <div class="code_img">
                    ![](./images/qrcode.png)
                </div>
                <p style="font-size:12px;">请使用手机百度app扫描登录</p>
            </div>
        </div>
        <!--code sta-->
        <div class="qc" id="qc"></div>
    </div>
    <script>
    var mask = document.getElementById("mask");
    var login = document.getElementById("login");
    var close = document.getElementById("close");
    var qc = document.getElementById("qc");
    var contains = document.getElementById("contain");
    var code = document.getElementById("code");
    var log = true;
    close.onclick = function() {
        mask.style.display = "none";
    };
    login.onclick = function() {
        mask.style.display = "block";
    };
    qc.onclick = function() {
        if (log) {
            contains.style.display = "none";
            code.style.display ="block";
            log = false;
        }else{
            contains.style.display = "block";
            code.style.display ="none";
            log = true;
        }
        
    };

   
    </script>
</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏伪君子的梦呓

ScreenToGif --好用的gif录屏/剪辑软件

引言 遇到想向别人展示一下神操作,或者想向让别人看一下某些效果时,一张图片说不清,弄个视频又太麻烦,这可怎么好呢?其实一个ScreenToGif就可以解决了。 ...

3125
来自专栏菩提树下的杨过

诡异的【session丢失】和【<img src="">标签】

     项目发布到服务器上面了,但是客户在使用的时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息...

2465
来自专栏Nian糕的私人厨房

WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

833
来自专栏Coding迪斯尼

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

1682
来自专栏黑泽君的专栏

Mark Down Pad2在 windows 10 下的安装注册以及 Mark Down Pad2 报错分析

  Mark Down Pad是Windows下的一个多功能Makrdown编辑器。即时看到你的Makrdown文件,当你创建它们的时候,看起来就像是在HTML...

931
来自专栏极乐技术社区

五个套路看懂微信小程序开发(上)

你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

2779
来自专栏移动开发之家

从Android到React Native开发(一、入门)

 大家好┏ (^ω^)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。

992
来自专栏华仔的技术笔记

Xcode 7 自动测试XCTestCase

4007
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

5165
来自专栏葡萄城控件技术团队

UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界...

2235

扫码关注云+社区

领取腾讯云代金券