[英]How will i position all the content in a webpage so that even if the browser size change or the screen resolution, all will still be in place?
I am making a (for fun :P) a lock screen using Firefox browser and my own made webpage. 我正在使用Firefox浏览器和我自己制作的网页来制作(出于娱乐目的:P)锁定屏幕。 what i did is install a R-kiosk adds on to force Firefox to launch in full screen, made my webpage its homepage, and set it to run at start up.
我所做的是安装了R-kiosk,以强制Firefox以全屏方式启动,将我的网页设置为主页,并设置为在启动时运行。 My code works fine in my laptop, but i had a problem.
我的代码可以在笔记本电脑上正常工作,但是我遇到了问题。 If the browser size or screen size is changed, so does... well... everything.
如果更改了浏览器的大小或屏幕的大小,那么……一切也都会改变。 the text box will be positioned far from where i want.
文本框将放置在远离我想要的位置。 the button is just as misplaced.
按钮也放错了位置。 so far this is what i've come up:
到目前为止,这是我提出的:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LogIn</title>
<style>
body{margin:0; padding: 0;}
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
table {
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function cia(){
if ((document.getElementById('pass').value == "amethyst")){
document.getElementById('audio').play();
document.login.src="loading.gif";
setTimeout('window.close()',8000);
}
else{
alert('Error! Invalid combination. Please try again.');
location.reload();
}
}
</script>
</head>
<body><div align="center"><img src="img.jpg" class="bg"/></div><form name="formL" id="formL"><table>
<tr><td height="413">  </td></tr>
<tr>
<td width="49%" height="45"> </td>
<td width="51%"><input id= "un" type="text" value="MidGuardiaN"/></td>
</tr>
<tr>
<td width="49%"> </td>
<td width="51%"><input id="pass" name="pass" type="password" value="" autofocus="autofocus" onKeydown="Javascript: if (event.keyCode==13)cia();"/></td>
</tr>
</table>
<table>
<tr>
<td width="49%"> </td>
<td width="51%"><a href="javascript:;" onClick="cia()" > <img name="login" src="login.png"/></a></td>
</tr>
</table>
</form>
<audio id="audio" src="welcome.mp3" ></audio>
</body>
</html>
Hope you can help me improve this. 希望您能帮助我改善这一点。 thanks.
谢谢。
您需要研究响应式Web设计 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.