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

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

23.09.2017

703

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

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

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

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

Тэги:

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

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

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

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

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

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

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

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

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

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

/

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

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

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