日期:2014-05-16  浏览次数:20853 次

如何在登录页面的图片中精确放置输入框?
如下图的登录图片,图中预留了用户名、密码、确定按钮等位置,请问如何把我的户名、密码输入框精确放到图片的位置中?如果图片在各种分辨率的显示下居中的话,户名、密码输入框的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.documentEle