JS练习一：拖动对话框

最新推荐文章于 2023-06-02 19:51:36 发布

wind皮皮

最新推荐文章于 2023-06-02 19:51:36 发布

阅读量780

点赞数 1

文章标签： html css js javascript

本文链接：https://blog.csdn.net/langyixuan/article/details/106017938

版权

拖动对话框效果点击CLICK HERE弹出登录界面对话框鼠标按下即可拖动对话框点击关闭按钮即可关闭对话框代码：CSS+HTML代码<head> <style> * { margin: 0; padding: 0; font-family: sans-serif; } body { background-color: rg

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

拖动对话框效果

点击CLICK HERE
在这里插入图片描述点击弹出登录界面对话框
鼠标按下即可拖动对话框
点击关闭按钮即可关闭对话框
代码：
CSS+HTML代码

<head>
   <style>
        * {
   
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        body {
   
            background-color: rgb(241, 241, 241);

        }

        .login-header {
   
            width: 142px;
            margin: 100px auto;
        }

        .login-header a {
   
            text-align: center;
            text-decoration: none;
            color: black;
            font-weight: 700;
            font-size: 20px;
            border: 2px solid #000;
            padding: 10px;
        }

        .login-header a:hover {
   
            color: darksalmon;
        }

        .login-box {
   
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%

最低0.47元/天解锁文章

wind皮皮

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS练习一：拖动对话框

拖动对话框效果点击CLICK HERE弹出登录界面对话框鼠标按下即可拖动对话框点击关闭按钮即可关闭对话框代码：CSS+HTML代码<head> <style> * { margin: 0; padding: 0; font-family: sans-serif; } body { background-color: rg
复制链接

扫一扫