Чтобы не использовать сложных конструкций из таблиц, покажем как сделать простое меню в виде вкладок с помощью html и немного css. Для создания меню из 5 пунктов нам потребуется таблица из 7 ячеек. Две боковые ячейки служат больше для красоты. Для активной ячейки создадим стиль open, для всех остальных — close. И в каждом стиле указывает параметры границ и цвет заливки. Но меньше слов, лучше сразу перейти к примеру:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Моя страница</title>
<style>
.open {border: solid 1px black; border-right: none; border-bottom: none; text-align: center; background:#FFFFFF;}
.close {border: solid 1px black; border-right: none; text-align: center; background: #FFD9B3;}
</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="20%" class="open">Страница 1</td>
<td width="20%" class="close">Страница 2</td>
<td width="20%" class="close">Страница 3</td>
<td width="20%" class="close">Страница 4</td>
<td width="20%" class="close">Страница 5</td>
<td width="10" align="center" style="border-left: solid 1px black; border-bottom: solid 1px black"></td>
</tr>
</table>
</body>
</html>
Рекомендуем почитать:
• Металлический текст
• Многоцветный полупрозрачный эффект хамелеона
• Manuscript, Babylon5, Lynda Cursive, A.Lewis, Futura
Оставить комментарий: