Гостевой вход

Вы не залогинились
19:01

Создаём красиво оформленный список

Категория: Практикум

Метки: оформление списка
В этом уроке мы создадим легкий, красиво оформленный список. Данное решение может послужить основой для чего угодно: это может быть и список ссылок, и список цитат, а может это будет какой-то информационный информер - решать вам. Много Вашего времени это не займёт, но в итоге вы получите красивый, стильный, современно оформленный список.



HTML-каркас нашего какого-то списка:

Код

<ul class="ps ps2 ps3">

<li class="ps1 ps4">
<span class="ps5">09:00</span>
<span class="ps6 ps6-success">1</span> There are many variations of passages of Lorem Ipsum.  
</li>

<li class="ps1">
<span class="ps5">09:15</span>
<span class="ps6 ps6-info">2</span> Lorem Ipsum is simply dummy text of the printing.  
</li>

<li class="ps1">
<span class="ps5">10:23</span>
<span class="ps6 ps6-primary">3</span> There are many variations of passages of Lorem Ipsum.  
</li>

<li class="ps1">
<span class="ps5">11:40</span>
<span class="ps6 ps6-default">4</span> Lorem Ipsum is simply dummy text of the printing.  
</li>

<li class="ps1">
<span class="ps5">12:15</span>
<span class="ps6 ps6-primary">5</span> There are many variations of passages of Lorem Ipsum.  
</li>

</ul>


И CSS стили для его оформления:

Код

ul.ps {list-style-type:none;
color: #888;
font-family: Arial;
font-feature-settings: "'liga' 1";
font-kerning: auto;
font-style: normal;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 0;
line-height: 1.66em;
text-decoration: none;
text-transform: none;
word-spacing: 0;
margin-top: 0;
margin-bottom: 10px
}

.ps {
  padding-left: 0;
  margin-bottom: 20px
}

.ps1 span.ps6 {
  margin-right: 10px;
}

.ps.ps2 .ps1 {
  border-top: 1px solid #e7eaec;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  padding: 10px 0;
}

.ps3 {
  margin-top: 15px;
}

.ps4 {
  border-top: none !important;
}

.ps5 {
  float: right!important
}

.ps6 {
  background-color: #d1dade;
  color: #5e5e5e;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  text-shadow: none;
  border-radius: .25em
}

.ps6-primary {
  background-color: #1abc9c;
  color: #FFFFFF;
}
.ps6-success {
  background-color: #2980b9;
  color: #FFFFFF;
}

.ps6-info {
  background-color: #e67e22;
  color: #FFFFFF;
}


Если же вы хотите использовать в оформлении списка иконки от Font Awesome, предварительно в шапку страницы сайта подключите:

Код

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


HTML-каркас списка изменится, например,так:

Код

<ul class="ps ps2 ps3">

<li class="ps1 ps4">
<span class="ps5">
/ <i class="fa fa-graduation-cap" aria-hidden="true"></i> Аристотель /
</span>
<span class="ps6 ps6-success"><i class="fa fa-quote-left" aria-hidden="true"></i></span> Бедность — источник возмущений и преступлений.  
</li>

<li class="ps1">
<span class="ps5">
/ <i class="fa fa-graduation-cap" aria-hidden="true"></i> Бердяев /
</span>
<span class="ps6 ps6-info"><i class="fa fa-quote-left" aria-hidden="true"></i></span> Знание — принудительно, вера — свободна.  
</li>

<li class="ps1">
<span class="ps5">
/ <i class="fa fa-graduation-cap" aria-hidden="true"></i> Бродский /
</span>
<span class="ps6 ps6-primary"><i class="fa fa-quote-left" aria-hidden="true"></i></span> В настоящей трагедии гибнет не герой — гибнет хор.  
</li>

<li class="ps1">
<span class="ps5">
/ <i class="fa fa-graduation-cap" aria-hidden="true"></i> Булгаков /
</span>
<span class="ps6 ps6-default"><i class="fa fa-quote-left" aria-hidden="true"></i></span> Наука еще не знает способов обращать зверей в людей.  
</li>

<li class="ps1">
<span class="ps5">
/ <i class="fa fa-graduation-cap" aria-hidden="true"></i> Вольтер /
</span>
<span class="ps6 ps6-primary"><i class="fa fa-quote-left" aria-hidden="true"></i></span> Все почести этого мира не стоят одного хорошего друга.  
</li>

</ul>


Как видите, у первого элемента в списке, в отличие от остальных, добавлен еще один класс, ps4 , этот класс убирает верхний бордер для первого элемента.
За различное цветовое оформление блоков слева от содержимого элемента, отвечают классы:

Код

.ps6-primary {
  background-color: #1abc9c;
  color: #FFFFFF;
}
.ps6-success {
  background-color: #2980b9;
  color: #FFFFFF;
}

.ps6-info {
  background-color: #e67e22;
  color: #FFFFFF;
}


В моих примерах не указана ширина для списка (он адаптивный), но если вам нужен список определённой ширины, укажите нужное значение параметра ширины списка.

На этом всё, спасибо за внимание!

Просмотров: 724 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: