Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Хитрости при программировании php, заметки по базам данных

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

Источник: realcoding.net

Вкладки - один из любимых способов навигации у пользователей:
и привычно (нас "с детства" приучают пользоваться вкладками во всех программах для windows) и
удобно (наглядность и очевидность действий). Да и дизайнерам удобно: можно вкладкам можно придавать
любой подходящий вид, без потери их функциональности. Часто их делают в графике с помощью карт-изображений
или разрезанием картинки на части. Попробуем обойтись простыми способами. С помощью таблицы.

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

<html>
<
head>
<
style>
.
open { border: solid 1px black; border-right: none; border-bottom: none; text-align: center; font-weight: bold;}
.
close { border: solid 1px black; border-right: none; text-align: center; background: #cfd6d4; }
</style>
</
head>
<
body>
<
table width=100% border=0 cellspacing=0 cellpadding=4>
<
tr>
<
td width=10 align=center style=border-bottom: solid 1px black> </td>
<
td width=25% class=open>Чебурашка</td>
<
td width=25% class=close>Крокодил Гена</td>
<
td width=25% class=close>Шапокляк</td>
<
td width=25% class=close>Крыса Лариса</td>
<
td width=10 align=center style=border-left: solid 1px black; border-bottom: solid 1px black> </td>
</
tr>
</
table>
</
body>
</
html>



Похожие статьи:
- Ruby on Rails vs. PHP stats
- PHP и mySQL (кратко)
- Время, затраченное на генерацию PHP скрипта
- Грубая сила – силища страшная!
- Бабочка MCMG
- Скролинг в броузере отличный от серого цвета
- SSI проверка IP
- Основы технологии Server Side Includes или SSI.
- Ускоряем JavaScript
- Введение в Cookies
- Оптимизация сайта для поисковых систем
- Золотые правила плохого HTML
- Базовые директивы директивы SSI


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.001]