/ Дизайн / Блочная верстка сайта

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

HIT

19.11.2015

1228

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков.

Для добавления блоков, используйте тэги

<div class="box">
<div class="block-1">Содержимое</div> — ширина блока 1-24

Чтобы основной блок box немного смещал контент после себя, нужно добавить к нему класс row.

Продумать перенос блоков для мобильной версии — адаптивность.
Написать шорткод для удобства использования

Размеры блоков

12-ти ядерная архитектура
На данном сайте не используется.

1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
2/12
2/12
2/12
2/12
2/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
5/12
5/12
2/12
6/12
6/12
7/12
4/12
1/12
8/12
4/12
9/12
3/12
10/12
2/12
11/12
1/12
12/12

24-х ядерная архитектура

1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
3/24
3/24
3/24
3/24
3/24
3/24
3/24
3/24
4/24
4/24
4/24
4/24
4/24
4/24
5/24
5/24
5/24
5/24
4/24
6/24
6/24
6/24
6/24
7/24
7/24
7/24
3/24
8/24
8/24
8/24
9/24
9/24
6/24
10/24
10/24
4/24
11/24
11/24
2/24
12/24
12/24
13/24
11/24
14/24
10/24
15/24
9/24
16/24
8/24
17/24
7/24
18/24
6/24
19/24
5/24
20/24
4/24
21/24
6/3
22/24
2/24
23/24
1/24
24/24

Верстка Bootstrap

Все таки я пришел к тому что верстка Bootstrap это отличное решение дающее равное расстояние между блоками.

.box {
	min-width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    margin-left: -15px;
    margin-right: -15px;
}

.box-inside {margin-left: -15px; margin-right: -15px; display: flex;}

.box > *, .box-inside > * {padding-right: 15px; padding-left: 15px; order: 10;}
	
.block-1  {width: 8.33%;}
.block-2  {width: 16.66%;}
.block-3  {width: 25%;}
.block-4  {width: 33.33%;}
.block-5  {width: 41.66%;}
.block-6  {width: 50%;}
.block-7  {width: 58.33%;}
.block-8  {width: 66.66%;}
.block-9  {width: 75%;}
.block-10 {width: 83.33%;}
.block-11 {width: 91.66%;}
.block-12 {width: 100%;}

@media screen and (max-device-width: 480px) { 
	.box, .box-inside { flex-wrap: wrap; } 
	.box-inside > * {width: 100%;}
}

Отступы получаются фиксированными. А по краям выравнивание происходит за счет обратных значений margin.

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

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

Легкая верстка блоков

Представим, что нам нужно упорядочить записи плиткой, т.е. слева направо сверху вниз. При этом, чтобы записи в каждом ряду были выровнены по левому и правому краям. Сделаем максимально простым способом. Читать далее »

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

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

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

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

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

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

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

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

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