时间戳

首页 > 解决方案 > 复制 UI 模板

html - 复制 UI 模板

问题描述

我正在编写一些 HTML 代码，并为其提供了 UI。我尽力让它看起来尽可能接近。但我坚持使用标题和行间距。这是我的代码：

<div>
  Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
  **All times are Arizona Time**
</div>

<table style="border:1px solid #e9e9e9">
  <thead bgcolor="#8c8c8c" style="border-bottom:1px solid #e9e9e9; padding:none !important">
    <tr>
      <th style="width:auto">10:00AM - 10:30AM (30 MIN)</th>
      <th style="width:auto; float:right">Abc</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div style="line-height:2em">
       Topic:</div></td>
       <td><div>Resume Review</div></td>
    </tr>
    <tr>
    <td><div style="line-height:2em">Phone:</div></td>
      <td>1234567890</td>
    </tr>
    <tr>
    <td><div style="line-height:2em">Email:</div></td>
      <td>abc@gmail.com</td>
    </tr>
    <tr>
    <td><div style="line-height:2em">Student notes:</div></td>
      <td>Hello,
        My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing.
        I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
    </tr>

  </tbody>
</table>

注意：我需要使用内联样式，我不能在我的系统中使用外部 CSS。

这是提供的用户界面：

在此处输入图像描述

如何匹配 UI 并使其具有响应性？

标签： htmlcss

解决方案

您可以使用div.

检查下面的代码。

<div>
  Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
  **All times are Arizona Time**
</div>

<div style="border: 1px solid black">
  <div style="width:100%; background-color:#8c8c8c; height:20px; display:flex;justify-content:space-between;align-items:center">
    <p>10:00AM - 10:30AM (30 mins)</p>
    <p>Data</p>
  </div>

  <table>
    <tbody>
      <tr>
        <td>
          <div style="line-height:2em">
            Topic:</div>
        </td>
        <td>
          <div>Resume Review</div>
        </td>
      </tr>
      <tr>
        <td>
          <div style="line-height:2em">Phone:</div>
        </td>
        <td>1234567890</td>
      </tr>
      <tr>
        <td>
          <div style="line-height:2em">Email:</div>
        </td>
        <td>abc@gmail.com</td>
      </tr>
      <tr>
        <td>
          <div style="line-height:2em">Student notes:</div>
        </td>
        <td>Hello, My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing. I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
      </tr>

    </tbody>
  </table>
</div>

推荐阅读