Всем привет.
Добро пожаловать в другой обзор кода.
Ранее я создал панель навигации, которая работала вертикально.
Она пошла вверх и вниз.
Сегодня я просто хочу показать вам, как вы можете использовать один и тот же HTML-код
, но вместо этого создать горизонтальную навигационную панель.
Итак, давайте взглянем.
Я хочу пойти к чему-то, что выглядит немного более похожим на это.
И, я не только пошел на горизонтальную навигационную панель, я хочу показать вам
пример того, какая страница является той, на которую мы сейчас смотрим.
Итак, если вы заметили, на панели навигации
ссылка на фотографии выглядит немного отличается от других.
Очень часто это делать, чтобы показать людям, что
это страница, на которую вы смотрите прямо сейчас.
Итак, давайте посмотрим на CSS и посмотрим, как я взял простой HTML и
превратил его в что-то, где у меня есть красиво оформленная панель навигации.
Ладно, мы начнем со слов, знаешь что?
Мы хотим, чтобы стиль все ссылки, которые находятся в панели навигации.
Я не хочу стилизовать все ссылки, вместо этого
я хочу указать только ссылки, которые находятся внутри nav.
И как только мы это сделали, мне было довольно просто идти вперед и положить в то, что я хочу
определенную высоту, определенный цвет фона, определенное текстовое оформление.
Одна из вещей, которые я добавил здесь, - это радиус границы.
Радиус границы кричит коробки, так что
если посмотреть, здесь все немного изогнуто вдоль стороны.
Ничего слишком важного прямо здесь.
Следующее, что у меня есть,
новое, это идея иметь класс под названием current.
То, что делает текущий класс, это в основном способ тегов.
Эй, ты знаешь все разные ссылки, которые есть на моей странице?
Я хочу показать тебе, на кого я смотрю прямо сейчас.
И все, что я сделал здесь, это я пошел и я установил его так
, что у меня другой цвет фона.
Ладно.
Таким образом, было довольно просто создать эту горизонтальную
навигационную панель, если вы очень осторожны в том, чтобы распределить между вещами.
И еще раз, я просто хочу показать вам, что такие вещи, как обивка и
маржа, очень важны, и они очень аддитивные.
Итак, когда вы используете проценты, а не пикселей, это будет держать его от того
, что он выглядит нормально на большом экране, а затем очень плохо на маленьком экране.
Последнее, что я вроде как поставил здесь просто, чтобы повеселиться и
помочь вам снова показать некоторые из разных вещей, которые вы можете сделать с помощью CSS,
это я добавил состояние зависания для любой из моих навигационных ссылок.
Так что если вы посмотрите, я вошел сюда и
сказал, что когда кто-то наводит на страницу, я хочу изменить цвет текста
и я хочу избавиться от всего этого радиуса границы.
Так что давайте взглянем.
Иди сюда, я наведу курсор на рецепты, и
текст превратится из белого в черный, и он исчез из круга в квадрат.
Теперь, когда я перехожу с вами все эти разные примеры, очень
важно, чтобы вы поняли, что я не художник, и я не очень художественный.
И я надеюсь, что вы можете взять эти фрагменты кода и
превратить его в нечто, что выглядит действительно здорово и настроено для
страницы, которую вы пытаетесь создать.
Так что идите вперед, повеселитесь, а теперь попробуйте сделать навигационную панель,
которая идет различными способами, вверх и вниз, боком или даже комбинациями.
Удачи.