CSS - как создать эти разделители?

Question

У меня есть домашняя работа css для копирования именно веб-сайта. Я сделал около 80% моей работы, но есть все еще некоторые элементы в оригинальном сайте, что я не могу принести в мою копию, например, эти разделители:

Я пытался некоторые пути в Интернете, но ни один из них, похоже, не работает с моей нынешней ситуацией. Это моя работа до настоящего времени: https://dl.dropboxusercontent.com/u/178536659/xin/index.html.

Кроме того, мой учитель предоставил нам некоторые ресурсы (включая логотипы, изображения и т. Д.), Чтобы сделать копию веб-сайта). Он включает некоторые прозрачные горизонтальные изображения прямоугольника. Я не знаю, для чего он используется ... Является ли это использование для создания этих разделителей?

Так что я надеюсь, вы, ребята, могли бы мне помочь в этом ... любые комментарии были бы оценены. Большое спасибо за продвинутый!

Answer 1

Существует множество способов создания вертикальных разделителей, наиболее распространенных элементов border-left/border-right или pseudo: before и: after, горизонтальные разделители сделаны с <hr> тегом.

---

Границы документации:

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

Вот некоторые хорошие примеры с псевдо-элементов (которые вы можете использовать с вашими изображениями):

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

Вы также можете создайте divs, дайте им свойства css для эмуляции разделителя и поместите их между ними или используйте изображения.

Answer 2

Они простые границы, такие как

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

Теперь удалить границу первого ребенка от элемента с помощью какого-то класса или идентификатора и не установив отсутствие границы к нему! Просто.

Answer 3

Используйте это в своем CSS. Думаю, это сработает для вас.

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