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

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

HIT

19.11.2015

1485

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

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

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Галерея изображений Masonry

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

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

/
Responsive block’s

Responsive block’s

Это эксперимент по складываю блоков при разном разрешении экрана и в различных устройствах. Это очень сырое решение, не рекомендую применять на реальных сайтах. Данное тестирование лучше всего проводить с помощью Читать далее »

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

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

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

/

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

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

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