Вкладки - один из любимых способов навигации у пользователей: и привычно (нас "с детства" приучают пользоваться вкладками во всех программах для 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>
|