HTML列表是网页设计一次性世界中真正的幸存者之一。趋势来来往往，但有序<ol>和无序<ul>列表仍然有用。
像大多数基本的HTML元素一样，这些老人在网站内容中使用时看起来很无聊（与导航相反，在样式中需要花费更多精力）。即使应用了一些基本的CSS，它们也不能真正加快脉冲。但是有很多可能做得更多（我们有证据）。
我们组建了一个搜索网络，搜索网络，寻找创意HTML列表的迹象。事实证明，一些才华横溢的设计师确实超越了简单的子弹和数字。看一看！
颜色和尺寸
长列表中的一个潜在问题是难以使每个项目脱颖而出。这就是这个例子的美妙之处。每个数字都以粗体字和渐变背景突出显示。更重要的是，每个内容都使用CSS box-shadow来增加深度。结果是有吸引力且易于阅读的东西。
移动解决方案
我们越是看到人们茫然地盯着他们的手机，无休止地滚动到深渊，就越容易证明建造长页面。然而，每一次滚动都需要时间。这就是这个实验变得有趣的地方。在大屏幕上显示的多列无序列表在移动设备上变成了一个简单的逗号分隔段落。这样可以节省用户在其他地方更好地花费的时间和精力（比如滚动浏览他们的Facebook Feed）。
保持简单
您不需要狂热地使用样式来改进列表的默认外观。拿这个自定义数字集合。它们使用基本形状，颜色和尺寸来提高整体可读性。这是一个扣人心弦的企业或非营利性网站的完美灵感。
另一方面…
把这个动画3D列表想象成与上面相反的。这个是吸引注意力的（以一种好的方式）。它结合了SVG和JavaScript，使这一小组子弹点不过是普通的。它可能是对在线演示或登录页面的极大赞美。
一个简单的时间表
在创建设计功能时，很容易过度思考这个过程。例如，时间轴不需要任何花哨的脚本 - 只需一个简单的无序列表即可创建基本脚本。使用CSS伪元素添加连接线将整个事物联系在一起。
嵌套数字
有时，有序列表需要包含多个嵌套级别，同时遵循一致的数字模式。值得庆幸的是，CSS counter-reset可以轻松实现自动编号。在这个例子中，列表深入四级，编号紧随其后。
更时尚的巢
这是另一个小的增强功能，可以使嵌套列表更容易被用户消化。不仅数字被赋予圆形背景，背景颜色基于水平而变化。除了缩进之外，这使得更容易区分嵌套级别 - 并且通过CSS非常容易。
网格的优点
CSS Grid正在改变我们构建布局的方式 - 和列表。此示例演示了创建完全响应的列表的功能。在大型视口中，它们分成多个列，同时在较小的屏幕上向下折叠为单个列。利用任何可用的屏幕空间都是一个很好的教训。
奖金：所有名单
CSS具有许多内置列表样式选项 - 超出您的想象。这支笔提供了不同风格的便利纲要，以及使用图像和Font Awesome图标代替传统项目符号的示例。
热门房源
HTML列表是最灵活和不可或缺的设计元素之一。当你深入研究时，想到我们使用它们的程度是多么令人惊讶。
在向我们的内容添加列表时，它们通常会留下很多不足之处。但是，上面的例子证明我们不必满足于默认值。只需要一点点CSS（甚至是一些JavaScript）就可以大大提高列表内容的趣味性和易读性。