我将如何定位网页中的所有内容，以便即使浏览器大小或屏幕分辨率发生变化，所有内容仍将保留在原位

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?

本文关键字：屏幕 保留 浏览器 变化 分辨率 定位 何定位 网页      更新时间：2023-09-26

我正在使用Firefox浏览器和我自己制作的网页制作一个(为了好玩:P(锁定屏幕。 我所做的是安装一个R-kiosk附加功能以强制Firefox全屏启动，将我的网页作为其主页，并将其设置为在启动时运行。我的代码在我的笔记本电脑上工作正常，但我遇到了一个问题。如果浏览器大小或屏幕大小更改，则...井。。。万事。文本框的位置将远离我想要的位置。按钮同样放错了地方。到目前为止，这就是我提出的：

<!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">&nbsp </td></tr>
  <tr>
    <td width="49%" height="45">&nbsp;</td>
    <td width="51%"><input id= "un" type="text" value="MidGuardiaN"/></td>
  </tr>
    <tr>
    <td width="49%">&nbsp;</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%">&nbsp;</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>

希望你能帮我改进这一点。 谢谢。

你需要研究响应式网页设计。

相关文章：