带有描述 PDF 的引导 4 类列表 - CSS

当你需要在网站上引导用户查看或下载 PDF 文件时，带有描述 PDF 的引导列表能够有效地帮助用户了解文件内容并提高下载率。在这篇文章中，我们将介绍带有描述 PDF 的引导 4 类列表的实现方法。

1. 简单列表

最简单的带有描述 PDF 的引导列表是一个简单的 HTML 列表，每个列表项包含一个文件名和一个说明性文本。

- [文件名.pdf](/path/to/file.pdf) - 文件描述文本

在 CSS 中，可以使用 list-style-type:none 删除列表项的默认符号，并使用 ::before 伪元素添加自定义的符号。

ul {
  list-style-type: none;
}

li::before {
  content: "• ";
  font-size: 20px;
  color: #1c1c1c;
  vertical-align: middle;
}

2. 垂直列表

垂直列表将每个列表项按照垂直方向排列。这种布局更加美观，能够更好地帮助用户区分不同的列表项。

<ul class="pdf-list">
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
</ul>

在 CSS 中，可以使用 display:flex 和 flex-direction:column 分别进行水平和垂直方向的布局，并使用 gap 添加列表项之间的间距。

.pdf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdf-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pdf-list a {
  font-weight: bold;
  color: #0072c6;
}

.pdf-list p {
  margin: 0;
  font-size: 14px;
  color: #6d6d6d;
}

3. 列表图标

在垂直列表的基础上，为每个列表项添加图标能够更好地吸引用户注意力并增强品牌特色。

<ul class="pdf-list pdf-list--icon">
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
</ul>

在 CSS 中，可以使用 background-image 添加自定义的图标，并使用 background-size 和 background-position 调整样式。

.pdf-list--icon li {
  background-image: url("icon.svg");
  background-size: 25px;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 30px;
}

4. 悬浮效果

为每个列表项添加悬浮效果能够增强交互性，提示用户该项可点击并进一步查看文件详情。

<ul class="pdf-list pdf-list--hover">
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
  <li>
    <a href="/path/to/file.pdf">文件名.pdf</a>
    <p>文件描述文本</p>
  </li>
</ul>

在 CSS 中，可以使用 :hover 伪类添加悬浮效果，并使用 transform:scale(1.05) 放大选中项。

.pdf-list--hover li:hover {
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

这四种带有描述 PDF 的引导列表都能够有效地帮助用户查看和下载文件。您可以根据实际需求选择适合自己的布局，并根据实际情况进行样式调整。