javascript - 如何重新创建每个 tumblr 帖子图标旁边的箭头？

Question

它可以在主页上查看：tumblr.com

我比什么都好奇，因为我通常不会在我的 Web 应用程序中详细介绍这些设计细节。我猜这里使用 javascript 来修改边框会是矫枉过正还是？

Answer 1

Tumblr.arrow在帖子 div 中使用了一个小跨度 ( ) 并使用以下 css 定位它：

width: 12px;
height: 23px;
background: url("/images/dashboard_master_sprite.png?2") no-repeat -396px -247px transparent;
position: absolute;
left: -11px;
top: 22px;

如您所见，有一个图像（箭头）作为跨度的背景，并且设置了宽度和高度以使跨度可见。

绝对标签允许重叠（尽管实际上并不完全重叠，但定位与外部 div 重叠）并且它被设置为22px从顶部-11px到左侧，使其从 div 中“弹出”。

使用 javascript 真的会是矫枉过正并且客户端繁重。不要这样做。大多数需要这种东西的网站都使用这种方法，因为它很轻并且可以工作，尽管我个人更喜欢让我的 ui 纯粹是 css/html。