• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание элемента списка с помощью CSS (Измените нумерованные списки с градиентов в css)
Создание элемента списка с помощью CSS
Kosten
Дата: Среда, 2019-03-20, 14:21 | Сообщение 1
Администраторы
Сообщений:22271
Награды: 56


Оригинальный вид адаптивных списков, которые построены на градиентах и смотрятся красиво. Здесь изначально нужно понимать, что элемент li определяет элемент списка, который в последствие будет являться частью упорядоченного и неупорядоченного списка элементов. Что можно выстроить в один или несколько рядов и добавить каждому элементу дизайн. Но здесь под одним классом все идут, и значит будет одна стилистика. Чтоб в понимании это те же списки, только представлены немного в другом дизайне.

А точнее в виде баннеров, где также можно по центру вывести ключевые наказание, что касается вашего сайта. Ведь на современном дизайне такую картину можно увидеть и не удивится, так как она может отлично вписаться в элементы стиля. Что делаем его под разный формат, где изначально выстраиваем под название, кому нужно тот может поставить под ссылку. Но все же не забываем, что это списки, хоть в таком образе стиля.

Здесь идет на demo странице, именно такой стиль:



Это уже переделан, что редактируем палитру цвета под свой дизайн:



Приступаем:

HTML

Код
<ul>
  <li>Начинающему вебмастеру</li>
  <li>Начинающему вебмастеру</li>
  <li>Начинающему вебмастеру</li>
  <li>Записки веб-разработчика</li>
  <li>Записки веб-разработчика</li>
  <li>Записки веб-разработчика</li>
</ul>


CSS

Код
ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
}
li {
    height: 98px;
    line-height: 100px;
    text-align: center;
    font-family: arial;
    font-size: 18px;
    color: white;
    background: linear-gradient(#3a1504,#ff66de);
    margin-bottom: 15px;
}
@media (min-width: 870px) {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
   li {
     width: 49%;
  }
}
@media (min-width: 900px) {
  li {
    width: 32%;
  }
}

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

Демонстрация
Прикрепления: 0864897.png(16.6 Kb) · 9325972.png(20.6 Kb) · GaXEL.zip(1.6 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-03-21, 00:17 | Сообщение 2
Администраторы
Сообщений:22271
Награды: 56


Как и в HTML, где вы можете определить неупорядоченный список с набором основных фигур. На этом этапе мне было бы полезно указать, что стиль маркера может быть установлен на уровне ul и li . Это означает, что вы можете установить один и тот же внешний вид для всех маркеров в списке или установить отдельные стили для каждой точки маркера.



HTML

Код
<ol class="gtesupol-asbtklod">
  <li>Как создать неупорядоченный или маркированный список </li>
  <li>Как создать неупорядоченный или маркированный список </li>
  <li>Как создать неупорядоченный или маркированный список m</li>
  <li>Как создать неупорядоченный или маркированный список </li>
  <li>Как создать неупорядоченный или маркированный список </li>
</ol>


CSS

Код
.gtesupol-asbtklod{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.gtesupol-asbtklod li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.gtesupol-asbtklod li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}


Также можно посмотреть, как все будет выглядеть после установки.

Демонстрация
Прикрепления: 2829638.png(16.9 Kb) · custom-list-num.zip(1.7 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-03-21, 00:23 | Сообщение 3
Администраторы
Сообщений:22271
Награды: 56


Также вашему вниманию видео обзор на тему создание неупорядоченных или маркированных списков в HTML и типы маркеров, где задействуем HTML теги UL и LI.

Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание элемента списка с помощью CSS (Измените нумерованные списки с градиентов в css)
  • Страница 1 из 1
  • 1
Поиск: