给我写一个可拖动悬浮输入框的web前端登录界面

最新推荐文章于 2024-07-12 18:49:24 发布

Xi Zi

最新推荐文章于 2024-07-12 18:49:24 发布

阅读量134

点赞数

文章标签：前端 javascript html css css3

本文链接：https://blog.csdn.net/weixin_35755188/article/details/129515525

版权

本文将介绍如何创建一个使用JavaScript、HTML和CSS3实现的可拖动悬浮登录界面。通过结合HTML结构、CSS样式以及JavaScript事件监听，用户可以轻松地拖动这个轻量级的登录窗口，提供了一种现代且互动的用户体验。

摘要由CSDN通过智能技术生成

<p>当然，可以！以下是一个使用 HTML、CSS 和 JavaScript 编写的可拖动悬浮输入框的登录界面：</p>
<p>```
<!DOCTYPE html></p>
<html>
  <head>
    <style>
      .login-box {
        width: 400px;
        height: 300px;
        background-color: #fff;
        border: 1px solid #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

<pre><code>  .drag-header {
    width: 100%;
    height: 50px;
    background-color: #ccc;
    cursor: move;
  }

  .input-group {
    padding: 20px;
  }

  .form-control {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 10px;
  }

  .btn {
    width: 100%;
    height: 40px;
    background-color: #4caf50;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
  }