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

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

23.09.2017

897

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

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

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

Если пунктов немного (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>

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

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

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

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

/
Построение записей сайта

Построение записей сайта

Можно по разному располагать записи рублики, например: плиткой или списком. Также сделаем механизм по переключению режимов представления постов. Верстка плиткой HTML <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div class="hentry-box"> Читать далее »

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

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

Верстка типовых блоков Верстка типовых блоков
Имитация формы Jivosite
Рекомендации для васИмитация формы JivositeOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.