• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать элемент вертикального списка в CSS (Как разместить элементы списка горизонтально через CSS)
Создать элемент вертикального списка в CSS
Kosten
Дата: Понедельник, 2018-12-17, 19:20 | Сообщение 1
Администраторы
Сообщений:24217
Награды: 56


Создание списков на сайте является необходимой частью, если вы решили все распределить правильно, так, чтоб еще все красиво смотрелось. Если ранее можно было просто написать цифровые значение, то создавая тему хочется всегда как можно оригинально ее оформить. И здесь как понимаете списки не исключение, так как они еще являться навигацией для гостей и пользователей сайта.

Давайте рассмотрим один такой список, который по своей структуре кардинально отличается от других.



HTML

Код
<ul class="vasetumopg-dsandilam">
    <li><a>Сайт ZorNet.Ru</a>
      <ul>
        <li><a>ZorNet - портал для вебмастера</a></li>
        <li><a>ZorNet - портал для вебмастера</a></li>
        <li><a>ZorNet - портал для вебмастера</a></li>
      </ul>
    </li>
    <li><a>Скрипты для сайта</a></li>
    <li><a>Шаблоны для сайта</a></li>
</ul>


CSS

Код
.vasetumopg-dsandilam {
  list-style: none;
  padding: 0;
  margin: 30px 0 0 50px;
  border-left: 5px solid #c4d2e4;
}
.vasetumopg-dsandilam li {line-height: 2em;}
.vasetumopg-dsandilam ul {
  margin: 20px 0 20px 15px;
  padding: 0;
  border: none;
  list-style: none;
}
.vasetumopg-dsandilam ul:before, .vasetumopg-dsandilam ul:after {
  content: "";
  width: 5px;
  height: 28px;
  background: #c4d2e4;
  position: relative;
  display: block;
  left: -9px;
}
.vasetumopg-dsandilam ul:before {
  transform: rotate(-45deg);
  margin-top: -15px;
}
.vasetumopg-dsandilam ul:after {
  transform: rotate(45deg);
  bottom: -20px;
}
.vasetumopg-dsandilam ul li {border-left: 5px solid #c4d2e4;}
.vasetumopg-dsandilam ul li:first-child {
  margin-top: -5px;
  padding-top: 5px;
}
.vasetumopg-dsandilam ul li:last-child {
  padding-bottom: 9px;
  margin-bottom: -25px;
}
.vasetumopg-dsandilam a {
  text-decoration: none;
  display: block;
  font-family: 'Noto Sans', sans-serif;
  color: #4e5052;
}
.vasetumopg-dsandilam a:before {
  content: "";
  display: inline-block;
  background: #bb3b13;
  width: 12px;
  height: 12px;
  left: -9px;
  position: relative;
  border-radius: 100%;
  margin-right: .4em;
}


Также их еще называют, как маркированный или неупорядоченный список.

Демонстрация
Прикрепления: 5891633.png(19.9 Kb) · codas.zip(1.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать элемент вертикального списка в CSS (Как разместить элементы списка горизонтально через CSS)
  • Страница 1 из 1
  • 1
Поиск: