粘性定義列表

最近，我發現了代碼網站的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中文網其他相關文章！