Question

我希望能够在HTML中绘制一个矩形，从而为我提供不同的时间范围，并且需要用不同的颜色显示该范围。

Answer 1

我希望我能正确理解你。您是说要在此代码段（？）中使用

吗？

<fieldset>
    <legend style="background-color:#480;color:#fff">Appointment details</legend>

    <label for="appt-time">Time:</label>
    <input type="time" id="appt-time" min="9:00" max="18:00" value="09:30" required />
    <br>
    <span style="color:#999">Office hours: 09:00 to 18:00</span>
    
    <br><br>
    
    <label for="doctor">Doctor:</label>
    <select id="doctor">
        <option value="strange">Strange</option>
        <option value="moreau">Moreau</option>
        <option value="watson">Phibes</option>
    </select>
    
</fieldset>

您只需要写：

<input type="time" value="09:30"/><br><br>

<b>Or with seconds:</b><br>
<input type="time" value="09:30:00" step="15"/>

这是类型为<input>的HTML5 time元素，可创建旨在让用户轻松输入时间（小时和分钟，还可以选择秒）的输入字段。

请参阅： Documentation from <input> element of type time 。

Answer 2

要使用HTML和CSS创建矩形，可以先创建div，然后设置其样式。

HTML

<div id="rectangle">I'm a Rectangle.</div>

CSS：您可以根据自己的喜好调整宽度和高度

#rectangle {width: 300px; height: 20px; background-color: green;}

如何在HTML中绘制可以描述时间范围的矩形？

2 个答案: