Создание контейнера с Web-формой поиска / HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

Обложка
Аннотация

Книги автора: Macromedia Flash Professional 8. Графика и анимация HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Создание контейнера с Web-формой поиска

Откроем Web-страницу index.htm в Блокноте, найдем созданный в главе 20 фрагмент кода, создающий Web-форму поиска, и удалим его. Вместо него мы вставим сразу после открывающего тега <BODY> код, приведенный в листинге 21.4.

Листинг 21.4

<DIV>

<P>

<OPTION>В названиях</OPTION>

<OPTION>В ключевых словах</OPTION>

<OPTION SELECTED>В названиях и ключевых словах</OPTION>

</SELECT>

</P>

<UL>

</UL>

</FORM>

</DIV>

Он создает контейнер csearch, а в нем — Web-форму поиска. В Web-форме присутствуют те же элементы управления: поле ввода искомого слова, кнопка запуска поиска и раскрывающийся список для выбора режима поиска. Ниже Web-формы мы поместили список search_result, в котором будут выводиться результаты поиска.

Далее нам нужно задать стиль для только что созданного контейнера csearch, который сделает его свободно позиционируемым. Откроем таблицу стилей main.css в Блокноте и добавим в нее CSS-код, приведенный в листинге 21.5.

Листинг 21.5

#csearch { background-color: #F8F8F8; position: absolute;

left: 600px; top: 0px; padding: 2px; border: thin solid #B1BEC6 }

Здесь мы, собственно, делаем контейнер csearch свободно позиционируемым, задаем для него начальные координаты, внутренние отступы и рамку. Внутренние отступы будут совсем небольшими, чтобы контейнер сохранял компактность, а рамка — сплошной — пусть Web-форма поиска будет сразу заметна.

А еще мы указываем для контейнера csearch цвет фона — такой же, как у Web- страницы. Если мы этого не сделаем, фон контейнера будет прозрачным, и сквозь него станет просвечивать содержимое Web-страницы, расположенное "ниже" контейнера. А это будет выглядеть очень некрасиво.

Раз уж мы правим представление Web-страницы, давайте сразу зададим стили для элементов управления и списка search_result, чтобы сделать их привлекательнее. Рассмотрим эти стили отдельно друг от друга.

Мы задаем для абзаца, в котором поместили элементы управления, и списка search_result нулевые внешние отступы, чтобы сделать контейнер csearch компактнее:

#csearch P,

#search_result { margin: 0px }

Для элементов управления назначаем размер шрифта 10 пунктов:

INPUT, SELECT { font-size: 10pt }

Дело в том, что размер шрифта по умолчанию, принятый для элементов управления, слишком мал, что понравится далеко не всем посетителям.

Убираем у пунктов списка search_result маркеры и слишком большой отступ слева, где, собственно, выводятся эти маркеры:

#search_result LI { list-style-type: none; margin-left: -40px; }

Так мы сделаем контейнер csearch еще компактнее.

На этом с Web-формой и элементами управления покончено.

Оглавление книги

Оглавление статьи/книги

Похожие страницы