gpt4 book ai didi

html - 使用 html 创建类似 GUI 的界面

转载 作者:行者123 更新时间:2023-11-28 06:13:12 25 4
gpt4 key购买 nike

我正在尝试创建一个可调整大小的 html 页面来模仿 java applet 时钟布局,但不确定我是否以正确的方式处理这个问题。下面这张 3 时钟的图片是我现在要创建的。目前我使用 div、margins、padding 来使用 css 布局 1 个时钟,但是由于每行的字体大小都不同,我使用 vmin 字体来处理自动调整大小;但结果好坏参半。我一直在网上寻找教程或示例来解决如何解决此问题但没有成功,因为这些示例正在调整整个文本段落或图像的字体大小。

有人知道解决此类问题的教程网站或示例吗?也许我应该使用 Canvas 或其他东西而不是 div 标签来做这件事。谢谢。

three clocks

这是我的 1 个时钟页面(减去所有 css 内容):

<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="AOS/LOS Clock" />
<title>AOS/LOS Clock</title>
<link rel="stylesheet" type="text/css" href="css/mc_style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&file=input/aos_times_json;\"></script>
<script type="text/javascript" src="js/mc_engine.js"></script>
</head>

<body id="body">
<div id="wrapper">
<div id="clockAOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Acquisition of Signal</span></div>
<div id="relay" class="siteTdrs"></div>
<div id="clockLOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Loss of Signal</span></div>
</div>
<p id="Msgs"></p>
</body>
</html>

最佳答案

我建议查看 bootstrap用于在页面上布置元素。您可以轻松地创建一个简单的布局,并且它会响应。

就字体大小而言,无法在所有浏览器和设备上显示相同的页面。即使使用相当常见的标准像素,在视网膜显示器上也会有不同的结果。 Read this了解有关字体大小的更多信息。

关于html - 使用 html 创建类似 GUI 的界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36038227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com