HTML是网页制作的基础语言,常常在网页中用到时间轴。下面是一个简单的HTML日期时间轴代码示例:
<ul> <li> <div class="time">2022-03-15</div> <div class="event">这是一个事件</div> </li> <li> <div class="time">2022-03-25</div> <div class="event">这是另一个事件</div> </li> </ul>
代码中包含一个<ul>标签,它表示无序列表。列表中每一项都是一个<li>标签,里面包含事件发生的日期<div class="time">和事件描述<div class="event">。</li>用于结束每一个列表项。
使用CSS样式表,我们可以美化时间轴。例如:
ul { list-style: none; margin: 0; padding: 0; } li { margin: 20px 0; padding: 0; } .time { font-size: 14px; margin-bottom: 5px; } .event { font-size: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 10px; }
这段代码定义了列表的样式,包括列表项的间距、字体大小和颜色、事件描述的背景颜色和边框圆角半径。
通过HTML和CSS代码,我们可以轻松地创建一个美观而且实用的时间轴,在网页中有效地展示出事件的时间线。
上一篇 jquery 从下往上显示
下一篇 jquery 从左往右划入