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

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

19.11.2015

892

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

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

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

Тэги:

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

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

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

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

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

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

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

Responsive block’s

Responsive block’s

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

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

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

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