Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Стилизация fieldset и legend в css

.

Если хотите, то можете оставить стилизацию на последний момент, когда вся форма будет готова, а элементы — расставлены на свои места. Но я предпочитаю применять стили к элементам формы по мере их добавления, в основном потому, что использую CSS для установления ширины текста и подобных изменений. Соответственно, я хочу быть уверенным, что каждая часть выглядит как надо, прежде чем перейду к следующей.

Хотя стандартное представление fieldset неплохо смотрится (рис. 7.19), другие браузеры могут не показать скругленную рамку, отображаемую в Internet Explorer, так что в результате все будет выглядеть немного скучно. Однако благодаря CSS есть возможность применить несколько стилей, чтобы исправить это и заставить страницу отображаться одинаково во всех браузерах. Сейчас мы решим эту проблему одним движением руки. Откройте в текстовом редакторе файл stylel. ess и добавьте следующие правила стиля:

Сохраните файл styl el. ess и посмотрите, как выглядит страница в браузере. Результат показан на рис. 7.19.

Все хорошо, и единственная проблема, которую я вижу на странице, — слишком много пустого места между первым абзацем и формой. Это можно исправить с помощью отрицательного значения полей (margin), которые мы применим к форме таким образом:

Рис. 7.19. Элемент fieldset, стилизованный в CSS

В этом объявлении я еще добавил правило, убирающее любые значения отступов и полей, установленные браузером по умолчанию. Кроме того, я увеличил высоту строки.

Добавление текстовых полей ввода

Сейчас добавим в форму несколько элементов, которые позволят получать от посетителей информацию: имя, номер телефона и т. д.

1. В файле contact. html вставьте элемент di v сразу после legend. Если вы добавляли какой-то временный контент для Internet Explorer, то сейчас его нужно удалить.

2. Внутри div добавьте input с атрибутом type=text.

3. Задайте элементу input атрибуты id и name, значения которых должны быть равны contactname.

4. Перед элементом input добавьте элемент label со значением Имя контакта. Помните, что необходимо указать атрибут for со значением, совпадающим с содержимым id-атрибута элемента input.

5. Сохраните веб-страницу и откройте ее в браузере.

Что получилось? Появилось ли текстовое поле? Если нет, проверьте свой HTML-код.

Контейнер div будет удерживать все эти элементы вместе и добавит отступы до и после них. Аналогично мы будем поступать, добавляя на страницу и другие элементы.

Теперь оформите текст внутри элемента label. Результаты применения этих небольших изменений показаны на рис. 7.20.

Сейчас вы одним махом добавите сразу много полей ввода. Вот что у вас должно получиться (новые фрагменты выделены полужирным):

Рис. 7.20. Стилизация метки Имя

На рис. 7.21 показано, что получилось.

Рис. 7.21. Добавление в форму нескольких полей ввода

.

Читайте так же:
Not found