În această lecție, vom discuta despre procesul de creare a unei casete lightbox utilizând doar XHTML și CSS. Codul rezultat va funcționa în Firefox, Opera, Chrome, Safari, IE6, IE7 și IE8.
Pasul 1. Noi scriem marcajul.
Aspectul este foarte simplu. În acest stadiu, avem două legături care nu conduc nicăieri. Aceste linkuri vor fi folosite în cele din urmă pentru a include cutii luminoase, dar mai întâi trebuie să adăugăm marcaj pentru aceste cutii luminoase după container
Acest marcaj este selectat numai pentru această lecție. Face CSS simplu și intuitiv. În proiectele reale, totul se poate schimba conform cerințelor designului de interfață.
Pasul 2. Faceți pagina mai bună
Adăugați următorul cod CSS în secțiune
documentul dvs. (CSS încorporat este folosit doar pentru claritate în lecție):Totul este relativ simplu, dar trebuie să explicăm de ce anumite elemente au dat proprietăți. Pentru casetele lightbox, rolul principal este jucat de următorul stil:
Rețineți că folosim RGBa pentru culoarea de fundal. Internet Explorer, ca întotdeauna, nu suportă RGBa. Prin urmare, trebuie să adăugați marcaj și stil specific pentru IE pentru a ocoli ambuscada. Puneți în CSS următorul CSS
documentul dvs .:Apoi adăugați următoarea marcaj sub definiția casetelor dvs. lightbox (înainte de eticheta de închidere fiecare cutie lightbox):
Pasul 3: Poziționarea casetei de lumină
Dacă vă uitați la rezultatul intermediar, atunci caseta lightbox este situată sub conținutul nostru. Aceasta nu corespunde cu reprezentările despre elementul dat al interfeței web. Așadar, trebuie să adăugăm proprietăți CSS astfel încât caseta lightbox să fie plasată pe partea de sus a conținutului. Următorul cod trebuie adăugat stilului #container.
Acest cod poate fi oarecum jenant. De ce îl adăugăm în #container. nu stilul elementului #lightboxes. Pentru că dacă îl adăugați la stilul elementului #lightboxes. atunci acest element copil va fi întotdeauna deasupra #container (indiferent de nimic), astfel încât să nu putem face niciodată clic pe link-ul din zona de conținut din nou, chiar și atunci când casetele de lumină sunt "închise". Și avem # container între elementele moștenitorilor #lightboxes. De ce este necesar acest lucru devine clar în următorul pas.
De asemenea, trebuie să vedem o singură căsuță lightbox la un moment dat, așa că adăugăm #lightboxes la stil.
Pasul 4: Deschideți și închideți caseta Lightbox
Deci, avem felul de elemente și poziționarea a tot ceea ce se află pe pagină, dar cum deschidem și închidem casetele de lumină? Doar.
Acum trebuie să eliminăm culoarea de fundal din elementul #close. face să pară că nu există nimic aici și poziționați-l în spatele elementului #container astfel încât să putem face clic pe link-urile din #container.
Amintiți-vă că elementul #container este poziționat între elementele casetei lightbox? Acesta este motivul.
Următoarea piesă CSS trebuie adăugată stilului elementului #close.
Acum poți deschide și închide caseta de lumină!
Cum funcționează? Dacă nu setați indexul z pentru element, acesta va fi poziționat în funcție de poziția sa în cod. Prin urmare, elementele lightbox
Pasul 5: Adăugați conținut în container
În momentul de față nu există mult conținut în containerul nostru, deci totul este afișat pe o singură pagină și totul funcționează bine. Cu toate acestea, dacă adăugați mai multe pagini de conținut, veți descoperi că nu am făcut totul. Apare o bară de defilare, care vă permite să parcurgeți marginea cutiei luminoase și a stratului său suprapus. Acest lucru se datorează faptului că documentul se poate derula, dar caseta lightbox are numai 100% din înălțimea ferestrei, nu documentul. Elementul #container are, de asemenea, o înălțime a ferestrei de 100%, deci soluția simplă este de a depasi recipientul, astfel încât acesta va fi derulat în locul documentului. Adăugăm elementul #container la stil.
Dacă vă uitați acum la documentul nostru din Internet Explorer, veți vedea două bare de defilare. Unul pentru #container și o bară de derulare inaccesibilă pentru document. Acest lucru poate fi ușor corectat prin adăugarea următorului cod CSS la secțiunea pentru IE:
Întregul document va arăta astfel:
concluzie
Tot ce se întâmplă servește doar unui proces de forță și este puțin probabil ca cineva să o folosească în proiecte reale. Dar nimeni nu poate ști ce gânduri și idei pot provoca o astfel de experiență!
Un efect mic cu animație interactivă a literelor.
Un mic concept de sfaturi amuzante care sunt implementate pe SVG și anime.js. În plus față de stilul special, exemplul implementează animația și transformarea obiectelor grafice.
Experiment: litere SVG animate bazate pe biblioteca anime.js.
Un experiment de pagină web care este afișat "de la prima persoană" prin ochelari de soare.
Un scenariu experimental de desfășurare a navigației.
Dicky_forester
roata mouse-ului reactioneaza inadecvat
postaltomsk
nu îl puteți descărca, dar ar fi plasat în colecția) thx
și, de asemenea, atunci când mutați cursorul mouse-ului peste bara de scroll, totul dispare (opera v. 10.62)
Foarte prost arată ca un buton demo ca PIECE.
De ce reacționează fereastra la mouse? nu este necesar.
knyazsergei
Când parcurgeți dreapta pe caseta de lumină, aceasta se termină, dar pagina nu se derulează!
Câteva hacuri folosite și stiluri create ca toate regulile, chiar și pe setul DLE
Oamenii, dar este posibil ca pentru a forța că, dacă a trecut o greșeală, ce eroare a fost afișată în fereastra curentă?
aparent textul din acesta este mai bine citit de motoarele de căutare. Yab poate fi chiar înlocuit cu o cutie de fețe, dacă nu derulați cu o roată))
tasmanangel
Descărcați codul din "sursa lecției". Nu există nimic de derulare, deși se pare că codul este același. Dar nu am comparat complet.
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Trimiteți-le prietenilor: