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