1分钟用 CSS + HTML 实现个按字母吸附滑动的列表（类似手机通讯录列表）

前端达人

于 2021-11-02 08:00:00 发布

阅读量6.8k

点赞数

文章标签：列表 css html python web

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/121112269

版权

本文介绍了如何使用简单的 CSS 和 HTML 制作一个类似手机通讯录的按字母吸附滑动的列表。通过 HTML 的 <dl>, <dt> 和 <dd> 标签构建基础结构，并利用 CSS 实现按节固定滑动的效果。文章还提供了美化列表的示例代码，使列表更具专业感。" 84194426,8052549,模拟实现Strstr函数查找子串,"['C语言', '字符串处理', '函数实现', '库函数模拟']

摘要由CSDN通过智能技术生成

大家好，今天在浏览 css-tricks.com 这个网站时，看到一个浮动节标题的列表案例，就是简简单单的用 CSS + HTML 实现了一个我们会经常遇到通讯录列表需求（按字母吸附滑动列表），以前实现老麻烦了，看到这个案例，我就迫不及待的想分享给大家，废话不多说，赶紧看看是怎么实现的。

一、HTML部分

<div class="floating-stack">
  <dl>
    <dt>A</dt>
    <dd>Algeria</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Benin</dd>
    <dd>Botswana</dd>
    <dd>Burkina Faso</dd>
    <dd>Burundi</dd>

    <dt>C</dt>
    <dd>Cabo Verde</dd>
    <dd>Cameroon</dd>
    <dd>Central African Republic</dd>
    <dd>Chad</dd>
    <dd>Co