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

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

HIT

23.09.2017

1425

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

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

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

Если пунктов немного (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'); Читать далее »

Одинаковая высота блоков

Одинаковая высота блоков

Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами css это делать не удобно, т.к. требует специальной верстки. Отлично с данной задачей справляется jQuery. Скрипт EqualHeight Скрипт для Читать далее »

Фоновые линии

Фоновые линии

Добавим линии в верстку сайта. Это разбавит однородный фон, а также придаст стройности разным блокам контента. 6 секторов Разделение фона линиями на 6 секторов. 12 секторов Тот же самый принцип, Читать далее »

/

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

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

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