Горизонтальное меню html css: Меню для сайта html и css горизонтальное

Горизонтальное меню веб-страницы HTML и CSS со значком «Домой»

У меня есть простое горизонтальное меню с раскрывающимся списком, но я хочу добавить значок «Домой» слева, встроенный в другие элементы текстового меню… Здесь я застрял. Кто-нибудь может помочь?

Вот так:

 .btn {
  цвет фона: зеленый;
  граница: нет;
  белый цвет;
  отступ: 12px 16px;
  размер шрифта: 22px;
  курсор: указатель;
} 
 
<дел>
  HTML
  CSS
  CSS
 

Обновление: в горизонтальном меню есть пробел, и я не могу понять, что это такое.

  • HTML
  • CSS
  • Меню

3

Вы также можете обернуть тег привязки вокруг значка

 nav {
  фон: черный;
  белый цвет;
  отступ: 10 пикселей;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  зазор: 15 пикселей;
}
навигация {
  белый цвет;
  текстовое оформление: нет;
} 
 
<навигация>
  
  HTML
  CSS
  CSS
 

1

Чтобы включить значок дома, вам нужно добавить . Затем просто примените display: flex к контейнеру. Чтобы разнести их, вы можете использовать свойство gap . Чтобы центрировать их по вертикали, используйте align-items: cenetr

 nav {
  фон: черный;
  белый цвет;
  отступ: 10 пикселей;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  зазор: 15 пикселей;
}
навигация {
  белый цвет;
  текстовое оформление: нет;
} 
 
<навигация>
  
  HTML
  CSS
  CSS
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Панель навигации CSS

Следующая глава >>

Демонстрация: панели навигации

Вертикальный

  • Домашний
  • Новости
  • Контакт
  • О

Горизонтальный

  • Домашний
  • Новости
  • Контакт
  • О

  • Дом
  • Новости
  • Контакт
  • О

Панели навигации

Удобная навигация важна для любого веб-сайта.

С помощью CSS вы можете превратить скучные HTML-меню в красивые панели навигации.

Панель навигации = Список ссылок

В качестве основы для панели навигации требуется стандартный HTML.

В наших примерах мы создадим панель навигации из стандартного HTML-списка.

В наших примерах мы создадим панель навигации из стандартного HTML-списка.

Пример

Попробуйте сами

Теперь давайте удалим маркеры, поля и отступы из списка:

Пример

ul {
   тип-стиль-списка : никто;
   маржа : 0;
   заполнение : 0;
}

Попробуйте сами

Объяснение примера:

  • list-style-type: none; — Удаляет пули. Для панели навигации не нужны маркеры списка
  • Установить поля: 0; и заполнение: 0; для удаления настроек браузера по умолчанию

Вертикальная панель навигации

Чтобы построить вертикальную панель навигации, вы можете стилизовать элементы внутри списка в дополнение к приведенному выше коду:

Пример

li a {
   дисплей : блокировать;
   ширина: 60 ​​пикселей;

}

Попробуйте сами

Объяснение примера:

  • display: block; — Отображение ссылок в виде блочных элементов делает кликабельной всю область ссылок (а не только текст) и позволяет указать ширину (и отступы, поля, высота и т. д., если хотите)
  • ширина: 60 ​​пикселей; — Блочные элементы занимают всю доступную по умолчанию ширину. Мы хотим указать ширину 60 пикселей

Вы также можете установить ширину

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *