仿百度首页登陆框拖拽效果(可视窗口内拖动)

1,069 阅读1分钟
原文链接: blog.csdn.net

版权声明:本文为博主原创文章,未经博主允许不得转载。

慕课网视频地址: www.imooc.com/learn/60




    
        
        Document
        
            * {
                padding: 0px;
                margin: 0px;
            }

            html,
            body {
                font-size: 12px;
                font-family: "微软雅黑";
                width: 100%;
                height: 100%;
            }

            .main {
                text-align: right;
                line-height: 20px;
                margin-right: 40px;
                color: red;
            }

            div.mask {
                width: 100%;
                height: 100%;
                background: #000000;
                opacity: 0.8;
                position: absolute;
                top: 0px;
                left: 0px;
                display: none;
                z-index: 10;
            }

            .login {
                display: none;
                position: absolute;
                background: white;
                top: 0px;
                left: 0px;
                z-index: 11;
                width: 391px;
                border: 1px solid red;
            }

            .login a {
                text-decoration: none;
            }

            .login .title {
                height: 48px;
                line-height: 48px;
                color: black;
                font-size: 16px;
                border-bottom: 1px solid red;
                background: #f5f5f5;
                padding-left: 20px;
                cursor: move;
            }

            .login .close {
                width: 16px;
                height: 16px;
                position: absolute;
                top: 15px;
                right: 20px;
                background: url(img/close_def.png) no-repeat center center;
                border: 1px solid red;
                cursor: pointer;
            }

            .login .close:hover {
                background: url(img/close_hov.png) no-repeat center center;
            }

            .login .content {
                padding: 10px 20px;
            }

            .login .content div {
                padding-top: 15px;
            }

            .login .content div input {
                width: 100%;
                height: 40px;
                border: 1px solid red;
                font-size: 16px;
                color: black;
                text-indent: 35px;
            }

            .login .content div input[type='text'] {
                background: url(img/input_username.png) no-repeat 3px 0px;
            }

            .login .content div input[type='password'] {
                background: url(img/input_password.png) no-repeat 2px 0px;
            }

            .login .content div.now {
                height: 40px;
                padding: 0px;
                line-height: 40px;
                text-align: right;
            }

            .login .content div.sbm {
                height: 50px;
                padding: 0px;
            }

            .login .content div.sbm input {
                background: #3b7ae3;
                border: none;
                font-size: 16px;
                color: #fff;
                border-radius: 5px;
                display: block;
            }