创建仅使用CSS的时间表！-DEV365 开发者社区

有时我们不必需要非常复杂的东西，但是我们希望一些干净的东西来假装日期。我建议您仅在HTML代码中使用没有寄生版的CSS有一个时间表，以使一些超级简单。

注意：被打断的CSS的魔力，您可以在不合并绞线的情况下测量时复制和粘贴CSS提取物，它将完美地工作！因此，借此机会专注于ð
的情况

基础：数据

因此，在我的示例中，我将从Nintendo Consoles（来自NES）的郊游列表开始，因为为什么不呢？（然后我喜欢Vide OS及其历史ð）。所以这是这个原始列表：

Fin octobre 1987 Nintendo Entertainment System
28 septembre 1990 Game Boy
11 avril 1992 Super Nintendo
Fin 1996 Game Boy Pocket
1er septembre 1997 Nintendo 64
23 novembre 1998 Game Boy Color
22 juin 2001 Game Boy Advance
3 mai 2002 GameCube
28 mars 2003 Game Boy Advance SP
11 mars 2005 Nintendo DS
4 novembre 2005 Game Boy Micro
11 juin 2006 Nintendo DS Lite
7 décembre 2006 Wii
3 avril 2009 Nintendo DSi
5 mars 2010 Nintendo DSi XL
25 mars 2011 Nintendo 3DS
28 juillet 2012 Nintendo 3DS XL
30 novembre 2012 Wii U
3 mars 2017 Nintendo Switch
20 septembre 2019 Nintendo Switch Lite
8 octobre 2021 Nintendo Switch OLED

如何显示一组日期？

我们将找到最多的选项将是表。例如，我们在WikipéDia（我的捐赠的来源）上找到的选择，但并不是视觉上最好的。此外，我们只有在前面放置的日期和名称，因此我们将在两列中有一张桌子，而不是真正的。

我个人建议您使用列表。在html中，我们有针对â<ul>的标签（=未执行的列表）和<li>（=列表项目）：

<ul>
    <li>Fin octobre 1987 Nintendo Entertainment System</li>
    <li>28 septembre 1990 Game Boy</li>
    <li>11 avril 1992 Super Nintendo</li>
    <li>Fin 1996 Game Boy Pocket</li>
    <li>1er septembre 1997 Nintendo 64</li>
    <li>23 novembre 1998 Game Boy Color</li>
    <li>22 juin 2001 Game Boy Advance</li>
    <li>3 mai 2002 GameCube</li>
    <li>28 mars 2003 Game Boy Advance SP</li>
    <li>11 mars 2005 Nintendo DS</li>
    <li>4 novembre 2005 Game Boy Micro</li>
    <li>11 juin 2006 Nintendo DS Lite</li>
    <li>7 décembre 2006 Wii</li>
    <li>3 avril 2009 Nintendo DSi</li>
    <li>5 mars 2010 Nintendo DSi XL</li>
    <li>25 mars 2011 Nintendo 3DS</li>
    <li>28 juillet 2012 Nintendo 3DS XL</li>
    <li>30 novembre 2012 Wii U</li>
    <li>3 mars 2017 Nintendo Switch</li>
    <li>20 septembre 2019 Nintendo Switch Lite</li>
    <li>8 octobre 2021 Nintendo Switch OLED</li>
</ul>

好吧，我们开始构建一点，但这仍然不是疯狂：我们没有区分日期，我们有一个床单。

康德霍内忘记的标签：`<time>`

此标签已经消失了几年（在Firefox到2013年，自2017年底以来一直在Chrome中使用），我们几乎不使用它是一个很棒的工具！总体而言，它是据信列出我们内容的标签之一。这里的想法是指出文本将解决日期，并通过datetime属性给出我们日期的更东方指示。

在我们的情况下，我们可以将Fin octobre 1987 Nintendo Entertainment System转换为<time datetime="1987-10">Fin octobre 1987</time> Nintendo Entertainment System或28 septembre 1990 Game Boy转换为<time datetime="1990-09-28">28 septembre 1990</time> Game Boy。有很多授权的日期格式，文本显示完全免费。但是我们可以想象，能够将网络扩展扩展为格式重新格式化日期，这在此系统的页面中更适合我们（我们记得在法国使用dd/MM/yyyy格式的日期，在美国，在日本是yyyy/MM/dd，它是yyyy-MM-dd10 ）。

在任何情况下，我都建议我们像这样重新塑造我们的清单：

<ul>
    <li><time datetime="1987-10">Fin octobre 1987</time> Nintendo Entertainment System</li>
    <li><time datetime="1990-09-28">28 septembre 1990</time> Game Boy</li>
    <li><time datetime="1992-04-11">11 avril 1992</time> Super Nintendo</li>
    <li><time datetime="1996">Fin 1996</time> Game Boy Pocket</li>
    <li><time datetime="1997-09-01">1er septembre 1997</time> Nintendo 64</li>
    <li><time datetime="1998-11-23">23 novembre 1998</time> Game Boy Color</li>
    <li><time datetime="2001(06-22)">22 juin 2001</time> Game Boy Advance</li>
    <li><time datetime="2002-05-03">3 mai 2002</time> GameCube</li>
    <li><time datetime="2003-03-28">28 mars 2003</time> Game Boy Advance SP</li>
    <li><time datetime="2005-03-11">11 mars 2005</time> Nintendo DS</li>
    <li><time datetime="2005-11-04">4 novembre 2005</time> Game Boy Micro</li>
    <li><time datetime="2006-06-11">11 juin 2006</time> Nintendo DS Lite</li>
    <li><time datetime="2006-12-07">7 décembre 2006</time> Wii</li>
    <li><time datetime="2009-04-03">3 avril 2009</time> Nintendo DSi</li>
    <li><time datetime="2010-03-05">5 mars 2010</time> Nintendo DSi XL</li>
    <li><time datetime="2011-03-25">25 mars 2011</time> Nintendo 3DS</li>
    <li><time datetime="2012-07-28">28 juillet 2012</time> Nintendo 3DS XL</li>
    <li><time datetime="2012-11-30">30 novembre 2012</time> Wii U</li>
    <li><time datetime="2017-03-03">3 mars 2017</time> Nintendo Switch</li>
    <li><time datetime="2019-09-20">20 septembre 2019</time> Nintendo Switch Lite</li>
    <li><time datetime="2021-10-08">8 octobre 2021</time> Nintendo Switch OLED</li>
</ul>

视觉上什么都没有改变，但以后会为我们服务！

这些点很丑陋

因此，我们同意，我们经常想象的时间表在一条线上我们将圆上放置以指示日期的放置位置。因此，我们将首先用蓝色圆圈代替点（为什么蓝色？为什么不呢？）

为此，我们将不再使用list-style-type: none展示该点，然后在每个列表的每个列表之前，我们都会在CSS中进行伪元素。确实，对于每个HTML E -L-，我们可以针对CSS中的::before，以完成其内容（以使其在DOM中存在），然后添加样式。对于::before的样式，我们最终会尺寸，蓝色边框，白色后级（否则我们将通过圆圈看到），并在证据大小的一半中通过边界通过。我们还必须在inline-block中传递它，以使e元素保持与文本保持一致，但要完成其大小的功能（否则::before或::after是内联的）。

如果我们以代码的形式编译所有内容，则给出：

ul {
    list-style-type: none;
}
ul li::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 4px solid #20a2fd;
    background-color: white;
    border-radius: 50%;
}

垂直线

对于垂直线，我们可以选择在完整列表中添加边框，但我假装从伪元素::before开始，以成为自由风格。

因此，我们将要采用的样式：我们将在列表上放置一个边界，然后在列表中放置一个边界，然后才能定位此版本，我们将像position: relative一样最终将<ul>列入<ul>（这样做了孩子们的孩子然后，在position: absolute中，将根据此版本放置），然后我们将线路放在列表上方，稍低（这将使其高度与列表相同，无论其尺寸如何），并且在左侧。<<<<<< /p>

以代码的形式：

ul {
    position: relative;
}
ul::before {
    content: "";
    border-right: 4px solid #20a2fd;
    position: absolute;
    top: -4px;
    left: 0;
    bottom: -4px;
}

正确定位所有内容

我们可以看到我们缺乏一些定位。实际上，蓝色圆圈已收集到文本中，因为它已被给予，并且它们是内联的，该行被完全陈述为我们将留在列表中的标准填充。

因此，这个想法是通过使线条更靠近文本和相反的方式来纠正所有内容，并通过使圆圈，圆圈，圆圈，圆圈以及圆圈和圆圈和圆圈和该线垂直对齐，但始终与线上上方的圆圈。

这些选择的事实使其有效：

我们在<li>上添加了一个position: relative，因为它将增加堆叠式上下文（我们可以就此主题撰写许多文章……但是通过粗俗，它又回到说z-index的z-index将永远高于父级标签的高度，在这里<ul>）
我们更改列表的填充以放置一个较小的值（使线路更接近文本）
我们还通过display: block和position: absolute传递了li::before，我们将能够找到圆的位置
至于各方，我们将在填充和位置上玩，以使一切都对齐
我们还在每个老年人下方添加一点时间表

以代码的形式：

ul {
    padding-left: 4px;
}
ul::before {
    bottom: 0;
}
ul li {
    position: relative;
    padding-bottom: 8px;
    padding-left: 16px;
}
ul li::before {
    display: block;
    position: absolute;
    top: 4px;
    left: -10px;
}

这次很好，我们有时间表！

有可能

使用自定义属性

对于文章，我没有任何无聊的无人物（自定义属性），但是在专业上下文中，我将经过变量以使代码更清晰，并且必须具有零部分或双色的数字。

ul {
    --timeline--font-size: 16px;
    --timeline--color: #20a2fd;
    --timeline--width: calc(var(--timeline--font-size) / 4);
    --timeline--circle-width: calc(var(--timeline--font-size) / 2);

    list-style-type: none;
    position: relative;
    padding-left: 4px;
    font-size: var(--timeline--font-size);
}
ul::before {
    content: "";
    border-right: var(--timeline--width) solid var(--timeline--color);
    position: absolute;
    top: calc(-1 * var(--timeline--width));
    left: 0;
    bottom: 0;
}
ul li {
    position: relative;
    padding-bottom: 8px;
    padding-left: var(--timeline--font-size);
}
ul li::before {
    content: "";
    display: block;
    width: var(--timeline--circle-width);
    height: var(--timeline--circle-width);
    border: var(--timeline--width) solid var(--timeline--color);
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: var(--timeline--width);
    left: calc(-1 * (var(--timeline--circle-width) + var(--timeline--width) / 2));
}

提出

当我们将日期放在<time>标签中时，我们将能够使用它们将它们放在葡萄酒中，甚至在文本日期之间添加一个骨架。

ul li time {
    font-weight: bold;
}
ul li time::after {
    content: ' - ';
}

在事件中

由于我们有日期的指示，我们可以与具有类型模式的扇区结合使用“开头”（这给了“ time[datetime^="199"]”（time[datetime^="199"]），以“ 199”开头的日期，换句话说， 1990年的日期）。

另一方面，如果不是我们要放置的日期，而是时间表上的圆圈，那么我们将需要+（它允许选择第一个邻居在+之前的点和伪阅读器:has()（这使得可以验证子阅读器而不更改点）。

）。

注意：以下代码不会在Firefox下产生任何重新申请，实际上，伪阅读器:has()在我喊出本文时仍在标志后面，但是我们很快就可以使用！

ul li:has(time[datetime^="199"]) + li::before {
  border-color: green;
}
ul li:has(time[datetime^="200"]) + li::before {
  border-color: orange;
}
ul li:has(time[datetime^="201"]) + li::before {
  border-color: red;
}

结论

我想结论一下提醒，因为从颜色或视觉位置不应仅应通过颜色或视觉位置来传达它的意义上，我们的内容可以被视觉视觉读取，实际上我们的内容可以阅读我们的内容奉献（在Citéete中的小道尔顿主义，都可以想像或在两者之间想象或不想象的所有频谱），对他们而言，也有必要访问内容。在这里，我们只能在DOM上保留列表，另一方面，可以选择拒绝的叶子要干燥的颜色（我对颜色的启发不太启发，所以我做了，我做了它很简单，但不要将这些颜色放在测试之外！）。

无论如何，我希望我能教你一些

来源：