Дизайн поисковой строки
{"ops":[{"insert":"Здравствуйте дорогие читатели моего блога. Сегодня я хочу рассказать вам, как можно оформить строку поиска. Строка поиска на моей странице достаточно простая. Для меня, в первую очередь было важно, чтобы она вписывалась в дизайн блога. Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Статью, как написать простой обработчик на PHP я уже выкладывала в своем блоге. Так что сегодня мы поговорим о верстке и дизайне. \nНачну пожалуй с самой простой формы:\n<form class=\"for\" method=\"get\" action=\"\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"<input class=\"search\" name=\"search\" id=\"search\" placeholder=\"Поиск..\" />"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"<input class=\"search-btn\" type=\"submit\" value=\"ok\" />"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"}]}
{"ops":[{"insert":"Получим "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форму 1 (Посмотреть...)"},{"insert":", это основная форма, все остальные навороты это применение разных стилей, давайте добавим стилей и посмотрим, что у нас получится:\n<style> /*Стили для формы 2*/"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: 10px inset yellow;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search-btn{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: red; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: yellow; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" margin: 5px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 5px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-weight: bold; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: 10px inset red;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Добавив минимум стилей получаем "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форму 2 (Посмотреть...)"},{"insert":", если поисковик на вашем сайте занимает важное место, например вы делаете магазин и наша форма поиска должна быть заметна, сделайте её яркой.\n"}]}
{"ops":[{"insert":"Чуть изменим стили и получим "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форму 3 (Посмотреть...):"},{"insert":"\n<style> /*Стили для формы 3*/"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-color: #3d0894; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-width: 10px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-style: double;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search-btn{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #fff;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #3d0894; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" margin: 5px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 5px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-weight: bold;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-style: double;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-color: #fff;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-width: 6px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":"Так меняя стили мы можем сделать поле поиска таким, чтобы оно отвечало потребностям и дизайну нашего сайта.\n"}]}
Другие статьи этого автора
