加载使div显示右下角 

<style type="text/css">
body { margin:0; padding:0; font:12px/25px 宋体; color:#333; }
.wrap { width:900px; margin:0 auto; }
h2,h4,ul,li,dl,dt,dd { margin:0; padding:0; }
a { color:#00f; }
#mask { position:absolute; background:#fff; display:none; width:400px; height:220px; border:1px solid #719cd1; z-index:1000; }
#mask h2 { background:#719cd1; color:#fff; font-size:14px; line-height:25px; padding:0 5px; }
#mask h2 img { float:right; margin-top:4px; cursor:pointer; }
#mask .loginForm { padding:0 20px; }
#mask .loginForm dl { width:300px; margin:10px auto; line-height:30px; }
#mask .loginForm dl dt { float:left; width:60px; clear:left; }
#mask .loginForm dl dd { margin-left::60px; }
#mask .loginForm dl dd input { margin:3px 0; vertical-align:middle; }
#mask .loginForm hr { height:1px; clear:both; }
#welcome { position:absolute; width:322px; }
#welcome .top { background:url(images/welcome_top.gif); height:110px; text-align:right; }
#welcome .top img { margin-top:75px; margin-right:10px; cursor:pointer; }
#welcome .main { padding:0 25px; background:url(images/welcome_main.gif); height:120px; color:#417a1b; }
#welcome .main h4 { clear:both; font-size:12px; }
#welcome .main ul { }
#welcome .main ul li { float:left; display:inline; width:100px; margin:0 10px; }
#top { text-align:right; }
#header { padding:5px 0; }
#content { height:600px; border:1px solid #b2d5f3; }
</style>
<script type="text/javascript">
window.onload = scrollWelcome;
window.onscroll = scrollWelcome;
window.onresize = scrollWelcome;
function scrollWelcome()
{
    // 欢迎框宽度
    var welcomeWidth = 322;
    // 欢迎框高度，如果welcome-main显示，则高度为welcome-top的高度+welcome-main的高度，否则只为welcome-top的高度。
    var welcomeHeight = document.getElementById("welcome-main").style.display == "none" ? 110 : 110 + 120;
    var welcome = document.getElementById("welcome");
    // 滚动条向左滚动的距离
    var scrollLeft = document.documentElement.scrollLeft;
    // 滚动条向上滚动的距离
    var scrollTop = document.documentElement.scrollTop;
    // 可见宽度
    var clientWidth = document.documentElement.clientWidth;
    // 可见高度
    var clientHeight = document.documentElement.clientHeight;
    // 重新定义欢迎框的坐标
    welcome.style.left = (scrollLeft + clientWidth - welcomeWidth) + "px";
    welcome.style.top = (scrollTop + clientHeight - welcomeHeight) + "px";
}
function Control()
{
    var button = document.getElementById("control-button");
    var welcomeMain = document.getElementById("welcome-main");
    if(welcomeMain.style.display == "none") {
        welcomeMain.style.display = "block";
        button.src = "images/welcome_min.gif";
    } else {
        welcomeMain.style.display = "none";
        button.src = "images/welcome_max.gif";
    }
    scrollWelcome();
}
function showForm()
{
    var maskWidth = 400;
    var maskHeight = 200;
    var mask = document.getElementById("mask");
    // 滚动条向左滚动的距离
    var scrollLeft = document.documentElement.scrollLeft;
    // 滚动条向上滚动的距离
    var scrollTop = document.documentElement.scrollTop;
    // 可见宽度
    var clientWidth = document.documentElement.clientWidth;
    // 可见高度
    var clientHeight = document.documentElement.clientHeight;
    // 重新定义登陆框的坐标
    mask.style.left = scrollLeft + (clientWidth - maskWidth)/2 + "px";
    mask.style.top = scrollTop + (clientHeight - maskHeight)/2 + "px";
    // 显示
    mask.style.display = "block";
}
function HideMask()
{
    var mask = document.getElementById("mask");
    mask.style.display = "none";
}
</script>
</head>

<body>
<div id="mask">
    <h2><img src="images/button_close.gif" onclick="HideMask()" />欢迎登陆／注册</h2>
    <div class="loginForm">
        <dl>
            <dt>用户名：</dt>
            <dd><input type="text" name="useName" /></dd>
            <dt>密　码：</dt>
            <dd><input type="text" name="useName" /></dd>
            <dt></dt>
            <dd><input type="checkbox" id="remember" name="remember" /><label for="remember">记住我的登陆状态</label></dd>
            <dt></dt>
            <dd><input type="button" name="button" value="登陆" /> <a href="#">忘记密码</a></dd>
        </dl>
        <hr />
        没有百度账号？<a href="#">立即注册百度账号</a>
    </div>
</div>
<div id="welcome">
    <div id="welcome-top" class="top">
        <img id="control-button" src="images/welcome_max.gif" onclick="Control()" />
    </div>
    <div id="welcome-main" class="main">
        <h4>百度知道是全球最大的问答型知识分享平台</h4>
        <ul>
            <li>提问题，排疑解惑</li>
            <li>答疑难，助人为乐</li>
            <li>搜知识，学习提高</li>
            <li>加团队，共同进步</li>
        </ul>
        <h4>我们真诚欢迎您的加入，分享属于您的精彩~！</h4>
    </div>
</div>
<div id="top" class="wrap">
    <a href="#" onclick="showForm()">注册</a>｜<a href="#" onclick="showForm()">登录</a>
</div>
<div id="header" class="wrap">
    <img src="images/logo-zhidao.gif" />
</div>
<div id="content" class="wrap">
    
</div>
</body>

 

posted @ 2013-11-16 15:37  914556495  阅读(404)  评论(0)    收藏  举报