我正试着打印自动点唱机的纸条.我编写了一些代码,生成html页面来显示条带,然后您可以打印它们.自动存储塔有 Select 按钮,如ABCDEFGHJK和1234567890.为了更容易地装入带条的插槽,我想在卡的角落打印该指示符,一旦插入它,它将不再可见.在您剪切所有打印条并将其插入正确的插槽后,这会更容易.

但无论我做什么,打印这个指示符都会移动条带上的文本,这当然不是我想要的.

到目前为止,我的代码如下所示:

<!doctype html>
<html>

<head>
  <style type="text/css">
    .card {
      width: 3in;
      height: 1in;
      background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
      background-size: 3in 1in;
    }
    
    .line {
      width: 3in;
      height: 7mm;
      text-align: center;
      font-family: Georgia, serif;
    }
    
    .cardnumber {
      font-size: 5px;
      top: auto;
      z-index: 100;
    }
  </style>
</head>

<body>

  <table cellspacing="0" cellpadding="0">
    <tr>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td class="line">Let It Be</td>
          </tr>
          <tr>
            <td class="line">Beatles</td>
          </tr>
          <tr>
            <td class="line">Yellow Submarine</td>
          </tr>
        </table>
        <div class="cardnumber">H1<br>H2</div>
      </td>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <div class="cardnumber">J7<br>J8</div>
            <td class="line">Bad</td>
          </tr>
          <tr>
            <td class="line">Michael Jackson</td>
          </tr>
          <tr>
            <td class="line">Liberian Girl</td>
          </tr>
        </table>
      </td>

    </tr>
  </table>

</body>

</html>

我也试过各种各样的position: absolutepostion: relative,但我做不好.

有什么 idea 可以改变吗?

推荐答案

首先要做几件事:

  1. <table/>标签实际上是为tabular data设计的;将其用于其他任何事情,包括布局,都不是很理想.考虑到这些内容似乎不是表格,我认为这不是标记的语义用法.虽然这可能只是为了打印一些东西,但即使在这种情况下,您仍然会使用<table/>标签的布局方法.
  2. 以这种方式定位内容,并将其叠加在某种背景上,在这种背景下,位置至关重要,这似乎是一个很难的前端挑战.

当我接受这样的挑战时,我通常更喜欢看看是否有一种方法可以用代码生成设计,或者是否可以将assets资源 分割成组件以简化编码方法.这就是说,可以在背景图像上以您正在寻求的方式执行此操作.我的建议是在这种情况下利用absolute positioning.

.cardwrapper {
  display: flex;
}

.card {
  width: 3in;
  height: 1in;
  background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
  background-size: 3in 1in;
  position: relative;
}

.info {
  position: absolute;
  width: 100%;
  text-align: center;
}

.title {
  top: .09in;
}

.artist {
  top: .39in;
}

.album {
  top: .666in;
}

.cardnumber {
  position: absolute;
  bottom: 0;
  font-size: 5px;
}
<div class="cardwrapper">
  <div class="card">
    <div class="info title">Let It Be</div>
    <div class="info artist">Beatles</div>
    <div class="info album">Yellow Submarine</div>
    <div class="cardnumber">H1<br>H2</div>
  </div>
  <div class="card">
    <div class="info title">Bad</div>
    <div class="info artist">Michael Jackson</div>
    <div class="info album">Liberian Girl</div>
    <div class="cardnumber">J7<br>J8</div>
  </div>
</div>

我看了一下位置——你可以根据需要进行调整.您可以在.cardwrapper上使用不同的显示模式来更改卡本身的布局方式(我使用了flex here).从你的问题中看不出你想要卡号在哪里——我把它放在右下角,但你可以看到它是如何调整的.

我没有花太多时间决定卡片内容最具语义的元素是什么——我的直觉可能是<dl>/<dt>/<dd>个元素,但你可以做出决定.此外,如果这真的只是为了打印,那么它可能就不那么重要了.

Html相关问答推荐

在屏幕右上角放置一个响应圆圈

分区位置:绝对由sibling 分区的差距移动

按钮的字体重量在鼠标悬停时随过渡而变化

为什么html复选框总是具有只读属性?

在Apps Script中连接CSS与HTML

如何在angular 17.2中使用routerLink解决此错误

如何将FlexBox项目zoom 到其包含图像的大小

仅包含名为X的子元素的元素的XPath?

如何使用html和css将两个项目垂直对齐

使用无限数量的元素创建特定的CSS网格

让多对图像在各自的div中叠加

现代网络浏览器可以并行下载哪些类型的网络资源?还有,什么东西不能并行下载?

如果DIV没有特定的sibling 姐妹,则以CSS为目标

列表项文本在占据剩余空间之前在标记下换行

下划线在 Bootstrap 5 导航链接下无法正常工作

从 Vue 应用程序的容器元素渲染 HTML

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

将 HTML 元素粘贴到容器底部,而不剪裁其顶部

标签背景 colored颜色 的 html 和 css 技巧说明

提交前的验证表单未显示任何验证消息?