Оформление форм и таблиц

Автор: manager Понедельник, Март 17th, 2008 Нет комментариев

Рубрика: Интернет

Менюшку можно применить как для навигации по своему сайту, так и для перехода на другие адреса.

Выбор страницы
первый адрес
второй адрес
третий адрес

Однако, часто такие формы смотрятся довольно жутко. Для «Эксплорера» можно задать фоновый цвет формы и цвет текста. Добавляем:

Выбор страницы
первый адрес
второй адрес
третий адрес

Уже кое-что. Что можно сделать еще? Ну, например, текст можно сделать пожирнее, а размер формы уменьшить за счет уменьшения шрифта:

Выбор страницы
первый адрес
второй адрес
третий адрес

В итоге таких преобразований можно получить более подходящий для Вашего оформления элемент. Хотя пользователи «Нетскейпа» не увидят особого изменения. В Нетскейпе можно изменить размер формы.

в styl.css пишем:
.ss{ font-family: MS Sans Serif, tahoma, Verdana, Arial; FONT-SIZE: 5px; color:black}

Выбор страницы
первый адрес
второй адрес
третий адрес

Как в Нетскейпе, видно? Оч. хор. Точно так-же оформляются кнопки и прочие формы. Хоть в Нетскейпе и не получится задать цвет, но уже получше. Изяшнее смотрится. Хотя не все так просто с Нетскейпом. Срабатывает не всегда и не везде. Текстовые строки и кнопки на такой CLASS всегда реагировали без проблем а вот SELECT… Специально для пользователей Нетскейпа! (странная фраза, двусмысленная какая-то) Обратите внимание — для Нетскейпа мы поместили CLASS=»ss» сразу в тэге form:

Для селекта в Нетскаепе сложнее прописать размеры, так что для отображения и там и там в «приличном» виде можно попробовать вставить класс и после form и после select.

Для текстовых полей можно задать еще один интересный параметр— border.
Для этого введем еще один класс и пропишем ему рамочку:
.bb { border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; border-right: 1px solid;}

Мы создали класс с параметрами рамок: толшина 1px, рамки в виде непрерывной линии — solid. В данном примере мы не назначили цвет рамочек, а можно и назначить:
.bb1 { border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; border-right: 1px solid; border-color:red;}

Мы получили ту же рамочку, но с красным «бордером». Теперь можно немного уменьшить описание, ведь все рамочки у нас одинаковы — и верх и низ и боковые:
.bb2 { border: 2px solid; border-color:red;}

Вот она, родная… Для разнообразия немного толще сделали рамочку.
Остается вспомнить, что рамочки у таблиц описываются довольно разнообразно. Например, двойная рамка:
.bb3 { border: 3px double; border-color:red;}

Двойная рамочка… Скучновато… Чтобы такого придумать плохого? Чтоб обозревателю жизнь медом не казалась. А мы ему попробуем испортить настроение переменой красного на черный — пусть помнит, что жизнь коротка(особенно, если читаешь МК):
.bb4 { border: 3px double; border-color:black;}

Теперь при наведении мышки цвет рамочки меняется с красного на черный, напоминая о конечности всего живого. :) )) Страшно?

Источник: A-design studio http://mtk.on.ufanet.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты