如何在登录页面的图片中精确放置输入框？

ljdone 2013-12-09 09:03:08

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

...全文

410 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

xuzuning 2013-12-12

打赏
举报

你可借助绘图工具farmework、photoshop都提供可页面生成功能，均可实现精确定位

zhjdg 2013-12-12

打赏
举报

最要紧的是找块好图片

归来 2013-12-12

打赏
举报

引用 4 楼 ljdone 的回复:

将图片置顶，居中，使用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的位置，然后在函数内调整它的位置。

ljdone 2013-12-11

打赏
举报

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

ljdone 2013-12-10