使用 HTML 创建类似 GUI 的界面

Question

我正在尝试创建一个可调整大小的 HTML 页面来模仿 Java 小程序时钟布局，但我不确定我是否以正确的方式实现这一点。

下面的这三个时钟图片是我现在正在尝试创建的。目前，我使用

div

、

margins

和

padding

来使用 CSS 布局时钟，但由于每行的字体大小都不同，我使用 vmin 字体来处理自动调整大小，但结果好坏参半。我一直在网上寻找教程或示例来解决如何做到这一点但没有成功，因为这些示例正在调整整个字体大小相同的文本段落的大小，或者正在使用图像。

有人知道解决此类问题的教程网站或示例吗？也许我应该使用

canvas

或其他东西来代替

div

标签。

这是我的 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>

Answer 1

我建议查看 bootstrap 在页面上布局元素。您可以轻松创建一个简单的布局，并且它将具有响应能力。

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

Answer 2

我重新阅读了 vs 字体描述并重新设计了我的 css 表。这会调整字体大小，但即使我使用相同的终端屏幕，Linux 机器上的负边距与 PC 上的负边距看起来并不相同。不过比以前好多了。

<!DOCTYPE html>
<html>
<style>

body {
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
    color: #fff;
    background: #000;
    margin: 2vw 10vw 2vw 10vw;
}

span {
    white-space: nowrap;    /* Specify that the text in element will never wrap */
}

.header {
    font-size: 4vw;
    font-weight: bold;  /* bold font */
    color: lightGray;   // color for tdrs/site
}
.header-split      { 
    display:block;
    margin-left:15vw;
}
.header-split span {
    display:block;
    float:right;
    width:30%;
}
#header-ul {
    border-bottom: 3px solid lightgrey
}

#rm {
    text-align: center;
    margin-left:-10vw;
}
.siteTdrs {
    font-size: 3vw;
    font-weight: bold;  /* bold font */
    color: lightGray;   // color for tdrs/site
}
.mission {
    font-size: 4vw;
}

.clock {
    font-size: 8vw;
    text-align: center;
}

.terraColor {
    color: #00ff00; // GREEN
}
.aquaColor {
    color: #00ffff; // CYAN
}
.auraColor {
    color: #ffc800; // ORANGE
}

</style>

<body>
    <div id="wrapper">
      <div id="header-ul"><div class="header header-split">AOS<span>LOS</span></div></div>

      <div id="rm" ><span id="terraRelay" class="siteTdrs">TDE</span>&nbsp;&nbsp;<span class="mission terraColor">TERRA</span></div>
      <div id="terraTime" class="clock terraColor"><span>00:00:00&nbsp;&nbsp;00:00:00</span></div>

      <div id="rm" ><span id="aquaaRelay" class="siteTdrs">SG1</span>&nbsp;&nbsp;<span class="mission aquaColor">AQUA</span></div>
      <div id="aquaTime" class="clock aquaColor"><span>00:00:00&nbsp;&nbsp;00:00:00</span></div>

      <div id="rm" ><span id="auraRelay" class="siteTdrs">TDW</span>&nbsp;&nbsp;<span class="mission auraColor">AURA</span></div>
      <div id="auraTime" class="clock auraColor"><span>00:00:00&nbsp;&nbsp;00:00:00</span></div>
    </div>
    <p id="Msgs">this is a error</p>
</body>

</html>

使用 HTML 创建类似 GUI 的界面

问题描述投票：0回答：2

2个回答

最新问题

使用 HTML 创建类似 GUI 的界面

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2