Как создать навигационную панель сверху в html и css?
Пожалуйста отправьте код html и css на самый минималистичный навбар который прилиплен к вверху и блоки с ссылкой заполнили всю ширину экрана и между ними была линия которая их отделяет. Я учу html css уже 3 месяца но навбар создать такой кошмар. Пожалуйста не критикуйте меня.
Дополнительно:
покажите хотя бы как пытались
<nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> |
<nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav>
Выровнял все li флексом чтобы не мучаться с врапами и кривой позицией.
Центрировал все li и дал ul высоту 35px.
До этого я установил reset.css чтобы опять же не мучаться.
И в этом все закончилось , размер li не заполняет высоту и доступную ширину.
Я могу создать правильно навбар с логотипом кнопочкой меню и картинкой (это легче чем простой бессмысленный навбар о котором я говорю).
1. Чтобы не мучиться, reset.css лучше как раз таки удалить. И сбрасывать только то, что не нужно и только там, где нужно.
2. Обычно в верстке не задают высоту. Просто потому что мы не знаем сколько будет контента.
3. Выложите свой неудавшийся пример на codepen.io
А также скрин как должно быть.
Я учу html css уже 3 месяца но навбар создать такой кошмар.
Да, пожалуй, для такой штуки хватило и бы одного месяца или даже поменьше. Хотя, конечно, интенсивность обучения может быть разной.
Ответы:
привет!
код в html, надеюсь тут ясно
nav class="nav">
a class="item" href="#about">About us /a>
a class="item" href="#why-us">Our services /a>
a class="item" href="#expertise">Our expertise /a>
a class="item" href="#prices">Prices /a>
a class="item" href="#address">Address /a>
/nav>
код в css, как то так, вместо flex-end можно что-нибудь другое, что нравится больше, цвет поменять и тп.
.nav {
display: flex;
justify-content: flex-end;
background-color: #1e313e;
padding: 10px;
}
.item {
color: #efd3a2;
padding: 20px;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания навигационной панели сверху на веб-странице с использованием HTML и CSS, вам понадобится следующий код:
HTML:
<title>Навигационная панель</title> <div class="navbar"> <a href="#home">Главная</a> <a href="#about">О нас</a> <a href="#services">Услуги</a> <a href="#contact">Контакты</a> </div>
CSS (styles.css):
body { margin: 0; font-family: Arial, sans-serif; } .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 20px; text-decoration: none; } .navbar a:hover { background-color: #ddd; color: black; }
Этот код создаст навигационную панель сверху на вашей веб-странице с четырьмя ссылками: "Главная", "О нас", "Услуги" и "Контакты". Вы можете легко добавить или удалить ссылки, изменив содержимое тега
CSS стили определяют внешний вид навигационной панели: фоновый цвет, расположение ссылок, отступы и цвет текста при наведении курсора.
Не забудьте подключить файл стилей (styles.css) к вашему HTML документу, чтобы стили были применены.
Надеюсь, этот ответ поможет вам создать навигационную панель сверху на вашем сайте с помощью HTML и CSS. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать. Удачи!