海宁网络公司_海宁网站建设公司_网站设计制作_UNN建站

宁波网站建设 | 2021-07-21

HTML列表是web设计中一个真正的幸存者。趋势来了又去,但都是有序的<ol>无序的<ul>列表仍然像以前一样有用。

与大多数基本的HTML元素一样,当在站点内容中使用时,这些旧元素是相当无聊的(与航行,其中更多的精力放在造型上)。即使应用了一点基本的CSS,它们也不能真正加快速度。但还有很多潜力可以做得更多(我们有证据)。

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

颜色和尺寸

海宁网络公司对于一张长长的单子来说,一个潜在的问题是很难让每一项都脱颖而出。这就是这个例子的优点。每个数字以粗体字体和渐变背景突出显示。此外,每一段内容都使用CSSbox-shadow增加深度。结果是一些吸引人的东西,而且容易阅读。

移动解决方案

我们越是看到人们茫然地盯着手机,没完没了地滚动进入深渊,就越容易为构建长页面辩护。但每一点滚动需要时间。这就是这个实验有趣的地方。在大屏幕上显示为多列无序列表的内容在移动设备上变成了一个简单的逗号分隔的段落。这节省了用户的时间和精力,而这些时间和精力可以更好地用于其他地方(比如滚动浏览他们的Facebook提要)。

保持简单

你不需要疯狂地使用样式来改进列表的默认外观。拿这组定制号码。它们使用基本的形状、颜色和尺寸来提高整体可读性。这是一个保守的公司或非盈利网站的完美灵感。

另一方面鈥

想想这个动画三维列出与上述相反的内容。这是一个引人注目的(在一个很好的方式)。它将SVG和JavaScript结合起来,使这一组简短的要点变得与众不同。这可能是对在线演示或登录页面的一个很好的赞美。

一个简单的时间表

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

嵌套数字

有时,有序列表需要包含多个嵌套级别,同时遵循一致的数字模式。谢天谢地,CSScounter-reset有没有办法让自动编号变得轻而易举。在本例中,列表深入到四个级别,而编号也随之进行。

更时尚的巢

下面是另一个小的增强,它可以使嵌套列表更易于用户理解。不仅数字被赋予一个圆形的背景,背景颜色也会随着级别的变化而变化。与缩进一起,这使得区分嵌套层变得更加容易,而且通过CSS实现这一点非常容易。

网格的优度

CSS网格正在改变我们构建布局和列表的方式。这个例子演示了创建完全响应的列表的能力。在大的视口中,它们分成多个列,而在较小的屏幕上则收拢为一列。这是一个很好的教训,如何充分利用屏幕上的不动产。

奖金:所有列表

CSS有很多内置的列表样式选项,比你想象的要多。这支笔提供了一个方便的不同风格,以及使用图像和字体可怕的图标取代传统的项目符号的例子。

热门房源

HTML列表是最灵活和不可缺少的设计元素之一。当你更深入地看的时候,想想我们有多大程度地使用它们,这是相当令人惊讶的。

海宁网络公司当涉及到在我们的内容中添加列表时,嗯,它们通常会留下很多有待改进的地方。然而,上面的例子证明了我们不必为违约而妥协。只需一点点CSS(甚至是少量JavaScript)就可以大大提高列表内容的趣味性和可读性。


上一篇:慈溪网络公司_慈溪网站建设公司_网站设计制作_UNN建站下一篇:东阳网络公司_东阳网站建设公司_网站设计制作_UNN建站
联系电话 400-6065-301

留言