欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

怎么在登录页面的图片中精确放置输入框

更新时间: 2014-01-05 00:52:42 责任编辑: Author_N1

 

如何在登录页面的图片中精确放置输入框?
如下图的登录图片,图中预留了用户名、密码、确定按钮等位置,请问如何把我的户名、密码输入框精确放到图片的位置中?如果图片在各种分辨率的显示下居中的话,户名、密码输入框的left位置应该是不一样的吧,如何兼容各种分辨率呢?请各位高人指教!


--参考方法--
先把大图的的DIV的css设置为position:relative,再用position:absolute定位一个DIV,最后就在这个DIV中写form表单就是了。
--参考方法--
和分辩率也没啥关系吧! 
背景图片写在body里,background:url(xx.jpg) no-repeat center top
你内容容器,直接写宽度,然后margin:0 auto;这样不就一直在中间的么?

--参考方法--
引用:
将图片置顶,居中,使用DIV可以精确放置输入框和按钮了。
但是我还有一个疑问:
如果图片是800*600,屏幕是1024*768,为美观起见,图片是上下左右居中,即图片的TOP位置是随着屏幕分辨率高度变化的,这样的情况下,DIV如何在不同分辨率下都精确对准输入的位置呢?
DIV能根据屏幕的宽度上下居中吗?

如果找不到别的办法,试一下这个:
定义一个div包含用户名和密码输入,然后用js动态判断div的位置:定义一个js函数响应window.onresize消息,在函数内计算得出页面大小:

        function onresize() //函数:获取尺寸
        {
            var winWidth = 0;
            var winHeight = 0;
             //获取窗口宽度
             if (window.innerWidth)
                   winWidth = window.innerWidth;
             else if ((document.body) && (document.body.clientWidth))
                   winWidth = document.body.clientWidth;
             //获取窗口高度
             if (window.innerHeight)
                   winHeight = window.innerHeight;
             else if ((document.body) && (document.body.clientHeight))
                   winHeight = document.body.clientHeight;
           
             //通过深入Document内部对body进行检测,获取窗口大小
             if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
             {
                 winHeight = document.documentElement.clientHeight;
                 winWidth = document.documentElement.clientWidth;
             }
             
           //***增加自己的处理
       }



因为div大小固定,又上下左右居中,所以可以计算得到div的位置,然后在函数内调整它的位置。
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:52:42
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/884/
本文WWW.DOC100.NET DOC100.NET版权所有。