SkylineLab > Статьи > В помощь программисту > Создание вкладок при помощи HTML-средствСтатьи
Создание вкладок при помощи HTML-средств

В помощь программисту: Статьи - Создание вкладок при помощи HTML-средств

     Создание вкладок при помощи HTML-средств

      Вкладки являются одним из самых популярных способов навигации у всех пользователей. Это понятно, поскольку очень похоже на структуру операционной системы Windows, которая есть у каждого, а так же наглядно. Кроме того, вкладки удобны для дизайнеров: ведь можно придавать вкладкам любой требуемый вид, при этом их функциональность не будет утрачена. Часто вкладки делают графическими при помощи карт-изображений либо разрезая картинки на части. Но можно обойтись очень простыми способами, при помощи таблицы.

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

      Нужно всего два селектора, один из которых изменяет стиль текущей вкладки, будет называться open, а (close) будет управлять видом неактивной вкладки.

      Рамку создаем при помощи атрибута border, который позволит задать стиль рамки, толщину и ее цвет. Чтобы не получилась двойная рамка в местах состыковки ячеек, нужно убрать границу справа. Для этого используем параметр border-right: none. Для текущей вкладки (open) спрячем и нижнюю границу. Вот и все, вкладка готова.


<< Назад

+7 (903) 66-22-797