С возвращением, все.
Пришло время перестать учиться новому и
претворить в жизнь то, о чем мы говорили на прошлой неделе.
Что мы собираемся сделать, так это добавить некоторые новые компоненты, над которыми мы работали.
Но мы сделаем это вместе, как мы кодируем, так что снова я хочу подчеркнуть, что я
действительно надеюсь, что вы остановитесь, положите все, что вы делаете, взбите свой ноутбук или
что-то, что вы кодируете, и
кодируйте со мной, а не просто наблюдая за тем, что я делаю.
Когда мы в последний раз кодировали вместе,
надеюсь, вы создали что-то похожее на этот экран.
Мы вошли, и мы использовали ширину и различные дисплеи,
отступы и поля, и мы делали нашу страницу немного лучше.
Сегодня мы собираемся пойти дальше и добавить некоторые различные элементы,
такие как градиент, вместо того, чтобы иметь три секции равной ширины, мы собираемся иметь некоторые
разделы занимают половину страницы, некоторые занимают полную страницу, мелочи вроде этого.
И мы будем использовать эти новые селекторы, которые мы изучали.
Итак, давайте продолжим и начнем.
Первое, что я хочу сделать, это поместить в этот линейный градиент или
новый цвет, который идет как в верхний, так и в нижний колонтитул.
Так что, когда я пойду к своему стилю, и я приду сюда.
Одна из первых вещей, которые я хочу сделать, - я хочу добавить, что нам нужен новый
фон для верхнего и нижнего колонтитула.
И я начну с того, что поставлю его прямо здесь.
Я знаю, что жульничал, скопировал и наклеил.
Но я хотел это сделать, прости.
Я хотел это сделать, потому что я продолжал испортить, когда я печатала.
Итак, то, что я положил здесь, это то, что я начал с ввода цвета фона.
Вы всегда хотите это сделать, потому что если вы этого не сделаете, если по какой-то причине
браузер не может обрабатывать линейный градиент, вы дали ему резерв.
Затем у меня было мое правило линейного градиента в каждом из разных веб-китов.
Поэтому, как только я добавлю это, и я нажимаю Save,
мы можем обновить страницу и посмотреть, есть ли у нас такой серо-голубой цвет, который мы искали.
Эй, отлично, мы сделали.
Теперь, когда я написал это правило, вы можете помнить, что я помещаю верхний,
нижний колонтитул, и это означает, что оно должно применяться к обоим этим элементам.
Но это применимо только к заголовку.
Нам нужно подумать о том, почему это произошло.
Причина в том, что если мы прокручиваем вниз, вы можете увидеть, что дальше на странице, которую
я сказал, я хочу, чтобы мой фон нижнего колонтитула был таким конкретным цветом.
Это перезаписывает все предыдущие правила, так что я пойду сюда.
И я удалю это и скажу, давайте избавимся от этого.
Обновитесь и отлично.
Теперь это выглядит намного лучше.
Итак, мы сделали это одно изменение, и, надеюсь, вы привыкаете к идее
использования запятой для стилизации двух элементов одновременно, вы можете сделать еще больше и
поместить эти префиксы веб-комплекта или префиксы браузера.
Если вы избавитесь от него, он может работать в вашем браузере,
но есть действительно хороший шанс, что он не будет работать в другом браузере.
Так что мы хотим попрактиковаться.
Ладно, давайте взглянем и посмотрим, что у нас есть.
У меня градиент.
Следующее, что я хочу решить, это стиль этих ссылок, и
опять же, я не ставлю все ссылки на странице,
потому что, если вы заметите, эта, внизу, все еще выглядит точно так же.
Я хочу только стилизовать ссылки, которые находятся внутри раздела навигации.
Итак, я собираюсь пойти прямо сюда и, я стилизовал свой навигатор.
Выглядит хорошо. В
следующий раз, я скажу,
эй, давайте стилизовать только те ссылки, которые находятся внутри навигатора.
И мы внесли немало изменений.
Если я приду сюда, мы увидим это.
Один мы добавили что-то, что выглядит как структура коробки к нему.
Обычно вы не могли этого сделать, потому что в линейных элементах не принимают ширину и
высоту, но мы будем идти вперед и играть с ним.
Давайте продолжим и начнем, я сначала скажу, что я хотел бы,
чтобы ширина каждой из моих ссылок была около 22%, сохраните это.
Освежись, нет, не повезло.
Так что опять же, помните, одна из вещей, которые я сказал, заключается в том, что ссылки встроены, и
вы не можете дать им ширину или высоту.
Так что теперь, если я войду и скажу, давайте изменим наш дисплей на
встроенный блок, мы должны иметь гораздо больше удачи.
Почти слишком много удачи, потому что экран не совсем подходит.
Все в порядке? Ладно.
Так здорово, это на шаг ближе.
Добавим, что другой цвет фона.
И я думаю, что сделал его белым.
Но ты можешь использовать всё, что захочешь.
Бум.
Мы определенно приближаемся.
Маленькие крошечные шаги приближают нас намного, намного ближе.
Итак, следующая вещь, которую я хочу решить, когда мы пытаемся изменить нашу страницу,
это идея, что некоторые разделы должны занять половину экрана,
в то время как некоторые из разделов должны идти вперед и занять всю ширину экрана.
И мы будем делать это, используя классы.
Если вы помните,
занятия — это способ стилизовать определенные группы элементов в аналогичной манере.
Так что давайте посмотрим, как мы это сделаем.
Первое, что мне нужно сделать, это сделать новый класс, и этот класс скажет, что
вместо всех разделов, занимающих 30%, я хочу только некоторые из них,
я позвоню им наполовину, чтобы заняться, скажем, 45% страницы.
Таким образом, он собирается забрать только некоторые секции, не все из них.
Если я обновлюсь, это еще не сработает, потому что проблема в том, что я
избавился от стиля раздела и заменил его этим классом, и
нигде в моем HTML я не помню, чтобы ссылаться на класс.
Так что впервые мы собираемся войти в наш HTML-файл и
начать вносить некоторые изменения.
Собираюсь сюда, я бы хотел, чтобы этот занял только половину экрана,
так что я скажу класс = половина.
И я бы хотел, чтобы эта заняла половину экрана.
У нас есть это.
Мы не собираемся менять другую, так что
когда я обновлюсь, вы увидите, что двое из них теперь рядом друг с другом.
Так что, когда я обновился, он выглядит немного ближе, кроме того, у меня есть
странные вещи, которые происходят с синими и разными вещами.
Так что это потому, что я использовал float.
И если вы помните, когда вы используете float иногда это заставляет вещи, которые
находятся рядом друг с другом, быть в основном в позициях, в которых вы не хотите, чтобы они находились.
Итак, наш нижний раздел, тот, который мы знали, что не хотим плавать,
нам нужно войти и сказать «привет», есть определенные секции, которые мы хотим быть целыми.
Итак, давайте вернемся к нашей таблице стилей.
И я собираюсь просто немного скопировать и вставить сюда.
И я скажу, знаешь что?
Этот раздел, мне нужно, чтобы он был классом, равным целому.
Так что вернись сюда.
Section class = целое, что означает, что этот должен занимать всю ширину,
не пытайтесь плавать его рядом друг с другом.
И давайте продолжим и освежимся.
Выглядит намного лучше.
Похоже, что мы хотели, чтобы все было в конце.
И еще раз, обратите внимание.
Стилизованы только ссылки навигации, а не все ссылки.
Мы ввели градиент.
Если ваш градиент не работает,
это может быть связано с тем, что вы не поместили префиксы в своем браузере.
У нас действительно много мелочей происходит на этой странице.
И опять же, я не художник-график, поэтому я не делаю самых красивых вещей.
Но это довольно весело, чтобы войти и создать разные вещи и
посмотреть, как вы можете их стиль самостоятельно.
Так что, продолжай идти и удачи, и не волнуйся, когда попадешь в эти опечатки.
Мы все делаем.