Итак, друзья, мы создали первый экран нашего приложения и оформили ее по нашему вкусу (точнее, по моему вкусу). Сейчас наше приложение выглядит вот так:
А вот так выглядит наш исходный код:
У нас готов первый экран, на этом уроке мы займемся вторым экраном. Напомню, что на втором экране находится игровое поле и кнопка "Начать заново". Ну, что ж, приступим.
Первым делом спрячем первый экран, чтобы он не мешался. Это делается при помощи стилевого свойства display. Мы уже знакомы с ним, а точнее с двумя его значениями: block и inline-block. Сейчас мы будем использовать значение none. Это значение полностью скрывает элемент, к которому оно относится. Сделайте вот так:
Сохраните файл и обновите страницу. Как вы можете видеть, первый экран пропал, оставив нам место для работы. Теперь создадим второй экран, добавим блочный элемент div и сразу сделаем у него видимой границу:
Смотрим, что получилось:
Прямоугольник с пустым содержимым. Для каждой клетки мы создадим по одному блоку div и поместим их внутрь второго экрана. Для клеток мы сразу укажем какой-нибудь размер и нарисуем границу:
Здесь девять одинаковых строк, напишите первую и просто скопируйте. и вот, что у нас получилось:
Вот такая заготовка. Не волнуйтесь, к концу урока все будет выглядеть в лучшем виде.
Как видите, все клетки расположены в столбец, а нам надо, чтобы получилась таблица. Так получилось потому, что свойство display для элемента div по умолчанию установлено в block. Что будет, если мы установим это значение в inline-block? Тогда они расположатся в строку, а если мы правильно подберем ширину у клеток, то они расположатся по три в строке. Следовательно, нужно в стиль каждой клетки дописать стилевое свойство display. Представляете, проделать это 9 раз? А потом подбирать ширину еще 9 раз. Нет, мы пришли в этот мир творить, а не тратить время в рутине.
Мы можем сделать все гораздо проще, но для этого придется немного видоизменить наш код.
Мы уже знакомы с атрибутами, атрибуты позволяют нам изменять свойства элемента. Сегодня познакомимся с еще одним свойством элемента - class. Class - это некоторая текстовая метка для элемента. В основном класс используется для управления стилями. У каждого элемента может быть несколько классов. Сейчас мы для каждой ячейки добавим этот атрибут:
Теперь мы можем написать код, который для каждого элемента с классом cell будет сопоставлять некоторый стиль. Этот код мы будем писать внутри элемента head. Смотрите:
Мы добавили еще один элемент внутрь элемента head. Элемент style содержит внутри себя стили для элементов на странице. Мы указываем имя класс (с точкой в начале) и затем в фигурных скобках перечисляем стилевые свойства. И тогда они применяются для всех элементов с таким классом.
Сохраните и обновите страницу, как видите, ничего не изменилось, а теперь давайте удалим атрибут style для всех ячеек:
Сохраните-обновите. Как видите, результат остался прежним, так действуют стили совместно с классами. Также и код стал проще и понятнее. Теперь мы можем поправить стили в одном месте и они изменят отображение всех привязанных элементов.
Перед тем как упорядочить ячейки давайте сделаем еще один класс, класс экрана, который мы сможем применить как к первому, так и ко второму экрану.
Также, я сразу изменил свойство display для ячеек, сейчас они отображаются в строку. Теперь добавим этот класс screen ко второму экрану:
Дополнительно я удалил свойство display из стиля класса screen. Сохраните файл и обновите страницу.
Теперь на странице показываются сразу два экрана. Это прекрасная возможность оценить мощь классов и стилей. Я уже говорил ранее, что у каждого элемента может быть несколько классов. Поэтому сейчас мы к первому экрану добавим класс, который будет скрывать его:
Сохраните-обновите. Должно быть вот так:
Прекрасно. Теперь можно подобрать ширину ячеек:
Получилось вот так:
Прекрасно. Теперь уменьшим немного ячейки, сделаем границы голубыми, уменьшим их толщину, и закруглим углы. И добавим кнопку снизу, про которую мы благополучно забыли.
Вот так должно получиться:
Итак, что мы сделали? подобрали ширину и высоту ячеек, изменили толщину границы ячеек, изменили цвет границы, добавили внешний отступ для ячеек. Таким образом ячейки расположились по центру.
Для экранов увеличили высоту, чтоб поместилась кнопка и изменили внутренний отступ - это тоже повлияло на то, что ячейки расположились по центру. Ну и скопировали кнопку из первого экрана, изменив внешний отступы и текст внутри кнопки.
На этом разрешите откланяться, в следующем уроке мы сделаем третий экран, затем "причешем" код и, наконец, возьмемся за саму логику игры, осталось совсем чуть-чуть.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки. Другие курсы и навигация по каналу
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.