/ Сайтостроение / Дизайн / Верстка типовых блоков

Верстка типовых блоков

23.09.2017

506

Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто.

Изображение текст

Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности и т.д.

Если пунктов немного (1-3), то можно верстать так:

<div class="list"> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div class="list"> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>

Стили:

.list {display: flex; align-items: center; margin-bottom: 15px;}
.list img {max-width: 75px; padding-right: 25px;} 
  
@media screen and (max-device-width: 375px) { .list img {align-self: start;} }

Если пунктов побольше, то можно верстать так:

<div class="lists">

<div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>
<div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>
<div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>

</div>

Стили:

.lists > div {display: flex; align-items: center; margin-bottom: 15px;}
.lists > div img {max-width: 75px; padding-right: 25px;} 
  
@media screen and (max-device-width: 375px) { .lists > div {align-self: start;} }

При необходимости корректируем ширину изображения. Но необходимо учитывать максимальную ширину исходника, и наоборот не использовать большие изображения для миниатюры.

Если в тексте должен быть заголовок или несколько абзацев, то добавляем дополнительный div

<div class="list"> 

<img src="/wp-content/uploads/2016/07/nature-lake.jpg"> 

<div> 
<h3>Заголовок текста</h3> 
<p>Некий текст</p>
<p>Учитывающий все современные тенденции. Множество конфигураций страниц для удовлетворения любых потребностей.</p> 
</div>  
  
</div>

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Первая последняя записи в ряду

Первая последняя записи в ряду

Добавляем классы для первых и последних записей в ряду. Вариант 1: Глобально, в файле функций Вставляем в файл functions.php. В данном примере разделение по 4 записи в ряду. add_filter('post_class', 'dobavit_pervii_klass'); Читать далее »

FlexBlock. Современная верстка

FlexBlock. Современная верстка

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »

/
Галерея изображений Masonry

Галерея изображений Masonry

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой. Галерея изображений Masonry jquery Вставляем изображения в общий div с классом grid, каждое изображение в Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Верстка типовых блоков Верстка типовых блоков
Безопасность сайта
Рекомендации для васБезопасность сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.