Разработка сайта с нуля. Верстка. Страница поиска. Часть #21.

Автор Zhanna Belchenko
Разработка сайта с нуля. Верстка. Страница поиска. Часть #21.

Привет друзья с вами на связи.

Владимир автор блога о том. kz сегодня мы с вами продолжаем виску и будем доделывать 2 последние нашей странице поезд и поезд не найдено и так давайте посмотрим, что у нас пол встречу сейчас я загружу его и смотрим нашу всё вот так у нас будет выглядеть поиск поэтому берём было в нашем проекте категории элитек копируем не переименовано называем всё то есть поиск открывается с помощью саблайм текста или другого редактора здесь пишем страница поиска лично открываем с помощью Firefox всё правильно страница поиска и. Давайте создадим размер у нас уже есть небольшая разметка на море немножко под правильно получается.

Здесь нужно добавить вот такой вот форму поля для поиска для Ford хватит найдём.

Вот она не давайте дадим новый класс Search 7 результатов так и пишу неважно можете сколько угодно написать результаты на для примера 7 результатов для бесплатно для у нас уже. Дети спали ночью здесь пишем для икон очку меняем сразу идём на. Шпунт и вессон ищем берем отвертку ванночку только интернет у меня сегодня подтупливает и вставляем вот сюда обновляем так отлично. Вам нужно будет. Сейчас ещё задать необходимые параметры давайте сделаем. Уфа запятую поставим седан добавим нашёл Surface так добавим сюда надо там всё тоже самое на всё тоже самое то есть, h2, , ой треугольник у нас тоже естественно есть поэтому ,. Дэдпул то есть не задали. Тех самых стильных для нашего села всё отлично. Здесь всё тоже самое то есть по 20 пикселей. Единственному сейчас добавим вот — это вот поисковую форму. Давайте создадим класс сёрч и в нём добавить в нашу форму я её сразу не будет списывать не буду. То есть я приму его скопирую вставлю могу для вас форма нажмите паузу. И перепечатать либо я добавлю на свой сайт вы сможете перейти по ссылке и скопировать этот код готовы тут необходимы класса то есть в пост Input Type Search сорбит класс всеобщей Battle и здесь у нас вот прикол. то есть и классификация я — это делаю для ускорения урока чтобы не тратить время на напечатанный всего вот этого дела поэтому вы на мой сайт и. Скопируй либо перепечатать сейчас так надеялся перепечатали либо зашли на мой сайт скопирована. Давайте проверим, что у нас получилось правильно то есть вот мы видим нашу поисковые формула вот кнопочка который мы хотим ставить единственная здесь у нас было просто иконка, но мне не нравится, что вот так вот стоит параллельно, но не очень красиво, а я хочу туда переместите сделать активную и чтобы при клике по ней. Посетитель мог запустить активное действие в поисках поэтому она у нас будет воздействовать. Давайте зададим стиле со стилями. Я тоже решил говорится не тратить время не ваша не моё потому, что силе можно любые задать мы делаем по скетчу поэтому я их просто оставляю. Да у меня уже готовы и также их добавлю на свой сайт. А вы сможете их перепечатать либо. Вот я также работаю может перепечатать если вдруг сайт не работает ну бывает иногда хвостик недоступен то есть вот всё. РЖД Поезд поешь овить процентов позицию предложите вариант 15 пиксели Search Input Border None outline on Search Post Image Input Data Class погода йович 150 10 пикселей когда 115 пикселей. Ну вот — это вот сами видите домов в. Абхазии обыграл белый функция 14 пикселей колобки пятёрки outline not Search покупаешь Input Focus 3 как устроить нас будет цвет какой-то три тройки сердце под прицелом батон. А мы задаем себе белый фон с 14 outline Border None позицию. Абсолют Right 0.9 Pixel background Color Color. Совсем Совсем. Совсем — это вот — это наша кнопочка которая бы ты здесь отображается то есть вернее,, но сейчас увидите так дальше. Всё распускаешь всё же потом если наведение как у нас свет Color чёрный транзишн au-03 с из то есть мебель для всех Acer support PHP Input placeholder то есть вот — это вот поля которая для которого заданы. Света именно вот — это вот тексту если мы этого не сделаем тут будет у нас брат вот откуда ты сверху была. Ну и в принципе. Здесь всё. И этот текст скопирую. Если вдруг что-то не будет работать вы сможете нажать файл вы всё — это легко перепечатать. Давайте проверим отлично мы добились результата единственном и иконку перенесли вот сюда видишь. То есть она активное смотрится хорошо. Давайте попробуем сажать всё единственного здесь можно текст уменьшить написать просто поиск вот когда. Найдите на маленьком экране не очень смотрится, но — это не так важно поэтому смотрите я не буду менять этот текст будет так у нас готова первая страница теперь открывать второе Search то есть не найдено есть как мы видим у нас всего лишь нужно добавить. Ничего не найдено. А всё, что было внизу удалить давайте — это сделаем идём наш адаптируем вставляем переименовываем прямо подпишем мне line деньги и прекрасных глаз открываем с помощью саблайн песня открываю с помощью Firefox. Давайте переименуем страница поиска не найдено посмотрим, что нам нужно убрать вот — это всё добавить в текст давайте сделаем — это находим malcontent вот этот вот my Content container deploy lg-818 и удаляем в нём наш блок контента есть. Сейчас разберёмся — это действительно заканчивается. Вот он и вот чуть выше выбираем нас discontent здоров определяем у нас всё правильно было отлично так пагинация на сайте нету поэтому я убираю. Кировский завод на координацию движений то есть остался sidebar и вот — это вот форма пишем. Ничего не найдено предавать в структуру HTML провод.

0 комментариев
0

Читайте также