Cum să faci un șir de căutare Yandex în html. Restabilirea câmpului de căutare din meniul de pornire
Salutări tuturor cititorilor și abonaților site-ului. Astăzi voi vorbi despre cum să mă machiez HTML elegant formular de căutare pentru site.
Pe majoritatea site-urilor și blogurilor cu un număr mare Astfel de formulare sunt folosite pentru o varietate de informații. Acestea permit vizitatorilor să găsească articolul dorit folosind cuvinte cheie, cred că toată lumea le-a văzut.
Din punctul de vedere al browserului, asta este HTML simplu formular, cu două elemente: un câmp text și un buton care trimite o cerere. Uneori este posibil să nu existe un buton, atunci formularul este trimis prin apăsarea tastei Enter.
Ca exemplu, am luat una dintre lucrări de pe premiumpixels.com. Iată un link către postarea în sine. Acesta este gratuit fisier PSD cu designul a șase tipuri de forme, arată așa cum se arată în imaginea de mai jos. Puteți descărca PSD-ul în sine de pe acel site, deoarece este distribuit gratuit.
Ne vom limita la a crea lumină și versiune întunecată, deoarece al treilea este albastru foarte asemănătoare cu cea ușoară.
Ce obținem în cele din urmă, vedeți mai jos:
Deci, așa cum am spus, codul HTML este un formular cu două elemente de intrare. Pentru ușurința designului, le-am împachetat pe fiecare bloc div.
Pentru toate tipurile de design, acest cod va fi același.
Cei care au lucrat cu Drupal 7 pot vedea că această structură este foarte asemănătoare cu formularul de căutare standard din Drupal 7. Este. Dacă încorporați acest design în site-ul dvs. folosind acest CMS, nu va trebui să modificați nimic în rezultatul HTML (cu excepția substituentului, vezi mai jos).
Pentru câmpul de intrare setăm atributul substituent. Valoarea acestui atribut este afișată în interiorul câmpului de intrare și dispare când câmpul primește focus. O proprietate foarte convenabilă.
Implicit în browsere diferiteîntreg acest formular de căutare va arăta diferit și nu foarte elegant peste tot. De exemplu, apariția sa în Opera și Safari este prezentată mai jos:
Prin urmare, nu ne putem lipsi de marcaje de stil. Să ne uităm la stilurile pentru versiunea luminoasă rotundă. ÎN fișier CSS trebuie sa introduceti urmatorul cod:
#search-block-form( lățime:248px; înălțime:28px; chenar-radius:15px; chenar:#c9c9c9 solid 1px; background:url(images/searchBg.png) stânga sus repetare-x;
) .focus-active( chenar-culoare:#aaa !important; fundal:#fff !important; ) #search-block-form input( padding:0; margin:0; display:block; border:none; outline:none ; background:none; lățime:100%; 2px no-repeat; ) #search-block-form .form-actions input:hover( cursor:pointer; ) #search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; ) # search-block-form .form-item( lățime:210px; padding:0px 5px; float:right; height:28px; ) #search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif: auto !important;
Să ne uităm la el în ordine și mai detaliat. Mai întâi, setăm formularul în sine cu identificatorul #search-block-form dimensiunile, culoarea chenarului și rotunjirea colțurilor.
#search-block-form( lățime:248px; înălțime:28px; chenar-radius:15px; chenar:#c9c9c9 solid 1px; background:url(images/searchBg.png) stânga sus repetare-x; )
Toate elementele interioare nu vor avea o culoare de fundal sau o chenar, așa că vom suprascrie toate proprietățile implicite ale ambelor etichete de intrare.
#search-block-form input( padding:0; margin:0; display:block; border:none; outline:none; background:none; lățime:100%; înălțime:100%; )
Dacă este posibil, vom seta designul div-urilor în care sunt înfășurate elementele, și nu al div-ului în sine.
Blocul de acțiuni de formular se va lipi de partea stângă, iar blocul de elemente de formular se va lipi de partea dreaptă. Butonul de trimitere formular are text, dar nu avem nevoie de el, așa că îl eliminăm folosind următoarea metodă binecunoscută.
#search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; )
#search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#222; height:auto !important; padding:6px 0; )
Acum să ne uităm la codul JavaScript.
/* Copiați codul de mai jos în fișierul js. (JavaScript). */ $(document).ready(function(e) ( $("input").placeholder(); $("#search-block-form .form-item input").focus(function())( $ ( "#search-block-form").addClass("focus-activ" )).blur(function())( $("#search-block-form").removeClass("focus-activ"); ) ); )); /* Sfârşit */
S-ar părea, de ce este nevoie de JavaScript aici? De fapt, adaugă câteva lucruri utile de utilizare. plugin jQuery jQuery-Placeholder , care va asigura suport pentru această proprietate în toate browserele (inclusiv chiar și IE6!).
Pentru a face acest lucru, conectați fișierul în sine și activați această funcție:
$("input").placeholder();
Dacă am conectat deja jQuery, atunci putem face altceva. De exemplu, să presupunem că atunci când un formular primește focalizare, se schimbă cumva.
Pentru asta am creat clasa speciala focus-activ. Când adăugați această clasă într-un formular, se schimbă culoarea de fundal în alb, iar culoarea chenarului devine puțin mai închisă. Formularul va începe să reacționeze la acțiunile utilizatorului.
Focalizare activă( culoarea chenarului:#aaa !important; fundal:#fff !important; )
Clasa.placeholder formatează textul din atributul substituent în browserele mai vechi. Această clasă poate fi folosită numai dacă folosim același plugin jQuery.
Substituent(culoare:#cbcbcb !important;)
Asta este. Am creat un formular de căutare care este ușor de integrat în majoritatea site-urilor web.
Alte versiuni nu sunt foarte diferite, vezi codul sursă al paginilor demo, există comentariile necesare.
Asta e tot pentru azi. Scrieți în comentarii despre ce ați dori să citiți în noile postări de blog și, de asemenea, abonați-vă la RSS și fiți primul care primește informații despre actualizările site-ului!
Yandex.Search pentru site folosește toate tehnologiile căutării „mare” Yandex. Aceasta include luarea în considerare a diferitelor forme de cuvinte, corectarea erorilor și greșelilor de scriere, precum și a dispozițiilor incorecte ale tastaturii.
Căutarea poate găsi pe site nu numai cuvintele care apar în interogarea utilizatorului, ci și sinonimele acestora. De exemplu, dacă un utilizator caută informații despre Lumea jocului de Warcraft, el nu va scrie neapărat întregul titlu. Solicitarea lui poate arăta ca , sau chiar [BoV]. Dar Yandex va înțelege de ce are nevoie o persoană și îi va oferi răspunsul corect.
Yandex.Search pentru site înțelege opțiuni diferite ortografie cuvinte, chiar și incorecte
Configurarea sinonimelor pentru căutarePuteți completa baza de date principală a sinonimelor de căutare cu propriile opțiuni, specifice site-ului și utilizatorilor dvs. Pentru a face acest lucru, Yandex.Search a implementat o interfață simplă și intuitivă pentru site.
În coloana din stânga, adăugați cuvinte pe care utilizatorii le introduc în formularul de căutare, iar în coloana din dreapta, adăugați sinonime corespunzătoare din paginile site-ului sau site-urilor dvs.
Setări flexibileTu alegi cum arată căutarea Yandex pe site-ul tău. Poate fi un element izbitor al interfeței sau nu prea vizibil, dar un asistent vizibil în navigare - totul depinde de preferințele și obiectivele tale.
Depinde de tine dacă să pleci design standard, familiar tuturor utilizatorilor Yandex, sau creați bara de căutareși rezultă în culorile semnăturii lor.
Și dacă se dovedește că opțiunile standard de design pentru formularul de căutare și rezultatele căutării nu sunt suficiente pentru a se potrivi perfect căutarea în designul site-ului dvs., dvs. (sau dezvoltatorii dvs.) puteți aplica propriile stiluri CSS la elementele necesare ale formularul sau rezultatele căutării. Datorită acestui lucru, puteți controla complet aspectul căutării și o puteți completa cu elementele de care aveți nevoie.
Dacă documentele găsite conțin videoclipuri sau imagini, previzualizările acestora vor fi inserate în rezultatele căutării. De asemenea, puteți personaliza aspectul acestor previzualizări aplicând propriile stiluri CSS.
Rezultatele căutării se deschid fie pe pagina site-ului dvs., fie pe Yandex - astfel.
Sfaturi de căutareCăutarea pe site, ca și căutarea principală Yandex, conține sugestii de căutare - accelerează introducerea interogărilor. Chiar înainte ca un vizitator al site-ului să tasteze întreaga interogare, el poate merge la opțiunea dorită. Funcționează mult mai repede în acest fel.
Yandex va crea un set de sugestii de căutare special pentru nevoile dvs. Ei vor ține cont de interogările utilizatorilor dvs. și de conținutul site-urilor pe care doriți să căutați.
Este în regulă dacă utilizatorii greșesc atunci când introduc o interogare. Căutarea site-ului poate corecta greșelile de scriere, erori gramaticaleși dispunere incorectă a tastaturii - inclusiv toate odată. Remedierea funcționează pentru solicitările în rusă, engleză, ucraineană, belarusă, turcă și mai multe alte limbi.
Sugestiile de căutare pot corecta erorile și greșelile de scriere, precum și dispozițiile incorecte ale tastaturii.
Puteți edita sugestiile de căutare sugerate de Yandex. De exemplu, adăugați altele noi, modificați ordinea celor existente și ștergeți-le pe cele inutile. Acest instrument face ușor să le spuneți utilizatorilor ce să caute pe site-ul dvs.
Rafinați rezultatele căutăriiPuteți ajuta vizitatorii să găsească exact ceea ce au nevoie pe site-ul dvs. Acesta ar putea fi, de exemplu, un articol publicat în august 2010 sau un document din secțiunea Recenzii și teste. Căutarea unui site oferă un instrument pentru rafinarea interogărilor - puteți selecta o secțiune a site-ului, puteți specifica o perioadă de timp, precum și formatul sau limba documentului.
De asemenea, aveți posibilitatea de a specifica cuvinte cheie pe care vizitatorul le poate adăuga la cerere. De exemplu, dacă site-ul dvs. are legătură cu jocuri, atunci cuvintele cheie ar putea fi „joc”, „opinie”, „cumpără” și așa mai departe.
Așa arată rafinamentele în rezultatele căutării.
Caută subiecteDacă trebuie să organizați o căutare pe mai multe site-uri diferite sau pe un grup de site-uri pe același subiect, utilizați teme de căutare. O singură temă de căutare poate uni până la 100.000 de site-uri. Lista lor poate fi editată cu ușurință folosind solicitări HTTP.
Pregătiți o listă de site-uri, creați subiect nouși trimite-l pentru moderare. După confirmarea subiectului, organizați o căutare pe baza acestuia folosind serviciul Yandex.Search pentru site sau Yandex.XML.
Creați o temă: http://site.yandex.ru/themes/new/
Statistici privind interogările de căutareDacă doriți să aflați ce caută vizitatorii site-ului dvs., vizitați secțiunea Statistici. Conține informații despre solicitările utilizatorilor.
Statisticile cererilor sunt actualizate zilnic și includ următoarele informații:
- lista de interogări de căutare;
- de câte ori a fost adresată fiecare dintre aceste întrebări;
- câte rezultate au fost afișate pentru fiecare interogare;
- câte clicuri au fost din rezultatele căutării.
Statisticile vă vor ajuta să înțelegeți ce secțiuni ale site-ului dvs. necesită îmbunătățiri.
Interfața statistică a platformei de căutare.
Folosim acest tip de căutare în mod constant, în fiecare zi.
Câmp de căutare pentru site. Idei de designPentru a găsi răspunsul la unele dintre întrebările noastre, trebuie doar să introducem o interogare bara de adreseși apăsați Enter
CTRL + F Găsiți »
Internet
În dreapta acestui câmp se află cantitatea cererii căutate. Puteți trece de la un rezultat la altul folosind săgețile sus și jos. Cuvântul selectat în prezent va fi marcat cu o culoare întunecată. Acest lucru vă va ajuta să determinați unde vă aflați pe site. De asemenea, rețineți că dacă nu puneți un spațiu după „internet”, browserul va indica cuvântul care conține setul de caractere introdus. „Internet” - „INTERNET”. Deci dacă ai nevoie potrivire exactă rezultatul căutării cu cuvântul căutat, după ce a pus un spațiu.
Comandă rapidă de la tastatură CTRL + F
Găsiți (…) pe Google
În mod similar, puteți găsi date despre orice imagine (imagine) aflată pe pagina unui site web. În același mod, dați clic pe fotografie clic dreapta mouse-ul și selectați „Găsiți imagine (Google)”
Alexandru Zhurba
În cazurile în care trebuie să lucrezi cu document mare, căutarea unui anumit cuvânt sau expresie poate fi dificilă și consumatoare de timp. Microsoft Word permite căutare automatăîn tot documentul și înlocuiți rapid cuvintele și expresiile folosind instrumentul Găsește și înlocuiește. Vrei să înveți cum să folosești acest instrument? Atunci citește cu atenție această lecție până la sfârșit!
Căutați textDe exemplu, să luăm o parte dintr-o lucrare celebră și să folosim comanda Găsește pentru a găsi numele personajului principal din text.
Puteți apela comanda Găsiți apăsând Ctrl+F de pe tastatură.
Pentru a accesa mai multe opțiuni de căutare, utilizați meniul drop-down găsit în câmpul de căutare.
Există momente când se comite o eroare care se repetă pe tot parcursul documentului. De exemplu, numele cuiva este scris greșit sau un anumit cuvânt sau expresie trebuie schimbat cu altceva. Puteți utiliza funcția Găsiți și înlocuiți pentru a efectua rapid corecții. În exemplul nostru, vom schimba numele complet al Microsoft Corporation cu abrevierea MS.
Poți merge la caseta de dialog Găsiți și înlocuiți apăsând combinația de taste Ctrl+H de pe tastatură.
Pentru a selecta mai multe opțiuni Găsiți și înlocuiți, faceți clic pe Mai multe în caseta de dialog Găsiți și înlocuiți. Aici puteți selecta opțiuni precum Numai cuvânt întreg sau Ignorați semnele de punctuație.
Buna ziua. Înainte de a trece la subiectul nostru de astăzi, aș dori să ne felicit pe toți pentru sărbătoarea trecută - Marea Victorie. Spune-le bunicilor și străbunicilor care au luptat și, de asemenea, care au lucrat în spate. Îți mulțumesc că ai stat, ai depășit, ai îndeplinit o ispravă eroică, pentru cer senin, pentru pace în pământul nostru. Și faceți o plecăciune scăzută celor care au apropiat ceasul Victoriei. Multumesc!!!
Acum să revenim la subiectul nostru. Astăzi vom vorbi despre cum să folosiți căutarea în browser. Să ne uităm la câteva Funcții Google Chrome.
Șir de căutareFolosim acest tip de căutare tot timpul, în fiecare zi. Pentru a găsi răspunsul la unele dintre întrebările noastre, trebuie doar să introducem interogarea în bara de adrese și să apăsăm Enter
Pe măsură ce introducem cererea noastră, browserul sugerează posibile combinații cu aceasta pe care alți utilizatori de Internet le-au tastat anterior. Avem de ales: căutați exact conform solicitării noastre sau selectați o altă expresie din lista de browser propusă.
Exemplul arată că ni se cere să căutăm sistemul Google, cu toate acestea, puteți trece la alt sistem.
Cauta pe pagina site-uluiUneori trebuie să găsim un cuvânt sau o expresie pe pagina unui site web. Dar pentru că cantitate mare informații, acest lucru poate fi uneori dificil de realizat. Să presupunem că ai aflat numele melodiei artistului tău, mergi la resursa în care sunt prezentate toate compozițiile sale. Găsirea drumului potrivit printre toate celelalte este destul de dificilă. În acest caz, ne va ajuta o metodă, pe care acum o vom analiza în detaliu.
Deci, de exemplu, ai deschis un portal pe care, după cum presupui, se află cuvântul pe care îl cauți, numele orașului, compoziția etc. Pentru căutare rapidă pe pagina site-ului folosim comanda rapidă de la tastatură CTRL + F sau mergem la meniul principal al browserului și selectăm „Găsiți”
După care în dreapta colțul de sus un câmp pentru introducerea cuvintelor va apărea în fereastra browserului. Pe măsură ce introducem caractere, browserul va începe să caute și să evidențieze în text ordinea literelor pe care le introducem.
De exemplu, să vedem câte cuvinte „internet” se află pagina de start site-ul nostru.
Îl indicăm în câmpul specificat și browserul îl evidențiază galben rezultatele căutării.
În dreapta acestui câmp se află cantitatea cererii căutate. Puteți trece de la un rezultat la altul folosind săgețile sus și jos. Cuvântul selectat în prezent va fi marcat cu o culoare întunecată. Acest lucru vă va ajuta să determinați unde vă aflați pe site.
De asemenea, rețineți că dacă nu puneți un spațiu după „internet”, browserul va indica cuvântul care conține setul de caractere introdus. „Internet” - „INTERNET”. Prin urmare, dacă aveți nevoie de o potrivire exactă a rezultatului căutării cu cuvântul căutat, puneți un spațiu după acesta.
Comanda rapidă CTRL + F pentru a căuta o pagină de resurse poate fi folosită în orice browser modern. ÎN Firefox dat Câmpul este situat în colțul din stânga jos. Atenție.
Căutați rapid semnificațiile cuvintelor, frazelor, imaginilorÎn timp ce examinăm informații despre o anumită resursă, este posibil să întâlnim un termen sau un cuvânt despre al cărui sens nu avem nicio idee. Pentru mai mult primire rapidă date despre acest cuvânt sau frază, pur și simplu selectăm un fragment de text de pe site și folosim butonul drept al mouse-ului pentru a apela un meniu în care selectăm „Găsiți (...) în Google” (fraza sau cuvântul selectat va fi indicat între paranteze). De exemplu, în exemplul nostru arată așa.
În mod similar, puteți găsi date despre orice imagine (imagine) aflată pe pagina unui site web.
Câmp de căutareÎn același mod, faceți clic dreapta pe fotografie și selectați „Găsiți imagine (Google)”
Puteți afla mai multe despre cum să găsiți o imagine în Yandex și Google citind acest articol și aici.
Asta este probabil tot ce este în ea. Astăzi ne-am uitat la capacitățile de căutare din browser. Până data viitoare.
Cel mai bun mod de a învăța este să fii asistentul unui profesionist. Este puțin mai rău să încerci singur fără supravegherea cuiva care știe. Teoria este utilă doar ca ipoteză care trebuie testată în practică.
2018-04-23
Buna draga vizitatoare!
În articolul anterior, am creat Yandex.Search și am făcut toate setările sale de bază. Astăzi, folosind codul primit, vom crea pe site un formular de căutare destinat introducerii de interogări.
Totodată, pentru ca acest adaos să nu fie diferit de alte elemente ale site-ului, vom încerca să îl plasăm pe site folosind stiluri CSS, aducând aspectul cât mai aproape de designul existent.
Trebuie remarcat faptul că proiectarea unui formular Yandex.Search pentru a se potrivi cu designul site-ului nu este o sarcină complet simplă.
Dificultatea constă în faptul că conține un script în JavaScript, care asigură interacțiunea formularului cu serviciul Yandex.Search. Și când este executat, după fiecare încărcare a paginii, codul HTML și CSS al formularului în sine se schimbă dinamic. Ceea ce, în consecință, duce la o denaturare a aspectului său.
De aceea descriere generală Materialul luat în considerare s-a dovedit a fi destul de voluminos, cu o cantitate semnificativă de coduri și ilustrații explicative. În acest sens, materialul este împărțit în două părți.
În acest articol, ne vom uita la prima parte, creând un formular de căutare pentru codul HTML sursă primit direct de la serviciul Yandex.Search. Și în următorul, să vedem cum puteți ajusta stilurile CSS pentru a-i aduce aspectul la starea initiala după ea schimbare dinamică asociat cu execuția scriptului.
Trebuie remarcat faptul că pe Internet este dificil să găsești o metodă detaliată pentru adaptarea aspectului Yandex.Formular de căutare la designul site-ului existent (cel puțin eu nu am putut face acest lucru)
Sper că materialul discutat aici îi va ajuta pe mulți care doresc să folosească căutarea Yandex pe site-ul lor, profitând la maximum de toate avantajele acestuia, inclusiv capacitatea de a adapta aspectul elementelor de căutare la designul site-ului.
În ciuda faptului că în articolele anterioare, crearea unei căutări din Yandex a fost efectuată direct pe site-ul web existent avtobezugona.ru situat pe Internet (crearea Yandex.Search este posibilă numai pe resursele din viața reală), pentru claritate, operațiunile considerate aici pentru a forma elementele sale vor fi efectuate folosind exemplul versiunii site-ului „newsite.local”, găzduit pe un server web local.
captura de ecran 90
- Plasați codul HTML al formularului de căutare
- Utilizarea stilurilor CSS pentru a crea aspectul formularului de căutare
- Fișiere sursă site-ul
În site-ul care este creat, elementele de căutare în conformitate cu aspectul designului ar trebui să fie utilizate în zona barei laterale. Prin urmare, vom plasa codul HTML obtinut din materiale suplimentare din articolul anterior (fisierul „seach_form.html”) in locul corespunzator din fisierul „aside.php”, aflat in folderul „blocks” directorul rădăcină„www”.
Mai jos este codul HTML în Editor de notepad++ fișierul „aside.php” cu un fragment din formularul de căutare plasat într-un container creat anterior cu clasa seach .
Fig.1 Fragment din codul HTML sursă al formularului de căutare
Acum, pe baza acestui cod HTML, puteți începe să atribuiți anumite proprietăți CSS pentru a da acestui element aspectul potrivit.
După cum sa menționat anterior, pe în această etapă Proiectăm un formular de căutare pentru codul HTML pur primit direct de la serviciul Yandex.Search.
Prin urmare, pentru a avea această oportunitate, scriptul din fișierul „aside.php” ar trebui să fie temporar comentat sau șters, așa cum se arată mai jos.
Căutare
"/*(funcție(w,d,c)(var s=d.createElement("script"),h=d.getElementsByTagName("script"),e=d.documentElement;if((" "+e. className+" ").indexOf(" ya-page_js_yes ")===-1)(e.className+=" ya-page_js_yes";)s.type="text/javascript";s.async=true;s.charset ="utf-8";s.src=(d.location.protocol==="https:"?"https:":"http:")+"//site.yandex.net/v2.0/js /all.js";h.parentNode.insertBefore(s,h);(w[c]||(w[c]=)).push(function())(Ya.Site.Form.init()) ) ))(fereastra,document,"yandex_site_callbacks");*/"
Fig. 2 Codul HTML sursă al formularului de căutare cu un script comentat
După cum puteți vedea, pe linia 14 scriptul JavaScript este comentat, permițându-ne să trecem la Stilul CSS pentru versiunea cu codul HTML sursă.
Utilizarea stilurilor CSS pentru a crea aspectul formularului de căutareSarcina noastră este să aducem aspectul formularului cât mai aproape de designul standard al site-ului web. Prin urmare, atunci când atribuim proprietăți CSS, vom proceda de la stilurile atribuite anterior ale elementelor similare existente.
Acest lucru se aplică atât containerului cu căutarea clasei, cât și elementelor formularului în sine - etichetele care formează câmpul de introducere și butonul de căutare.
Pe în acest moment tabelul existent Stilurile CSS legate de formularul de căutare sunt următoarele.
/*-----Formular de căutare-----*/
Caută (
inaltime: 9.25em;
imagine de fundal
chenar-raza: .625em;
box-shadow: 0 0 3.75em 0 #fff;
border-top: .0625em solid #dedede;
umplutura: .3125em 1.25em;
dimensiunea fontului: .9375em;
culoare: #212a68;
înălțimea liniei: .8;
preaplin: ascuns;
margine-top: .9375em;
poziție: relativă;
Caută h3 (
text-align: centru;
dimensiunea fontului: 1.125em;
greutatea fontului: bold;
înălțimea liniei: 1,2;
padding-top: .5em;
margine-inferioară: 1.125em;
Căutați eticheta (
poziție: relativă;
jos: .5em;
Fig.3 Codul CSS al formularului de căutare
Dacă acum deschideți pagina site-ului, atunci în această stare puteți vedea că formularul Yandex.Search se află în locul destinat acestuia.
Pentru a mări/scădea dimensiunea imaginii, faceți clic pe imagine Fig.4 Setați forma
Yandex.Search
Cu toate acestea, aspectul formei în sine nu corespunde încă cu designul existent. Ceea ce necesită alocarea anumitor proprietăți CSS elementelor pe care le conține. Mai jos sunt completările de cod CSS care duc formularul Yandex.Search la aspect
/*-----Formular de căutare-----*/
Caută (
inaltime: 9.25em;
, corespunzătoare caracteristicilor de design ale site-ului care se creează (adăugările efectuate sunt evidențiate cu un fundal deschis).
chenar-raza: .625em;
box-shadow: 0 0 3.75em 0 #fff;
border-top: .0625em solid #dedede;
umplutura: .3125em 1.25em;
dimensiunea fontului: .9375em;
culoare: #212a68;
înălțimea liniei: .8;
preaplin: ascuns;
margine-top: .9375em;
poziție: relativă;
Caută h3 (
text-align: centru;
dimensiunea fontului: 1.125em;
greutatea fontului: bold;
înălțimea liniei: 1,2;
padding-top: .5em;
margine-inferioară: 1.125em;
Căutați eticheta (
poziție: relativă;
imagine de fundal: gradient liniar (în sus, #c4c4c4 0%, #e9e9e9 5%, #eaeaea 10%, #eaeaea 94%, #f7f7f7 98%, #fafafa 100%);
Ya-site-form input (
latime: 100% ;
inaltime: 1.875em;
dimensiunea fontului: 1em ;
umplutura: .25em .5em 0.5em ;
fundal: #fdfadc;
dimensionare cutie: chenar-cutie;
box-shadow: .1875em .1875em .3125em 0 #8b8e8d insert;
hotar-raza: .3125em;
chenar-sus: 0 solid #fff;
chenar-stânga: 0 solid #fff;
chenar-jos: .125em solid #fff;
chenar-dreapta: .125em solid #fff;
imagine de fundal: gradient liniar (în sus, #c4c4c4 0%, #e9e9e9 5%, #eaeaea 10%, #eaeaea 94%, #f7f7f7 98%, #fafafa 100%);
latime: 100% ;
culoare: #000066 ;
box-shadow: .1875em .1875em .3125em 0 #8b8e8d insert;
text-align: centru;
greutatea fontului: bold;
umplutura: 0 .375em 0 .375em;
imagine de fundal: gradient liniar (în sus, #653939,#a76d6d 70%,#c39696);
box-shadow: .125em .125em .25em 0 #422a2a;
lățime chenar: .125em;
chenar-stil: solid;
culoare-chenar: #ddbebe #241616 #241616 #ddbebe;
culoare: #fff ;
înălțimea liniei: 1,2;
dimensiunea fontului: .9375em;
poziție: absolută;
jos: 1,0625em;
dreapta: 1,3125em;
planare(
box-shadow: 0 0 .4375em .125em #422a2a inset;
culoare-chenar: #777 #fff #fff #777;
Fig.5 Codul CSS al formularului de căutare
Anterior, atunci când proiectam elementele barei laterale, ne-am uitat în detaliu la scopul stilurilor CSS de a modela aspectul formularelor. Prin urmare, nu ne vom repeta aici, ci doar reținem că toate proprietățile pentru elementele câmpului de intrare (poz. 27÷41) și butonul „Găsiți” (poz. 42÷57) sunt aplicate celor existente. cod sursă de la Yandex.Search la un element cu clasa ya-site-form.
Și pentru a vizualiza starea butonului, se atribuie pseudoclase acelorași elemente: : hover (poz. 58÷61) - pentru starea activă (situată sub cursorul mouse-ului) și : activ (poz. 62÷65) - pentru starea apăsată (deținută de șoarecii butoane). Acest lucru a fost făcut într-un mod similar cu modul în care am animat anterior butoanele și le-am făcut interactive în etapa de amenajare a site-ului.
Să verificăm acum rezultatul acțiunilor întreprinse prin reîmprospătarea paginii site-ului.
Dacă acum deschideți pagina site-ului, atunci în această stare puteți vedea că formularul Yandex.Search se află în locul destinat acestuia.
Fig.6 Yandex stilizat.Formular de căutare
După cum se vede după coafare acest element căutarea a luat o formă tipică pentru acest site.
Acum să comentăm codul JavaScript și să vedem cum va arăta după ce pagina este complet încărcată și scriptul este executat pentru a asigura interacțiunea cu serviciul Yandex.Search.
Dacă acum deschideți pagina site-ului, atunci în această stare puteți vedea că formularul Yandex.Search se află în locul destinat acestuia.
Fig.7 Yandex.Formular de căutare cu cod HTML modificat dinamic
Se poate observa că în această stare dimensiunea și aranjamentul elementelor, dimensiunea fontului și culoarea butonului au fost distorsionate.
După cum sa menționat mai devreme, acest lucru se datorează faptului că executarea scriptului duce la apariția în formă elemente suplimentare cu propriile stiluri CSS. Ceea ce, în consecință, duce la astfel de schimbări.
Și pentru a remedia acest lucru, trebuie mai întâi să determinați conținutul real al codului HTML și CSS modificat dinamic și apoi să introduceți completările necesare la foaia de stil CSS. Aceasta este ceea ce vom face în următorul articol.
Fișierele sursă ale site-uluiFișierele sursă ale site-ului cu actualizările care au fost făcute în acest articol pot fi descărcate din materialele suplimentare atașate:
- fisierele directoare www
- Tabelele bazei de date MySQL
În acest tutorial, aș dori să vă împărtășesc cum vă puteți decora formularul de căutare. Nu vom face nimic super complicat. În schimb, să ne uităm la patru moduri în care vă puteți decora formularul de căutare folosind tranziții CSS
Mai jos este codul pentru o casetă de căutare obișnuită.Pentru a începe, în fișierul HTML, creați un element de intrare cu atributul type=search. Dacă te uiți la codul de mai jos, vei vedea 4 elemente diferite: element div cu clasa .box , un element div cu clasa .container-1 , .icon și bara de căutare în sine.
Toate cele patru exemple vor avea, desigur, o bară de căutare și o pictogramă de căutare. Fiecare dintre cele patru exemple va fi într-un container separat, astfel încât să le putem modifica independent unul de celălalt. În cele din urmă, div-ul este responsabil pentru menținerea containerului nostru centrat.
Adăugarea fontului AwesomeFont Awesome este o bibliotecă de pictograme. Puteți afla mai multe despre această bibliotecă pe site-ul lor.
Fragmentul de cod de mai sus arată un exemplu despre cum puteți include o pictogramă în marcaj. Cu toate acestea, pentru ca pictograma să funcționeze, trebuie să furnizați și un link către biblioteca Font Awesome, așa cum este scris mai jos. Adăugați acest link la eticheta head a documentului dvs.
Stiluri inițiale
Acum vom adăuga câteva stiluri la dosar separat(pe care va trebui să-l adăugați și la eticheta de cap a documentului).
Corp( fundal: #343d46; ) .box (marja: 100px automat; lățime: 300px; înălțime: 50px; )
În fragmentul CSS de mai sus, am adăugat câteva stiluri de bază pentru pagină. Câmpurile de căutare vor avea un stil albastru închis, astfel încât fundalul corpului nu trebuie să fie complet alb. Clasa cu casetă este, de asemenea, centrată pe pagina lecției.
Caseta de căutare FinishAcest tutorial este despre învățarea cum să personalizați casetele de căutare. Voi folosi primul exemplu pentru a explica mai detaliat ce se întâmplă; Să ne asigurăm că știi exact ce se întâmplă. În celelalte trei exemple, vă voi arăta doar opțiunile de tranziție.
#1.Luminarea fundalului
Primul exemplu pe care îl vom rezolva este schimbarea fundalului de introducere a căutării la hover. Vom adăuga o tranziție pentru ca schimbarea să nu fie bruscă.HTML
Ați văzut deja codul HTML de bază. Acesta va fi un fragment pentru toate exemplele.
CSS Pentru a atribui un stil, trebuie să definim stilul CSS al casetei de căutare în sine. Să adăugăm totul Reguli CSS
unul după altul ca să știi exact ce se întâmplă.
Container-1( lățime: 300px; aliniere verticală: mijloc; spațiu alb: nowrap; poziție: relativă; ) Mai întâi, să proiectăm clasa containerului. Cele mai multe proprietate importantă
poate poziție: relativă . Acest lucru este intenționat, astfel încât pictograma să poată fi plasată deasupra intrării, după cum veți vedea.
Container-1 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #63717f; padding-left: 45px; -webkit-border- raza: 5px -moz-border-radius: 5px;În continuare, vom stila intrarea. Toate cele de mai sus sunt pentru decorare, deoarece raza marginii sau culoarea de fundal nu afectează funcționalitatea intrării. Acordați atenție proprietăților indentării din stânga. Acest lucru este pentru a face loc pictogramei, astfel încât să nu fie literalmente deasupra textului din interiorul intrării.
Mai jos avem patru reguli diferite pentru culoarea substituentului textului din exemplul nostru de căutare. Din păcate, regulile trebuie să fie separate pentru prefixele de furnizor individual și nu pot fi combinate într-o regulă scrisă scurtată. Acest lucru este puțin enervant și se va repeta în fiecare exemplu!
Container-1 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-1 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 1 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-1 input#search:-ms-input-placeholder ( culoare: #65737e; )
PictogramăÎn sfârșit, stilul pictogramei. Principalul lucru este că ar trebui să fie deasupra intrării, așa că îi atribuim poziția: absolute . Marginile ajută la poziționarea pictogramei în interior poziție de vârf cu 50%.
.container-1 .icon( poziție: absolut; sus: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; culoare: #4f5b66; ) Adăugarea Efecte de hoverUrmătorul set de reguli determină ce se întâmplă cu câmpul de căutare la trecerea cursorului. În acest exemplu, dorim să schimbăm culoarea de fundal. Pentru a scăpa de strălucirea galbenă sau albastră din jurul intrării (pe care browserele le adaugă uneori), setați conturul: niciunul .
Container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:activ( outline:none; fundal: #ffffff; )
Crearea unei tranzițiiPentru a face tranziția, trebuie să adăugăm câteva linii de cod. Să revenim la regula în care am definit stilul de intrare.container-1 input#search . Înainte de parantezele de închidere, adăugați următoarele:
Webkit-tranziție: ușurință de fundal .55s;
Definim o scurtătură pentru proprietatea de tranziție, dar putem defini și acești trei parametri individual. În primul rând, spunem că tranziția ar trebui să afecteze numai proprietatea de fundal. În continuare spunem că tranziția va dura puțin peste jumătate de secundă. În final, definim moderarea efectului de tranziție. ușurința nu este singurul efect care ar putea funcționa aici, am putea folosi, de exemplu, liniar sau ease-in. Ar arăta puțin diferit. Încercați să vedeți ce vă place cel mai mult.
stilul de intrare ar trebui să arate acum ca codul de mai jos.
Container-1 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #262626; padding-left: 45px; -webkit-border- radius: 5px; -moz-border-radius: 5px-webkit-transition: background .55s ease;
Cum funcționează tranzițiile CSS? #2.Extindeți intrarea la trecerea cu mouse-ul În acest exemplu, căutarea va începe prin pictogramă vizor
. Când treceți cu mouse-ul peste pictogramă, căutarea se va extinde, după care puteți introduce interogarea. Majoritatea codului din acest exemplu va fi foarte asemănător cu cel anterior. HTMLCSS .container-2( lățime: 300px; aliniere verticală: mijloc; spațiu alb: nowrap; poziție: relativă; )
Stilul de intrare pentru această tranziție este diferit. Intrarea este mult mai mică, așa că icoana poate ajunge în spatele pieței. Toate celelalte proprietăți precum fundalul sau culoarea fontului vor rămâne, nu dorim să schimbăm complet stilul de căutare.
Container-2 input#search( lățime: 50px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #262626; padding-left: 35px; -webkit-border- radius: 5px; -moz-border-radius: .55s ease: width;
După cum puteți vedea, am suprascris proprietatea de tranziție pentru a afecta numai lățimea. Am păstrat timpul același pentru că este suficient de rapid pentru a nu irita utilizatorii, dar suficient de lung pentru a crea un efect plăcut.
Container-2 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-2 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 2 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-2 input#search:-ms-input-placeholder ( culoare: #65737e; )
Încă o dată avem un stil CSS pentru pictogramă. Rămâne la fel ca în exemplul precedent.
Container-2 .pictogramă (poziție: absolut; sus: 50%; margine-stânga: 17px; margine-sus: 17px; z-index: 1; culoare: #4f5b66; )
Adăugarea efectelor HoverUltimul lucru pe care trebuie să-l facem este să definim cum va arăta căutarea de așteptare. În următorul fragment de cod, prima regulă asigură că nu există nicio strălucire indusă de browser pe formular și că caseta de căutare rămâne extinsă pe măsură ce tastați - pe măsură ce introduceți. Regula de mijloc pur și simplu extinde intrarea la lățimea completă la trecerea cu mouse-ul.
Container-2 input#search:focus, .container-2 input#search:active( outline:none; width: 300px; ) .container-2:hover input#search( width: 300px; ) .container-2:hover . pictogramă (culoare: #93a2ad; )
Ultimul lucru care se întâmplă în codul de mai sus este că pictograma își schimbă culoarea atunci când trece cu mouse-ul. Acesta este doar un detaliu pentru a arăta rapid utilizatorului că caseta de căutare este activă și nu inactivă. Această modificare nu a fost implementată pentru tranziție.
#3.Măriți dimensiunea pictogramei la trecerea cursorului Dintre toate patru exemple
Primul exemplu pe care îl vom rezolva este schimbarea fundalului de introducere a căutării la hover. Vom adăuga o tranziție pentru ca schimbarea să nu fie bruscă.acesta este cel mai subtil, atât din punct de vedere al codului, cât și din punct de vedere vizual. În acest caz, pictograma ferestrei de vizualizare va pluti ușor și va crește în dimensiune. Din nou Marcaj HTML
Ați văzut deja codul HTML de bază. Acesta va fi un fragment pentru toate exemplele.
pictograma și caseta de căutare sunt aceleași ca în cele două exemple anterioare. Desigur, cu excepția .container-3 . ÎN Stilul CSS
nimic special pentru acest exemplu. În cea mai mare parte, începutul este foarte asemănător cu primele exemple, în care starea implicită nu este diferită. Mai jos este codul pentru container și intrare. Rețineți că de data aceasta nu există nicio tranziție la intrare.
Container-3( lățime: 300px; vertical-align: middle; white-space: nowrap; position: relative; ) .container-3 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt culoare: #262626 -webkit-border-radius;
Container-3 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-3 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 3 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-3 input#search:-ms-input-placeholder ( culoare: #65737e; )
În aparență, pictograma pentru acest exemplu este aceeași. Aceeași poziție, aceeași culoare etc. Totuși, i-am adăugat o tranziție. Aceste tranziții sunt atribuite tuturor proprietăților, ceea ce este mai scurt decât declararea lor individuală.
Container-3 .icon( poziție: absolut; sus: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; culoare: #4f5b66; -webkit-transition: all .55s ease; -moz -tranziție: toate .55s ease; -ms-transition: toate .55s ease;
Adăugarea efectelor Hover .container-3 input#search:focus, .container-3 input#search:active( outline:none; ) .container-3:hover .icon( margin-top: 16px; color: #93a2ad; -webkit -transform:scale(1.5); /* Safari și Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); :scale(1.5); /* Opera */ transform:scale(1.5);Există mai multe lucruri care se întâmplă în codul de mai sus. Mai întâi, am schimbat culoarea de trecere cu mouse-ul a pictogramei și am mutat-o puțin mai sus, astfel încât să fie centrată vertical când este mărită. În al doilea rând, am adăugat o transformare la pictograma de la trecerea cursorului, astfel încât să devină de 1,5 ori dimensiunea inițială. Deoarece tranziția definită anterior a fost configurată să afecteze Toate proprietăți, pictograma pare să crească la trecerea cursorului.
Să aruncăm o altă privire la pentru a afla mai multe despre transformare.
#4.Butonul de trecere cu mouse-ul Spre deosebire de acesta din urmă trei exemple , acesta va fi mai dificil. Când treci peste partea de sus
introducere, se va face clic pe un buton care vă permite să continuați - cum ar fi Trimiteți sau Go . Există o pictogramă lupă în interiorul butonului.HTML
Acest HTML este puțin diferit. Intrarea este încă acolo, desigur, dar pictograma este acum în interiorul elementului buton care vine după intrare. Este important ca butonul să vină după intrare, deoarece are legătură cu modul în care efectul de așteptare va fi creat în CSS.CSS-ul este diferit în acest exemplu, vă rugăm să rețineți! Mai jos este un fragment al stilului containerului. În primul rând, poziția: lipsește relativ; Acest lucru nu mai este important, deoarece pictograma nu se bazează pe ea pentru a se potrivi deasupra intrării. Cu toate acestea, avem overflow:hidden . Acest lucru împiedică afișarea butonului atunci când nu este în așteptare. Din punct de vedere tehnic, butonul care apare este în dreapta intrării, dar datorită overflow:hidden nu apare atunci când depășește lățimea containerului - containerul și intrarea au aceeași lățime.
Container-4( overflow: ascuns; lățime: 300px; aliniere verticală: mijloc; spațiu alb: nowrap; )
Intrarea de mai jos nu are o tranziție deoarece acum nu mai este un element.
Container-4 input#search( lățime: 300px; înălțime: 50px; fundal: #2b303b; chenar: niciunul; dimensiunea fontului: 10pt; float: stânga; culoare: #fff; padding-left: 15px; -webkit-border- raza: 5px -moz-border-radius: 5px;
Următorul fragment este pentru schimbarea culorii substituenților.
Container-4 input#search::-webkit-input-placeholder ( culoare: #65737e; ) .container-4 input#search:-moz-placeholder ( /* Firefox 18- */ culoare: #65737e; ) .container- 4 input#search::-moz-placeholder ( /* Firefox 19+ */ culoare: #65737e; ) .container-4 input#search:-ms-input-placeholder ( culoare: #65737e; )
Mai jos este codul pentru stilul butonului de pe mouse. Pentru a-l păcăli să vină din lateral, trebuie să îl plasați direct în spatele intrării și să îl ascundeți înainte de a ținti. Un buton este un element care se schimbă - se mișcă - deci este cel care definește tranziția. Pentru a ușura lucrurile, am definit o tranziție care să afecteze toate proprietățile.
Container-4 button.icon( -webkit-border-sus-dreapta-rază: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius -bottomright: 5px-bottom-right-radius: #232833; .55s ușurință)
Adăugarea efectelor HoverPentru estompare, butonul trebuie plasat deasupra intrării. Acest lucru se realizează prin marjă negativă. Am setat anterior opacitatea butonului la 0, așa că trebuie să-l resetam la 1 pentru a face și butonul vizibil.
Ultima regulă schimbă fundalul butonului doar când treci cu mouse-ul peste buton. Este bine să anunțați utilizatorul că butonul este activ și poate face clic pe el pentru a trimite o cerere; nu are rost să ai un buton dacă pare inactiv.
Container-4:buton de trecere.pictogramă, .container-4:buton.pictogramă activ, .container-4:buton de focalizare.icoană (contur: niciunul; opacitate: 1; margine-stânga: -50px; ) .container-4: hover button.icon:hover( fundal: alb; )
ConcluzieEi bine, am ajuns la finalul experimentelor noastre CSS! Am luat un formular de căutare de bază și am folosit un set mic de efecte pentru a-i schimba comportamentul. Cum altfel ai putea schimba intrarea? Ce alte aspecte ați aplica tranzițiilor sau transformărilor CSS? Spune-ne despre asta în comentarii!
Am fost criticat, spunând că aspectul este nasol, dar există HTML5 și CSS3 modern.
Desigur, am înțeles, cele mai recente standarde sunt cool și toate astea. Dar adevărul este că eu, de regulă, fac machete la comandă, iar în majoritatea cazurilor este importantă identitatea completă în diferite browsere, ceea ce nu permite utilizarea celor mai noi tehnologii. Prin urmare, mă concentrez în primul rând pe compatibilitatea între browsere și, din obișnuință, am așezat formularul de căutare „în mod vechi”.
În general, prin această postare corectez situația (de dragul celor nemulțumiți de articolul anterior =) și ofer propria mea versiune a aspectului aceluiași formular de căutare, dar folosind tehnologii HTML5 și CSS3.
Un exemplu despre ceea ce se va întâmpla ca urmare este disponibil.
Ce pierdem atunci când proiectăm acest formular folosind HTML5 și CSS3?In rest browsere moderne totul este grozav. Consider că deficiențele de mai sus nu sunt critice, așa că pentru site-ul meu aș folosi în siguranță un formular conceput folosind cele mai noi tehnologii.
Codul HTML din formularul de căutareArata cam asa:
În comparație cu formularul din articolul anterior, s-au făcut următoarele modificări în conformitate cu tehnologia HTML5:
Iată toate stilurile necesare cu comentarii:
Caută ( /* setează lățimea necesară a formularului în funcție de design ** formularul se întinde fără probleme */ lățime: 35%; /* vom poziționa butonul de trimitere absolut, ** de aceea această proprietate este necesară */ poziție: relativ; ) .search input ( /* dezactivează chenarele pentru intrări */ border: none; ) /* stiluri pentru câmpul de intrare */ .search .input ( /* întinde câmpul de introducere pe toată lățimea formularului */ width : 100% /* datorită căptușelii interioare de sus (8px) și de jos (9px) ** reglați înălțimea formularului ** căptușeală in dreapta (37px) il facem mai mare decat cel din stanga, ** pentru ca butonul de trimitere va fi plasat acolo */ padding: 8px 37px 9px 15px; /* astfel încât lățimea câmpului de intrare (100%) să includă padding */ -moz-box-sizing: border-box; dimensionare cutie: chenar-cutie;
/* adăugați umbre interioare */ box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
/* colțuri rotunjite */ border-radius: 20px;
P.S.
