<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое гибкая сетка в адаптивной верстке?

Что такое гибкая сетка в адаптивной верстке?

Всем привет! Сегодня мы поговорим про то, что такое grid systems(система сеток) или просто гибкие сетки в адаптивной верстке.

Сначала дадим определение тому, что такое Grid System.

Grid System - коллекция стилей, основанных на классах, которые позволяют пользователю контролировать макет страницы, используя систему строк и колонок.

Сейчас, я думаю, вы мало что поняли, но дальше я постараюсь все вам разъяснить.

Представим, что у нас есть страница блога. Она разделена на 2 колонки: слева основная часть, а справа - сайдбар. Давайте попробуем создать гибкую сетку для такой страницы.

Ну, для начала мы должны сделать хоть и элементарную, но html разметку.

<div id="page">
  <div class="blog section">
   <div class="main"></div>
   <div class="sidebar"></div>
  </div>
</div>

Здесь у нас есть блок, который содержит всю страницу, в нем лежит блок с блогом, в котором лежат 2 блока: основная часть страницы и сайдбар.

Итак, вся наша страница будет размером 960px. Вся сетка разделена на 12 колонок по 69px. каждая. Часть для блога будет шириной 900px. Основная часть страницы будет 566px, сайдбар - 331px.

Вот, что мы получим в итоге

#page {
  margin: 36px auto;
  width: 960px;
}

.blog {
  margin: 0 auto 53px;
  width: 900px;
}

.blog .main {
  float: left;
  width: 566px;
}

.blog .sidebar {
  float: right;
  width: 331px;
}

Все бы хорошо, но, как вы можете видеть, все это статично, задано в пикселях. Мы же хотим, чтобы наша сетка меняла свои размеры в зависимости от того, на каком экране просматривается страница, следовательно, нам нужно все задать в процентах. Давайте это и сделаем.

Для этого есть все та же формула, что и для шрифтов

цель / контекст = результат

Переведем блок всей страницы из пикселей в проценты.

#page {
  margin: 36px auto;
  width: 90%;
}

90% выбрано по тому, что в таком случае у нас будут еще и отступы по краям по 5%. Однако вы можете выбрать другое значение.

Идем дальше и переведем в проценты блок с классом .blog.

Используем нашу формулу: 900 / 960 = 0.9357

Умножим результат на 100, чтобы получить проценты, и пропишем в наш css.

.blog {
  margin: 0 auto 53px;
  width: 93.75%;
}

То же самое нужно сделать и с колонками, но заметьте, что контекст изменился. Т.к. колонки находятся внутри блока с классом .blog, то он и будет контекстом. Давайте посчитаем.

566 ÷ 900 = .628888889

331 ÷ 900 = .367777778

Переводим все в проценты и записываем в таблицу стилей.

.blog .main {
  float: left;
  width: 62.8888889%;
}

.blog .sidebar {
  float: right;
  width: 36.7777778%;
}

Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.

Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.

Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!

А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (10):

And_Smi And_Smi 22.10.2014 14:02:46

Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните! А что будет, если округлить?

Ответить

alexandrdante alexandrdante 23.10.2014 00:11:48

ну,а вы попробуйте и увидите результат) уже выйдет кривая сетка)или где-то будет размер сверх адаптивности)

Ответить

DiabloTM DiabloTM 11.11.2014 23:39:24

And_Smi А что будет, если округлить? Просто статья перестала нести до конца смысловой нагрузки и была изменена чтобы контент был уникальным и текст, чтобы сайт (портал) индексировался поисковыми системами! Со слов первосточника Итана Маркотта - в книге Отзывчивый веб-дизайн написано следующее: Мы получили какое-то совсем некрасивое число. Может быть, самое некрасивое, которые вы сегодня видели. (Но подождите, эта глава еще не окончена.) Вам захочется округлить его до более-менее при- емлемого числа – скажем, 0,46 em. Даже не ду- майте! Может, ваши глаза и устанут смотреть на 0,458333333333333, но именно это число идеаль- но представляет желаемый кегль в пропорциональном отношении. К тому же браузеры мастерски владеют ис- кусством округления лишних десятичных знаков, когда преобразовывают значения в пиксели. Поэтому нужно дать им больше, а не меньше, и в конце вас будет ожи- дать отличный результат.

Ответить

maks0703 maks0703 22.10.2014 20:59:46

у класса .blog в ширине не задан знак %.

Ответить

DiabloTM DiabloTM 11.11.2014 23:00:09

Это придаст вашему сайту ещё большей адаптивности ещё margin и padding адаптировать и можно собрать адаптивный дизайн спомните коробочную модель состоящая padd, marg, border приплюсуйте LESS чтобы код уменьшить в HTML ARIA для доступности в интернете для огранниченных людей и всё радуйтесь вёрсточкой конечно до bootstrapa 3 далеко но для понимания пойдет. /*Styles by DiabloTM*/ /*Adaptive*/ .wrapper{max-width:960px; margin:0 auto;} .wrapper .cols{float:left;} .wrapper .cols.col-1{width:8.333333333333333%;} .wrapper .cols.col-2{width:16.66666666666667%;} .wrapper .cols.col-3{width:25%;} .wrapper .cols.col-4{width:33.33333333333333%;} .wrapper .cols.col-5{width:41.66666666666667%;} .wrapper .cols.col-6{width:50%;} .wrapper .cols.col-7{width:58.33333333333333%;} .wrapper .cols.col-8{width:66.66666666666666%;} .wrapper .cols.col-9{width:75%;} .wrapper .cols.col-10{width:83.33333333333333%;} .wrapper .cols.col-11{width:91.66666666666666%;} .wrapper .cols.col-12{width:100%;} .row, .wrapper{overflow:hidden;} <!--Wrapper--> <div class="wrapper"> <div class="row"> <div class="cols col-12"> Ставте смотря сколько у вас в макете psd модульной сетки колонок. </div><!--/end .cols.col-12--> </div><!--/end .row--> </div><!--/end .wrapper--> <!--End Wrapper-->

Ответить

Leha06607 Leha06607 03.12.2014 19:20:54

если ширина 960 , почему делим на 900 ?

Ответить

Maks4ever Maks4ever 29.12.2014 15:33:47

остальное идёт на отступы

Ответить

repochok202 repochok202 09.12.2014 20:44:36

хорошая статья

Ответить

Maks4ever Maks4ever 29.12.2014 15:19:47

не уверен что можно писать имена классов через пробел <div class="blog section">

Ответить

Nosferatv Nosferatv 21.05.2015 19:05:16

А я уверен что можно, а в некоторых случаях и нужно, особенно когда мы указываем не один класс, а несколько.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.