HTML列表是网页设计这个被抛弃的世界中真正的幸存者之一。趋势来来去去，但都是有序的<ol>无序<ul>列表仍然和以往一样有用。

与大多数基本的HTML元素一样，当在站点的内容中使用时(与之相反)，这些旧的计时器很无聊。通航，在造型设计方面付出了更多的努力)。即使应用了一些基本的CSS，它们也不能真正加快脉搏。但是我们还有很多潜力去做更多的事情(而且我们有证据)。

我们成立了一个搜索小组来搜索网页，寻找有创意的HTML列表的迹象。事实证明，一些才华横溢的设计师确实超越了简单的子弹和数字。瞧一瞧!

颜色和尺寸

长清单的一个潜在问题是，很难使每一个项目脱颖而出。这就是这个例子的美妙之处。每个数字都以粗体字体和渐变背景突出显示。更重要的是，每一段内容都使用CSSbox-shadow增加深度。其结果是一些有吸引力和易于阅读的东西。

移动解决方案

我们越多地看到人们茫然地盯着他们的手机，无休止地滚动到深渊中，就越容易证明建立长页是正当的。但每一点滚动需要时间。这就是这个实验变得有趣的地方。在大屏幕上显示为多列无序列表的内容在移动设备上变成了一个简单的逗号分隔段落。这节省了用户可以更好地花在其他地方的时间和精力(比如浏览他们的Facebook提要)。

保持简单

您不需要疯狂地使用样式来改进列表的默认外观。拿着这个自定义号码的集合。他们使用基本的形状，颜色和大小来提高整体可读性。这是一个扣式的公司或非营利网站的完美灵感。

另一方面，…

想想这个动画三维空间列表与上面的正好相反。这是一个吸引注意力的人(在一个好的方面)。它将SVG和JavaScript结合在一起，使这组短小的要点变得与众不同。这可能是对在线演示文稿或登陆页面的极大赞扬。

一个简单的时间线

当涉及到创建一个设计特性时，很容易过度考虑这个过程。例如，时间线不需要任何花哨的脚本--一个基本的脚本可以用一个简单的无序列表来创建。使用CSS伪元素添加一条连接线将整个事情联系在一起。

嵌套数

有时，有序列表需要包含多个嵌套级别，同时遵循一致的数字模式。谢天谢地，CSScounter-reset是为了让自动编号变得轻而易举。在这个例子中，列表有四个层次，而编号也是这样。

更时髦的鸟巢

这里还有一个小小的增强，可以使嵌套列表更容易被用户消化。不仅是数字给出一个圆形的背景，背景颜色变化的基础上的水平。除了缩进之外，这使得区分嵌套级别变得更加容易--而且通过CSS也非常容易做到。

网格的优良性

CSS网格正在改变我们构建布局和列表的方式。此示例演示了创建具有完全响应性的列表的能力。在大型视图中，它们分成多个列，而在较小的屏幕上折叠成一个列。这是一个很好的教训，利用任何屏幕房地产是可用的。

奖金：所有名单

CSS有许多内置的列表样式选项--比你想象的要多。这支笔提供了一个方便的不同风格，以及使用图像和字体图标替代传统的要点的例子。

顶级列表

HTML列表是最灵活和必不可少的设计元素之一。当你深入观察时，想到我们使用它们的程度，这是相当令人惊讶的。

当涉及到添加列表到我们的内容，嗯，他们往往留下了很多有待改进。然而，上面的例子证明了我们不必满足于默认条件。只要一点CSS(甚至一点JavaScript)就可以大大提高列表内容的趣味性和易读性。