Problema pe care o vom rezolva este că butoanele obișnuite generate de etichetă arata diferit in diferite browsere. În plus, dacă schimbați dimensiunea butonului implicit, unele browsere afișează doar o groază.
Se pare că puteți face un mic efort și de la butonul prestabilit, faceți în mod implicit stil și modă, și chiar și în toate browserele populare, butonul va arăta la fel de bine (bine sau aproape aproape). Acum, să vorbim despre asta în detaliu.
Fiecare browser are o opinie
Vom diseca pentru trinitatea browserelor populare:
- Mozilla Firefox 3.5
- Opera 9.63
- IE6 (cu un ochi pe IE7, pentru el!)
Iată cum să interpretați un cod simplu Subiecții noștri: În principiu, nimic criminal. Aici este doar conturul punctat al butonului în browser-ul FF, atunci când ați lovit de concentrare de intrare pe ea, nu arata frumos. Poate fi eliminat. Pentru a face acest lucru, specificăm următoarea proprietate CSS pentru butonul buton:
Acum hai să facem un mare buton la modă și să fim îngroziți de aspectul său implicit.
Facem un buton la modă
Deoarece nu este ciudat, butonul se supune setului prin dimensiunile CSS. Prin urmare, adăugăm directiva privind lățimea și înălțimea la butonul din clasa de butoane:
Acum, să vedem cum arată butonul nostru mare în trei browsere experimentale: urâtul său este lovit de un buton în IE6. Apropo, în IE7 nu arată nici mai bine. Prin urmare, butonul prestabilit nu funcționează pentru noi și vom face propriul nostru buton.
Buton de dispunere
Așadar, am stabilit deja lățimea și înălțimea butonului, formând astfel un buton de dimensiunea dorită.
Rămâne să se transforme urât într-o frumusețe.
Mai întâi, trageți butonul în starea normală, în starea în care plasați mouse-ul peste mouse și când faceți clic. Salvăm aceste imagini într-un fișier. Ie aplicați tehnologia spritelor.
Acest fișier grafic va fi folosit ca fundal pentru butonul nostru (CSS background-image property).
Imaginea de fundal se va mișca când plasați cursorul pe butonul mouse-ului și faceți clic pe el. Ca urmare, va crea sentimentul că butonul este apăsat.
Iată cum arată imaginea de fundal a butonului:
- În cazul implicit, poziția de fundal: 0 (omiteți-o).
- Când plasați cursorul pe mouse, trebuie să mutați imaginea de fundal până la înălțimea unei secțiuni din poziția de fundal: 0 -56px (deplasarea orizontală nu se produce, doar modificările verticale ale coordonatelor).
- La un clic este necesar să se deplaseze un fundal încă o secțiune în sus poziția fundal: 0 100%.
Împreună cu schimbarea de fundal, ar fi bine să înlocuiți textul pe buton. aceasta va adăuga realismul la sentimentul de presare.
Când poziționați indicatorul mouse-ului peste buton, mișc textul până la înălțimea umbrei de sub buton. Se pare foarte realistă.
Mărimea offsetului pentru inscripție (când plasați cursorul peste mouse)
Inscripția din interiorul butonului este schimbată prin setarea proprietății de umplere.
- Când plasați mouse-ul mouse-ul indicatorul de vârf: 4px
Vizibilitatea suplimentară poate fi realizată prin schimbarea indicatorului mouse-ului în timp ce se deplasează peste buton, cu săgeata îndreptată către picior. Este foarte simplu să faceți acest lucru, specificați proprietatea cursorului: pointer.
Modificați stilul butonului când treceți și faceți clic pe
Pentru a schimba stilurile atunci când plasați mouse-ul peste mouse și când faceți clic, puteți utiliza pseudo-clasele: hover și: active.
Pentru butonul clasei butoanelor când se hovering. datorită clasei pseudo-class: hover. se va aplica următorul stil:
Poziția de fundal va schimba imaginea de fundal în cea de-a doua poziție, iar indentarea de sus va schimba inscripția din interiorul butonului.
Puteți aplica proprietățile cerute când faceți clic pe buton utilizând pseudo-clasa: activă
Proprietatea de pozitie de fond schimbă imaginea de fundal în a treia pozitie atunci când click-ul mouse-ului.
Metoda de mai sus nu este adecvată pentru IE6. în el pseudo-clase: hover și: lucrează activ numai pentru eticheta de referință a. În ciuda faptului că IE7 funcționează în mod normal cu aceste pseudo-clase, din cauza glitchiness sale, interpretează teribil acest cod (adaugă boarders inexistente, schimbă butonul atunci când faceți clic).
Ca rezultat, această metodă poate fi utilizată, deoarece IE6 depășește propriile sale, utilizați-l numai pentru că este preinstalat în Windows XP; IE7 este un nedobrazer buggy, care a fost înlocuit de IE8.
Dar, dacă doriți să faceți un buton dinamic pentru IE, atunci următoarea metodă este destul de utilă.
La eticheta care formează butonul se aplică instrucțiunile:
- Funcția OnMouseOver - funcționează atunci când indicatorul mouse-ului atinge limitele obiectului și aplică instrucțiunile din conținutul său.
- Funcția OnMouseOut - conținutul este utilizat atunci când indicatorul mouse-ului părăsește obiectul.
- Funcția OnMouseDown este declanșată atunci când butonul mouse-ului este apăsat.
- Funcția OnMouseUP este declanșată când butonul mouse-ului este eliberat.
Prin aceste patru funcții, puteți implementa un afișaj cu butoane foarte tolerabil în toate browserele populare.
Trimiteți datele unui formular unui link
Puteți și nu vă faceți griji cu butoanele, dar trimiteți datele formularului cu un link. Și cum să facem un buton din legătură, noi, distinsul cititor, am discutat în detaliu.
Acum, ia în considerare modul în care este format acest scenariu.
Iată formularul de trimitere:
Această bucată de cod HTML, după cum probabil ați ghicit, formează un șir pentru introducerea unei interogări de căutare, iar confirmarea pentru a începe o căutare face clic pe linkul "Căutare".
Acest script va trimite (metoda submit ()) conținutul câmpurilor de formular la handler.
Fii atent! Nu permiteți formularului myform elemente cu nume = "trimite". altfel scriptul de trimitere se va referi la acest element, mai degrabă decât la transferul de date.
Andrew, multe mulțumiri pentru această stasya, și mai ales pentru cursul de layout Block. Sunt un începător și cu lecțiile dvs. timp de 2 săptămâni, am obținut multe. Despre butoane nici măcar nu a crezut, dar a făcut recent test de locuri de muncă pentru locuri de muncă, nu a luat doar B) ... ca articol ... De fapt, există încă nevoie de câmpul de intrare este pur și simplu neobișnuit, aș spune că un oval alungit. Încercat în același fel ca să încerce să o facă, nu sa întâmplat nimic. Golf I a lua de mare, iar problema a fost în faptul că în Opera tex în domeniu nu este în mijloc, și este presat pe partea de sus, în alte browsere în mijloc, din cauza lipsa lor de experiență, scuipat pe tot și pune doar de intrare peste div (o desen) C)
Și este bine că voi, folosind o altă abordare, ați reușit să obțineți rezultatul dorit. Faptul este că o anumită sarcină în structură poate avea mai multe soluții corecte și, fiecare dintre ele, va avea argumente pro și contra. Dacă codul scris respectă standardele, are o structură logică, atunci putem presupune că problema este rezolvată corect.
Da, vreau să adaug - dacă utilizați XHTML - modificați partea JS a tuturor caracterelor mari la cele mici - altfel nu veți trece calibrarea.
-----------
Câteva litere în etichete XHTML
În XHTML, spre deosebire de HTML, numele elementului și al atributului trebuie să fie minuscule. De exemplu, onMouseOver este un atribut invalid în XHTML, care necesită folosirea lui onmouseover. Fie este bine în HTML.
Și cum faceți un șir pentru cod?
Iată cum aceasta:
1 .button: mutați 2 poziții de fundal: 0 -56px;
3 padding-top: 4px;
4>
Mulțumesc. Foarte util. Mai ales în partea de trimitere a formularului myform.submit (); (Am folosit-o pentru a trimite date de la intrare (tip = "buton"), pentru că nu a fost posibil să folosiți type = »submit»).
Sunt un maestru web și un profesor. Sunt interesat de partea tehnică a afacerii pe internet.
Îmi place să studiez diverse aspecte tehnice, să înțeleg cum este aranjat și să-i spui altora.
Locuiesc în Moscova, Rusia.
Locuiesc în Mariupol, Ucraina.
Locuiesc în Lviv, Ucraina.
Trimiteți-le prietenilor: