CSS - 如何创建这些分隔符？答案

【问题标题】：CSS - how to create these separators?CSS - 如何创建这些分隔符？
【发布时间】：2013-11-16 19:36:08
【问题描述】：

我有一个 css 作业来完全复制一个网站。我已经完成了大约 80% 的工作，但原始网站中仍有一些元素我无法带到我的副本中，例如，这些分隔符：

我在 Internet 上尝试了一些方法，但它们似乎都不适用于我目前的情况。这是我迄今为止的工作：https://dl.dropboxusercontent.com/u/178536659/xin/index.html。

除此之外，我的老师还为我们提供了一些资源（包括徽标、图片等...用于制作网站的副本）。它包括一些仅透明的水平矩形图像。我不知道它是用来做什么的……我猜是用来做这些分隔符的吗？

所以我希望你们能帮助我...任何 cmets 将不胜感激。非常感谢！

【问题讨论】：

【解决方案1】：

它们是简单的边框，例如

ul#nav_menu li {
  border-right: 1px solid #cecece;
}

现在使用某个类或 id 从元素中删除第一个子元素的边框，并且不为其设置边框！很简单。

【讨论】：

【解决方案2】：

创建垂直分隔符的方法有很多种，最常见的border-left/border-right或伪元素:before和:after，水平分隔符都是用

标签制作的。

边界文件：

这里有一些很好的伪元素示例（您可以将其与图像一起使用）：

您还可以创建 div，赋予它们 css 属性以模拟分隔符并将它们放置在它们之间或使用图像。

【讨论】：

【解决方案3】：

在你的 CSS 中使用它。我认为它会为你工作。

#header ul li{border-right:2px solid #d8d8d8;}
#header ul li:last-child{border:none;}

【讨论】：