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

Question

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

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

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

所以我希望你们可以帮助我...任何评论都将不胜感激。非常感谢先进！

Answer 1

创建垂直分隔符有很多种方法，最常见的是border-left / border-right或pseudo元素：before和：after，水平分隔符是用＆lt; hr＆gt;制作的。标签

---

Borders文档：

http://www.w3schools.com/css/css_border.asp

以下是伪元素的一些很好的例子（可以与图像一起使用）：

http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice

您还可以创建div，为它们提供css属性以模拟分隔符并将它们置于其间或使用图像。

Answer 2

它们是简单的边框，例如

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

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

Answer 3

在CSS中使用它。我认为这对你有用。

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