不会写怎么办呢-慕课网

首页课程实战体系课手记专栏慕课教程

不会写怎么办呢

来源：4-3 实战题

慕先生7084551

2017-05-04 22:43

。。。。。

写回答关注

1回答

田心枫: 2017-05-04 22:44:29

已采纳

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>慕课网-拖拽效果</title>

<style type="text/css">

    body{background: url(images/baidu_demo.png) #fff top center no-repeat;
        padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑";
    }

    /*登录浮层组件*/
    .ui-dialog{ 
        width: 380px;height: auto;
        position: absolute;z-index: 9000;
        top: 100px;left: 100px;
        border: 1px solid #D5D5D5;background: #fff;
    }

    .ui-dialog a{text-decoration: none;}

    /*标题栏区域*/
    .ui-dialog-title{
        height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
        border-bottom: 1px solid #efefef;background: #f5f5f5;
        cursor: move;
        user-select:none;
    }

    /*关闭按钮设置*/
    .ui-dialog-closebutton{
        width: 16px;height: 16px;display: block;
        position: absolute;top: 12px;right: 20px;
        background: url(images/close_def.png) no-repeat;cursor: pointer;

    }
    .ui-dialog-closebutton:hover{background:url(images/close_hov.png);}

    /*内容区域*/
    .ui-dialog-content{
        padding: 15px 20px;
    }

    /*每行元素可能需要的样式*/
    .ui-dialog-pt15{
        padding-top: 15px;
    }
    .ui-dialog-l40{
        height: 40px;line-height: 40px;
        text-align: right;
    }

    /*输入框公用的样式*/
    .ui-dialog-input{
        width: 100%;height: 40px;
        margin: 0px;padding:0px;
        border: 1px solid #d5d5d5;
        font-size: 16px;color: #c1c1c1;
        text-indent: 25px;
        outline: none;
    }

    /*两个输入框的icon设置*/
    .ui-dialog-input-username{
        background: url(images/input_username.png) no-repeat 2px ;
    }
    .ui-dialog-input-password{
        background: url(images/input_password.png) no-repeat 2px ;
    }

    /*提交按钮的样式*/
    .ui-dialog-submit{
        width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
        outline: none;text-decoration: none;
        display: block;text-align: center;line-height: 50px;
    }
    .ui-dialog-submit:hover{
        background: #3f81b0;
    }


    .ui-mask{ 
        width: 100%;height:100%;background: #000;
        position: absolute;top: 0px;height: 0px;z-index: 8000;
        opacity:0.4; filter: Alpha(opacity=40);
    }

    .link{
        text-align: right;line-height: 20px;padding-right: 40px;
    }

</style>
</head>
<body >
<div class="ui-dialog" id="dialog">

<div class="ui-dialog-title" id="dialogTitle">
            登录通行证
<a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a>
</div>
<div class="ui-dialog-content">


<div class="ui-dialog-pt15 ui-dialog-l40">
<input type="text" value="手机/邮箱/用户名" class="ui-dialog-input ui-dialog-input-username">
</div>
<div class="ui-dialog-pt15 ui-dialog-l40">
<input type="text" value="密码" class="ui-dialog-input ui-dialog-input-password">
</div>
<div class=" ui-dialog-l40 ">
<a href="#">忘记密码</a>
</div>
<div>

<a href="#" class="ui-dialog-submit">登录</a>

</div>
<div class="ui-dialog-l40">
<a href="#">立即注册</a>
</div>
</div>
</div>
<div class="link">
<a href="javascript:showDialog();">登录</a>
</div>
<div class="ui-mask" id="mask" onselectstart="return false"></div>

<script type="text/javascript">

 //  获取元素对象  
    function g(id){ return document.getElementById(id);}

    //  自动居中元素（el = Element）
    function autoCenter( el ){
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;

        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (bodyW - elW)/2 + 'px';
        el.style.top = (bodyH-elH)/2 + 'px';

    }

    //  自动扩展元素到全部显示区域
    function fillToBody( el ){
        el.style.width  = document.documentElement.clientWidth  +'px';
        el.style.height = document.documentElement.clientHeight + 'px';
    }

</script>

</body>
</html>

0 0

鼠标拖拽效果

用你的鼠标任意拖拽屏幕上的弹出窗口，了解把元素设置为可拖拽的原理

25993 学习 · 142 问题

查看课程

相似问题

当拖动浮动层时鼠标会选中中浮动层，这怎么办

回答 1

老师计算限定方位的方法很赞，自己就怎么想不到呢

回答 5

为什么一定要用addEventListener不能直接用onmousedown呢

回答 2

完成这个怎么拖不动啊可能是什么情况啊

回答 3

为什么要写fullToBody这个函数？

回答 4

打开慕课网App查看更多内容