Всем привет. С возвращением. Поскольку это четвертая неделя, и вы работаете над своим финальным проектом, то, что я хочу сделать, это показать вам некоторые из различных вариантов, которые вы можете использовать при стилизации своих страниц. И в этом видео, я хочу показать вам, что происходит, когда вы пытаетесь сделать вертикальную навигационную панель. Поэтому здесь, в моем браузере, у меня есть то, как будет выглядеть страница, когда мы закончим. Но давайте продолжим, и я нажму обновление и сначала посмотрим, как это будет выглядеть, если я попытаюсь сделать навигационную панель, используя четыре простых ссылки. Опять же, ссылки встроены, поэтому они идут рядом друг с другом. Там нет цвета. Ничего не происходит. И это действительно ужасно. Так что позволь мне вернуть этот стиль. Обновите страницу. И я покажу вам, как я создал эту навигационную панель. Начнем с разговора о теле. Я просто помещаю некоторый цвет фона, заполнение и маржу. Это не очень важно здесь. Важно говорить о нашем разделе навигации. Одна из вещей, которые я хотел сделать, это показать вам идею использования этой коробки с размером границы. То, что это собирается сделать, это отнимает необходимость для вас подсчитать, сколько ширины, сколько заполнения, сколько границы. Ты не обязана делать математику. Браузер сделает это за вас. Я поместил некоторые простые границы, цвет, цвет фона и т. Д. Первое, Хотя, я сделал это встроенный блок, потому что я хочу, чтобы моя навигация была рядом с другими частями моей страницы. И так как навигатор является блоком, этого не произойдет, если я не брошу его туда. Поэтому я сказал, что хочу, чтобы это было около 20% страницы, а затем добавил некоторую маржу. Теперь, что-то новое, что вы, возможно, не видели раньше, это идея высоты равна 100vh. Это твоя высота видового экрана. Таким образом, это означает, что я хочу, чтобы навигация занимала всю высоту вашей страницы. Я не жестко покрываю его до 400 пикселей или 200 пикселей, потому что я не знаю, насколько большой экран, что вы смотрите. Далее, давайте поговорим о самих длинах. То, что я вошел и сделал, это я забрал регулярные скучные ссылки, и я действительно стилизовал их, чтобы сделать их что-то немного более оригинальным. Поэтому я поставил в высоту того, насколько высоко я хочу, чтобы каждая из моих ссылок была. А потом я вложил немного трюка и сказал, что хочу, чтобы высота линии была 45 пикселей. Так зачем мне это делать? Причина бы в том, что я хочу центрировать домашние фотографии или я хочу центрировать слова внутри него, и вот как я могу это сделать. Следующая классная вещь, которую я сделал, - это я добавил фоновое изображение. Я добавил эти маленькие стрелки. И самое классное, что я должен был сделать, что я действительно хочу указать вам, что я не могу просто связать папку, а затем файл. Из-за того, как я настраивал свой код, сначала мне нужно сказать, о, я знаю, что сейчас нахожусь в папке CSS, поэтому я собираюсь вернуться в мою основную папку, а затем найти изображения. Если это сбивает с толку, не волнуйся. Это совершенно новая концепция, но это то, что многие из вас собираются столкнуться, когда вы пытаетесь связать изображения из вашей таблицы стилей. Ладно. Последнее, что я сделал, это просто добавить немного обивки, так что есть место для картины, а затем добавить немного поля. Таким образом, используя эти разные вещи, о которых мы уже говорили, положение, извините , дисплей, высота строки, фоновые URL-адреса, мы смогли сделать что-то, что, я думаю, выглядит действительно круто для простой вертикальной навигационной панели. Давай и попробуй. Удачи.