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

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

19.11.2015

720

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

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

<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'); Читать далее »

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

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

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

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

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

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