Блог

Главная - Вопросы по программированию - Реплицируйте шаблон пользовательского интерфейса

Реплицируйте шаблон пользовательского интерфейса

#html #css

Вопрос:

Я работаю над некоторым HTML — кодом, для которого мне был предоставлен пользовательский интерфейс. Я старался сделать все возможное, чтобы это выглядело как можно ближе. Но я застрял с заголовками и интервалами между строками. Вот мой код:

 <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 в своей системе.

Вот предоставленный пользовательский интерфейс:

введите описание изображения здесь

Как я могу соответствовать пользовательскому интерфейсу, а также сделать его отзывчивым?

Комментарии:

1. В чем ваша настоящая проблема? Вы говорите, что у вас проблема с межстрочным интервалом, но вы указываете line-height: 2em , так что это просто потому, что вы не нашли правильные значения? Кроме того, каковы ваши ограничения? Учитывая, что вы не можете использовать внешний CSS, имеете ли вы контроль над структурой HTML или вам нужно работать со структурой, которой вы поделились? Это не то место, где можно просто попросить кого-нибудь передать вам заполненный код!

Ответ №1:

Вместо использования таблицы для заголовка вы можете использовать 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>
Метки: