粘性定义列表

最近，我发现了代码网站的30秒，他们的CSS示例确实令人印象深刻！使用定义列表，我特别被他们的“浮动部分标题”着迷。这优雅地证明了<dl></dl>，，，，<dt></dt> ， 和<dd></dd>元素。

考虑这个简单的html：

<div>
  <dl>
<dt>一个</dt>
    <dd>阿尔及利亚</dd>
    <dd>安哥拉</dd>

    <dt>b</dt>
    <dd>贝宁</dd>
    <dd>博茨瓦纳</dd>
    <dd>布基纳法索</dd>
    <dd>布隆迪</dd>

    <dt>c</dt>
    <dd>Cabo Verde</dd>
    <dd>喀麦隆</dd>
    <dd>中非共和国</dd>
    <dd>乍得</dd>
    <dd>科摩罗</dd>
    <dd>刚果，民主共和国</dd>
    <dd>刚果，共和国</dd>
    <dd>cote d'Ivoire</dd>

    <dt>d</dt>
    <dd>吉布提</dd>

    <dt>e</dt>
    <dd>埃及</dd>
    <dd>赤道几内亚</dd>
    <dd>厄立特里亚</dd>
    <dd>埃斯瓦蒂尼（以前是斯威士兰）</dd>
    <dd>埃塞俄比亚</dd>
  </dl>
</div>

没有任何CSS，浏览器的默认渲染非常简单。但是，<dt></dt>和<dd></dd>允许巧妙的造型。注意如何<dt></dt>由于默认余量，元素自然会与左对齐。这使得创建“粘性部分”非常容易：

 dt {
  位置：粘性；
  顶部：0;
  背景：白色；
  显示：内联块；
}

该解决方案的优雅令人震惊。核心功能是通过最小CSS实现的。进一步的样式纯粹是化妆品的增强。

代码示例的30秒采用CSS网格来实现更强大的布局，但是这种简洁的CSS方法突出显示了较少的成就可以完成多少。他们还提供了一种变化<dd></dd>元素涵盖了完整的宽度，提供了另一个有趣的设计选项。

以上是粘性定义列表的详细内容。更多信息请关注PHP中文网其他相关文章！