web设计列表类_Web设计中HTML列表的出色使用

您可以在Internet上找到精心设计的列表。 设计师已经使用它们数十年来协调页面信息和布局 ，在当今的Web中，您可以看到Web设计师如何使用列表的巨大创造力。 其中包括导航菜单，配置文件链接，档案，任务/清单以及大量其他用途！

在本文中，我将介绍各种类型HTML列表，并提供有关设计它们的技巧，特别是有关如何在列表中添加唯一边缘的技巧。 另外，我还将带您浏览一些具有出色列表设计的网站示例，最终您将获得具有精心设计HTML列表的网站列表。 毫无疑问，如何使您的普通列表看起来独特，让我们从今天开始充分利用它们！

上市要素

Web设计师不断地从一个潮流过渡到另一个潮流，从而导致网站样式随时间而改变，但是列表经受了时间的考验，很可能会在万维网的未来创新中出现。

在检查示例之前，我想介绍一些HTML列表。 您可以在自己的设计工作中使用几种不同类型的列表。 大多数Web设计人员都将重点放在使用<ul>标签打开的无序列表上，但是还有另外两种不太流行的变体： 有序列表和数据定义 。 我在下面进一步介绍了细节。

无序列表（<ul>）

可能是HTML4 / HTML5标准中使用最多的元素之一。 无序列表将以与有序列表相同的方式输出数据，但是您不会在side看到任何数字标记 。 取而代之的是给每个项目一个小圆圈或圆盘 ，然后将其分解为新的一行。 也可以使用 CSS中的list-style-type属性更改此图标。

下面是无序列表的示例代码：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

无序列表是构建导航链接的理想方法。 由于您可以轻松地将整个列表嵌套在任何列表项中，因此创建子导航链接也很简单。 删除列表样式后，您将剩下一个空白的item元素。 在这里，您可以设置锚链接的样式，使其在页面上显示为块元素，从而填写导航菜单设计，并使用一些jQuery代码 ，可以为您的网站组合漂亮的标题。

通常，您会在Web文章或安装说明的中间找到无序列表。 请注意， Google和其他搜索引擎不会对您的页面内容进行不同的处理 ，因此， 无论您选择哪种列表类型 ，您的SEO都不会受到影响 。

有序列表（<ol>）

当您需要订购一组数据时，可以从头开始设置自己的布局框架，但是通过这种方式，您将需要手动添加每个递增编号，这可能很麻烦。 有序列表非常适合使编号的任务保持一致，而不会产生任何麻烦。 内部列表项（ <li> ）的顺序将决定如何显示数据。

下面是有序列表的示例代码：

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

也可以将计数器从常规数更改为少数其他选项 。 其中包括字母刻字和罗马数字 ，仅举几例。 Web设计人员会将有序列表用于特定于内容的列表。 食谱数据 ， 日常任务 ， 收藏夹或已登录用户的排名靠前/最近的只是几个示例。 通常，您会看到使用有序列表构建的博客评论，以使每个评论保持编号顺序。

数据定义列表（<dl>）

定义列表不再经常出现（不像以前那样受欢迎）。 网页设计人员经常使用它们创建链接或框内容的复杂格式。 如今， 数据列表标签（ <dl> ）经常被编码人员误解。 在HTML4.01规范中，数据列表用于将项及其描述配对 。 这些被称为定义列表。

以下是数据定义列表的示例代码：

<dl>
  <dt>Item 1</dt>
	<dd>Description</dd>
  <dt>Item 2</dt>
	<dd>Description</dd>
  <dt>Item 3</dt>
	<dd>Description</dd>
</dl>

但是，随着新HTML5规范，数据列表已被转录。 元素的使用语法没有任何区别，但是它们的用途已作为描述列表进行了更新，该描述列表由一个或多个数据术语（ <dt> ）和一个或多个数据定义（ <dd> ）组成 。

HTML5 Doctor文章中的一个很好的例子是元数据格式列表 。 在单个dl list元素内，您将定义一个术语 （例如您的姓名），然后每个后续的定义标签都可以描述有关您的数据 ，可能是您的年龄，职业，当前的城镇/城市等。最终， 所有具有键/值的数据集配对非常适合描述列表 。 列表中可以使用多个数据术语，但是W3C声明每个术语在列表中应该是唯一的。

现在，我们确定了3种流行的列表样式，让我们继续一些示例！ 近年来，Web设计师在列表方面变得很有创意。 我在下面列出了我最喜欢的7个网站，特别关注它们对列表的创造性使用。

简单的无序列表导航

使用现代CSS技术可以轻松构建导航菜单。 这就是为什么无序列表甚至有序列表已成为流行选项的原因。 我最喜欢的例子之一出现在社交媒体博客Mashable上 。

在标题的顶部，您会注意到2组主要链接。 直接在其徽标顶部的是一个小的无序列表，其中包含社区链接，例如热门故事，热门话题和人物。 设计师创造了一种时尚的悬停样式，具有纯色背景和配色方案。

在此正下方，您将看到其子导航链接。 该导航菜单可导致博客类别，例如社交媒体或技术。 这两个无序列表都包含在HTML5 <nav>元素中，以使所有内容与模板保持一致。 此处添加的悬停效果在子导航菜单周围显示一个圆角。 每个链接都显示为一个块元素，并占用了子导航菜单的大量空间。

列出软件功能

这可能是我最喜欢的样式列表示例之一。 Web开发人员和软件公司在自己的公司Web设计中使用它们。 我的示例关注待办事项列表应用程序Culture Code's Things的页面。 他们构建了一套格式化的项目和功能，您可以在Things中找到它们。

整个集合包含在<div>标记内，该标记同时包含左右列 。 内部是分别带有左和右类的浮动<ul>元素 。 实际上，列表项的内容分为多个部分，而CSS用于对齐所有内容 。

将图像作为<img>标签直接添加到代码中，并相对于包含它们的<li> 。 对于每个标头点，每个深色的文本都使用strong标签 ，并且在此之后立即添加描述。

这些元素完美地组合在一起，我非常欣赏《文化规范》的工作道德。 事实证明，多年来，它们提供了出色的设计，尤其是对于物联网。 如果您检出任何图标目录（例如Icon Finder），则选择一组免费赠品是相当简单的，从这里您可以模拟设计并在CSS中编写类似样式的列表。

如果您对他们的设计更感兴趣，那么“ iPhone用品”页面实际上会使用描述列表。 每个图标均被设置为定义术语 ，其描述位于右侧。 不建议您使用这些标签，但是在某些情况下，它确实可以很好地工作！

博客类别和标签

WordPress用户对类别/标签系统非常熟悉。 到目前为止，它在大多数形式的社交媒体上都运行良好，但最初源自博客圈。 标签非常适合显示一些与该主题相关的利基文章。 类别更广泛，用于包含文章的较大部分。

我能想到的最好的例子是Smashing Magazine及其新的首页重新设计。 在顶部，您会看到一个标签为“杂志”的标签，旁边悬挂着一个小标签图标。 将鼠标悬停在其上可以显示类别的隐藏列表，例如代码，设计，图形等。每种样式还具有精美的CSS3悬停效果，以光泽按钮的形式显示。

查看代码，您会发现他们已将此框放在左列区域。 display: none; 样式一直隐藏直到触发 。 设置无序列表时，每个列表项都包含一个锚链接 ，但是作为替代，这些链接会以内嵌方式显示，并分成两行以显示所需的空间。

带定义列表的页脚列

我一直是经典Digg设计的忠实粉丝。 它具有您希望从具有强大社交功能的新闻网站获得的所有内容。 对于他们的旧设计，一个非常有趣的部分是使用定义列表设置页脚列 。

不幸的是Digg的工作人员已经启动了v4设计，但是Internet是怀旧的地方，有了Wayback Internet档案，我们可以从2007年8月开始提取Digg的较旧设计 。此模板具有许多出色的用户界面元素，但是更具体地说，让我们关注页脚区域。 您会注意到每一列实际上都被分解为一个数据列表元素 。 这些列设置为显示为块，并以预定义的宽度彼此浮动 。

数据项在列表中充当标题 ，每列仅出现一次。 在我看来，这是构建描述列表的更好，更简洁的方法。 每个列表可以使用多个术语，但这经常会使您HTML混乱，并且您可能会很快失去代码跟踪。 前两列包含6-7个链接，这些链接彼此下方列出，作为描述标题文本的数据术语 ，但是在此之后，您会发现列与默认格式不符。

例如，在Digg Tools＆API下 ， 只有两个数据定义 。 这实际上是包含内部链接和句子的2个段落。 此标记肯定没有错，它实际上是一个非常有创意且可持续的构建页脚列的系统。 我敢肯定，如果您浏览Digg页面的档案，您会找到很多很棒的列表示例。

任务和待办事项

列表并不仅限于设计样式。 实际上，有时内容需要列表项来形成实际的数据列表 。 待办事项清单就是这些现象的完美例证。 但是，由于没有内置在Web中的大量任务管理器，因此很难找到出色的示例。

Flow App就是这样一种具有漂亮用户面板的服务。 如果您有时间，我建议注册一个免费帐户以为该应用提供演示。 即使您不打算付费，它仍然是一个非常有趣的Web应用程序，您甚至可以从中获得一些设计灵感。

如果您已登录，则左下菜单对列表集合进行排序。 这些是您可以重新排列，编辑，标记和检查完成的任务。 单击第一个默认列表“基础”将在右窗格中打开内容，在这里，整个列表结构都是由无序列表构成的。

每个项目都包含大量内部上下文。 您看到的每个条形都有一个添加到总体<ul>元素中的列表项 。 还有很多内部对象，例如编辑图标，完成复选框，标志和废纸icon图标。 同样，在“焦点”下方的侧边菜单链接中，您会注意到构造项目设置为无序列表 。 当然，它的简单性看起来很棒。

运球选手名单

与许多其他设计师一样，我也是Dribbble的忠实拥addict 。 该网站的结构精美，汇集了来自世界各地的一些最佳平面设计师。 如果您不熟悉网络，则Dribbble是一个仅邀请对象的社交网站，由Web设计人员分享最新作品的快照。

如果将注意力转移到侧边栏区域的右下角，事情会变得很有趣。 在这里，我们有一个带有“ players-list ”类的排序列表。 它的特色是新秀，这些新秀是受到邀请的最新设计师，并且是最近登录该网站的。 无论出于何种原因，Dribbble的Web开发人员都选择使用有序列表，每个列表项都包含有关用户的详细信息 。

内部内容实际上分为两个部分。 如果您当前已登录，则浮动在右侧的<div>包含关注/取消关注链接。Alternative元素显示<h4>标头，其类为“ vcard ”，其中包含用户名和头像。 这些都链接到他们的个人Dribbble个人资料以及一些帐户统计信息。

水平面包屑

有一些很棒的例子和书面的最佳实践来构建面包屑导航。 这些菜单可以显示您遍历以到达当前页面的子链接的集合 。 在Hongkiat上，我们有一个很棒的面包屑教程 ，完全用CSS3技术和无序列表构建而成。

该设计使用锚点链接作为块元素来显示列表菜单。 锚链接具有背景图像和递减的z-index属性，因此箭头将显示在每个并发元素的顶部。

另外，请在其支持页面之一上查看Google的示例 。 如果您有多个嵌套的内容页面，那么这是合并到您自己的网站中的完美页面元素。 访问者很可能希望返回以前的页面而不查看其历史记录。

构建面包屑链接列表没有太多选择。 您可以使用有序列表，以便搜索引擎爬网程序了解菜单链接的顺序 ，但是，如前所述，在SERPS排名中，这可能不会有太大的不同。 如果您对面包屑有更复杂的需求，例如每个链接的标题/描述，则可以更好地利用定义列表元素。

更漂亮的基于列表的UI

无需过多讨论，我的目标是收集基于列表的界面元素的出色设置。 说起来容易做起来难，但是互联网有很多选择！ HTML列表领域还有很大的增长空间。 如果您渴望获得更多灵感，请查看下面的迷你画廊，并提供一些出色的示例。

6神童

一个梦幻般的导航菜单，其样式设置为按钮元素。

蛋糕甜蛋糕

Cake Sweet Cake包含一幅精美的缩略图列表，其中包含一些面包店作品的美味样本。

Cheesemonger邀请函网站上有2个单独的<ul>元素，它们浮动以创建1个导航菜单。 看起来很整洁，与它们居中的徽标图形一致。

Threepenny编辑器网站底部的社交媒体链接全都在一个列表下制作。 它非常适合他们的手和纸布局主题专栏中。

带有图像和CSS样式的导航菜单的另一个漂亮示例。

您知道谁在他们的网站上拥有精美的复古设计效果。 主页的底部有一个小的排序列表，其中包含其最新项目工作的缩略图。

为MediaLoot的注册计划制作的无序列表看起来很有希望。

365psd每天提供一个全新的Photoshop模板供下载。 在侧边栏中，您将找到内置于无序列表中的标签的列表。 在博客和归档页面中，看起来很合适的标签列表看起来非常合适。

结论

希望这个创意HTML样式列表的库给您一些设计版式内容的灵感。 为网页上的列表确定一个具体的想法可能很困难，但是项目列表是设计过程的重要组成部分，并提供了标记和内容之间的建设性关系 。

在网络上可能还会发现许多其他奇妙的列表，并且随着可用的Web设计师数量的增加，我们肯定会看到这个数字的增长比以往更快。 如果您知道任何具有很棒HTML列表的优秀网站，请随时在下面的评论部分中提供链接。 另外，如果您将以上列出的任何样式添加到自己的网站中，我们也很乐意将其检查出来！

翻译自: https://www.hongkiat.com/blog/html-lists-styling/