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