Как сделать верхнюю навигационную панель с помощью html и css?

Question

Исидор

html , css

Как сделать верхнюю навигационную панель с помощью html и css?

26 августа 2023 г. 18:36

Ответы на вопрос 2

Похожие вопросы

Answer 1

Конечно! Вот пример кода для создания минималистичной навигационной панели с разделительной линией:

HTML:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Навигационная Панель</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <a href="#" class="navbar__link">Главная</a>
        <span class="navbar__divider"></span>
        <a href="#" class="navbar__link">О нас</a>
        <span class="navbar__divider"></span>
        <a href="#" class="navbar__link">Контакты</a>
    </nav>
</body>
</html>
```

CSS (style.css):

```css
.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f1f1;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.navbar__link {
    text-decoration: none;
    color: #333;
    padding: 10px;
}

.navbar__divider {
    height: 30px;
    width: 1px;
    background-color: #ccc;
    margin: 0 10px;
}
```

В этом примере мы используем flexbox для выравнивания элементов в навигационной панели и добавляем фиксированную позицию, чтобы панель была закреплена вверху экрана. Разделительная линия создается с использованием псевдоэлемента `::after`.

Вы можете изменить цвета, размеры и стилизацию по своему усмотрению. Удачи в изучении HTML и CSS!

Answer 2

nav class="nav">
  a class="item" href="#about">About us 
  a class="item" href="#why-us">Our services 
  a class="item" href="#expertise">Our expertise 
  a class="item" href="#prices">Prices 
  a class="item" href="#address">Address 


код в 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;
}