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

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

19.11.2015

852

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

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

<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.

Тэги:

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

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

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

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

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

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

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

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

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

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

/

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

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

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