怎么实现登录框鼠标拖拽效果

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录框鼠标拖拽效果</title>

    <style type="text/css">

        body {

            background: url("https://timgsa.百度.com/timg?image&quality=80&size=b9999_10000&sec=1488778794834&di=e97c96dfe7860297d1968c30adc862a2&imgtype=0&src=http%3A%2F%2Fpic1.5442.com%3A82%2F2015%2F0409%2F01%2F15.jpg%2521960.jpg") no-repeat top center #ffffff;

            background-size: 100%;

            padding: 0;

            margin: 0;

            font-size: 12px;

            font-family: "微软雅黑", sans-serif;

        }

        .ui-dia日志 {

            width: 380px;

            position: absolute;

            z-index: 9000;

            top: 100px;

            left: 100px;

            border: 1px solid #d5d5d5;

            background-color: #ffffff;

            /*display: none;*/

        }

        .ui-dia日志-title {

            height: 48px;

            line-height: 48px;

            padding-left: 20px;

            color: #535353;

            font-size: 16px;

            background-color: #f5f5f5;

            border-bottom: 1px solid #efefef;

            cursor: move;

        }

        .ui-dia日志-title-closebutton {

            width: 16px;

            height: 16px;

            display: inline-block;

            position: absolute;

            right: 20px;

            color: #000;

            text-decoration: unset;

        }

        .ui-dia日志-title-closebutton:hover {

           color: #4ca8ff;

        }

        .ui-dia日志-content {

            padding: 15px 20px;

        }

        .ui-dia日志-pt15 {

            padding-top: 15px;

        }

        .ui-dia日志-l40 {

            height: 40px;

            line-height: 40px;

            text-align: right;

        }

        .ui-dia日志-input {

            width: 100%;

            height: 40px;

            margin: 0;

            padding: 0;

            border:1px solid #d5d5d5;

            font-size: 16px;

            color: #c1c1c1;

            text-indent: 25px;

            outline: none;

        }

        .ui-dia日志-input-username {

            background: url("images/input_username.png") no-repeat 2px;

        }

        .ui-dia日志-input-password {

            background: url("images/input_password.png") no-repeat 2px;

        }

        .ui-dia日志-submit {

            width: 100%;

            height: 50px;

            background: #3b7ae3;

            border: none;

            font-size: 16px;

            color: #ffffff;

            outline: none;

            text-decoration: none;

            display: block;

            text-align: center;

            line-height: 50px;

        }

        .ui-dia日志-submit:hover {

            background: #3f81b0;

        }

        .ui-mask {

            width: 100%;

            height: 100%;

            background: #000;

            opacity: 0.4;

            position: absolute;

            top: 0;

            left: 0;

            z-index: 8000;

            display: none;

        }

        .link {

            text-align: right;

            line-height: 20px;

            padding-right: 40px;

        }

    </style>

</head>

 

 

 

<body>

 

    <div class="ui-dia日志" id="dia日志">

        <div class="ui-dia日志-title" id="dia日志Title">

            登录

            <!-- 右上角的关闭按钮 -->


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1818.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • ê
  • Ч
  • =
  • lang