Как создать вкладку с помощью CSS и без изображений

Навигация по веб-страницам является формой списка, а навигация с вкладками похожа на горизонтальный список. Довольно просто создать горизонтальную навигацию с вкладками с помощью CSS, но CSS 3 дает нам еще несколько инструментов, чтобы они выглядели еще лучше.

Этот учебник проведет вас через HTML и CSS, необходимые для создания CSS-меню с вкладками. Нажмите на эту ссылку, чтобы увидеть, как она будет выглядеть.

Это меню с вкладками использует нет изображений, просто HTML и CSS 2 и CSS 3. Его можно легко отредактировать, добавив больше вкладок или изменив в них текст.

Поддержка браузера

Это меню вкладок будет работать во всех основных браузерах, включая Firefox, Safari, Opera, Edge и Chrome.

Написать свой список меню

Скриншот CSS 3 Tabs

 Дженнифер Кирнин

Все навигационные меню и вкладки — это просто неупорядоченный список. Поэтому первое, что вы хотите сделать, это написать неупорядоченный список ссылок, куда вы хотите перейти с помощью вкладок.

В этом руководстве предполагается, что вы пишете свой HTML в текстовом редакторе и знаете, где разместить HTML для вашего меню на веб-странице.

Напишите свой неупорядоченный список следующим образом:

    • CSS 3
    • ID = "текущие"> Вкладки
    • За
    • меню
  • класс = "tablist"> 

    Вы заметите, что код вызывает две вещи:

    класс = "tablist"

    а также

    ID = "ток".

    Первый требуется. Если вы не поместите класс tablist в неупорядоченный список, вкладки не будут работать. Второй не является обязательным. Поместите вкладку, которую вы хотите выделить на этой странице. Мы обычно используем это, чтобы выделить страницу, на которой мы находимся, но вы можете использовать ее, чтобы выделить самую важную вкладку. Или вы можете удалить его полностью.

Ссылка на основную публикацию