File HTML pe pagină. Cum să faci file adaptive (file) folosind css fără a folosi scripturi. Cum să funcționeze
Deși baza designului este creativitatea, există încă unele elementele interfeței site-ului web Va fi util sa ai in stoc. În acest articol voi arăta peste 15 detalii importante interfața cu utilizatorul site-ul, care va fi de folos tuturor. Folosind aceste mici sfaturi pe care le poți obține design frumos și practic folosind mai puțin efort și timp.
1. Grilă
O pagină, pe lângă conținutul autorului, conține de obicei și spațiu pentru un banner, spațiu pentru publicitate, linkuri etc... Este important ca aceste spații nu a stricat aspectul general al site-ului, și au fost în același timp localizat convenabil. Prin urmare, este convenabil să utilizați marcarea paginii. Aspectul clasic al paginii este astfel:
Marca(logo, slogan etc.), în colțul din stânga sus
Navigare- în partea de sus a site-ului și, de asemenea, de preferință în stânga
Conținut principal- centrul paginii
reclame- în dreapta paginii
Subsol nu contine Informații importante(sau conține un duplicat al acestuia), de obicei acestea sunt link-uri către pagini interne si detalii de contact.
În acest exemplu am desenat o grilă imaginară
Pentru a vedea grila, împărțiți mental imaginea cu linii drepte.
Și un alt exemplu de utilizare a grilei în design.
2. Navigare pe verticală
Vedem din ce în ce mai rar bare de navigare din stânga și din dreapta, pentru că... Acum există tendința de a simplifica meniul și de a trece la o versiune orizontală. Cu toate acestea, navigarea verticală nu va dispărea pur și simplu pentru că opțiunea orizontală nu este întotdeauna atât de universală. Asa de, opțiunea verticală este mai convenabilă pentru meniurile cu o structură arborescentă complexă sau lungă. Luați, de exemplu, molotok.ru.
Este greu de imaginat cum se vor încadra toate categoriile sale într-un meniu orizontal.
Cu toate acestea, nimic nu vă împiedică să îl utilizați pentru site-uri mici. Dacă este plasat direct sub logo, poate umple golul destul de bine.
Un exemplu simplu de navigare verticală
Meniul vertical este situat în stânga, sub logo
3. Navigare orizontală
Navigare orizontală folosit de obicei pentru liste simple și scurte de link-uri. Este foarte convenabil să îl plasați deasupra sau sub logo. Cu excepția ta vizibilitate, meniul orizontal mai are un avantaj - este un economisitor de spațiu. Un meniu vertical ocupă spațiu în funcție de lungimea celui mai lung cuvânt. Dar meniul orizontal „crește” doar puțin în înălțime și chiar și atunci vă puteți juca întotdeauna cu margini și umplutură.
Meniu orizontal obișnuit (bine conceput).
Un alt exemplu de design bun meniu orizontal
4. Liste derulante
O altă opțiune de navigare, mai avansată, sunt listele derulante. Este adesea folosit pe paginile în care câteva categorii, dar includ subcategorii. Meniul drop-down este foarte convenabil, ajută la evitarea tranzițiilor inutile și economisește spațiu pe pagină
Meniu derulant elegant
Meniu modificat, design de imagine adăugat
Meniul derulant poate fi nu numai orizontal, ci și vertical
5. Pesmet
Breadcrumb-urile sunt o reprezentare vizuală a ierarhiei paginilor unui site. Utilizatorul trebuie să înțeleagă în ce secțiune a site-ului se află și cărei categorii îi aparține pagina. Un lucru foarte convenabil, conform planului navigare pe site, și ca sursă legături suplimentare pagini (ce motoarele de căutare iubesc, deci popularitatea acestui element este în creștere tot timpul). Sunt plasate deasupra conținutului paginii, de la stânga la dreapta.
Pagina curentă este evidențiată în culoare
Pagina actuală nu iese în evidență în niciun fel. Autorii au jucat pe logica vizitatorului)
Pagina actuală nu iese în evidență în niciun fel. Dar paginile rădăcină sunt evidențiate
6. Lista intrărilor
Blogurile devin din ce în ce mai populare, iar toată lumea are o listă de postări, ceea ce este logic. Fiecare o astfel de listă constă în „previzualizări” postărilor. Și „previzualizările”, la rândul lor, sunt din titlul articolului, rezumatul, numărul de comentarii și informații generale similare. Întotdeauna punem accentul principal pe nume. Ar trebui să fie mare, să dezvăluie subiectul, fără cuvinte inutile și conținut în etichetele h1 sau h2. „Previzualizarea” ar trebui să intrigă cititorul, astfel încât să devină interesat să se uite la postare și să navigheze pe site.
În formă extinsă, este afișată doar ultima intrare, restul sunt sub formă de mici „previzualizări”. Această opțiune economisește spațiu.
Fiecare intrare este formatată ca o pagină de notepad.
7. Arhivele
Arhivele sunt foarte mod bun oferiți acces la postările vechi de blog. O arhivă bună ar trebui să conțină sortare nu numai după date, ci și pe categorii, deoarece de multe ori utilizatorii sunt interesați doar de o singură secțiune de blog. Din păcate, nu toți autorii acordă atenția cuvenită acestui element, dar în zadar - arhiva îmbunătățește foarte mult capacitatea de utilizare a paginii.
Arhivă detaliată, unde postările sunt sortate pe categorii și etichete
Această arhivă include o navigare temporară convenabilă
Un exemplu excelent care combină o arhivă după date și după înregistrări
8. Subsol cu conținut
Zilele subsolurilor simple par să se estompeze și să devină la modă subsolurile sunt frumoase și utile. Acolo poți plasa aceleași arhive, contacte, informații despre autorul (proprietarul) blogului, meniuri și o grămadă de alte lucruri. Informatii utile. Funcția subsolului poate include atragerea vizitatorilor pentru a vizualiza alte pagini ale site-ului. Desigur, este indicat să-l decorezi frumos. Alternativ, multe utilizați 3-4 coloane, care conțin link-uri și informații interne, precum și abonamente la RSS și e-mail.
Subsol informativ cu trei coloane
Un exemplu de design grafic excelent pentru subsolul unui site web
Subsol cu un design elegant interesant
9. Numerotarea paginilor
Când există mult conținut pe un site și trebuie să fie într-un fel organizat, atunci numerotarea paginilor este primul lucru care îmi vine în minte. Ea permite derulați rapid prin conținutul site-ului, reducând în același timp timpul de încărcare a paginii. Cel mai bun exemplu de navigare în pagină, în opinia mea, este implementat cam așa:
Aici probabil că nu am surprins pe nimeni, pentru că... această schemă este destul de comună. Aici pagina curentă, vecinii săi sunt exprimate clar și există și acces imediat la cele mai recente (și primele) postări.
Una dintre cele mai comune opțiuni de design de defilare a paginii
Iată o opțiune de design mai interesantă
10. Taburi Modale
Filele modale conțin conținut suplimentar într-o formă compactă, care devine deschisă numai atunci când utilizatorul dorește. Când vechimea blogului îi permite, de exemplu, să aveți o arhivă mare cu o cantitate mare etichete și categorii, le puteți distribui în mai multe file, astfel încât acestea nu a ocupat mult spațiu. Desigur, puteți afișa orice doriți în acest fel, iar metodele de proiectare pot fi foarte diferite.
În acest exemplu, pe fiecare filă nouă - tip diferit preparate de la restaurant
Revista oferă vizitatorului să aleagă conținutul de care are nevoie
11. Participa la sistemul de rating.
Cele mai multe site-uri web/bloguri moderne se concentrează pe interacțiunea utilizatorului. Și mulți se străduiesc să-și facă paginile totul mai interactiv.
Plasați butoanele pe site-ul dvs Stumbleupon / Twitter / Vkontake etc. - și vei vedea cum paginile prind viață.
Una dintre opțiunile populare este adăugarea de pictograme în bloc marcajele sociale la finalul articolului
12. Panoul informativ
Un lucru care nu este atât de comun (încă!), dar are și dreptul la un loc în acest articol. Magazine online, banci online, centre analitice - toate aceste servicii au pagini de informatii statistice pe site-urile lor. Pe astfel de pagini este deosebit de important transmite vizitatorului ceea ce vrea să găsească. Designul lor ar trebui să fie simplu, bine organizat și clar.
Google Analytics este unul dintre cele mai proeminente exemple de tablou de bord bine realizat.
Un alt exemplu de design bun și de utilizare atunci când lucrați cu date.
Graficele sunt, de asemenea, folosite pentru a afișa prețurile acțiunilor. Acesta este un exemplu de design.
13. Înregistrare ușoară
Cu toții întâlnim formulare de înregistrare pe site-uri web și mulți dintre noi suntem forțați să se înregistreze frecvent dintr-un motiv sau altul. Cred că toată lumea va fi de acord că oferta de a introduce un e-mail de confirmare sau un text de securitate complex, de neînțeles pe pagina a 3-a a formularului de înregistrare este plictisitoare. Toate aceste excese nu simplifică deloc viața vizitatorilor. De aceea este important maxim formă simplăînregistrare. Utilizatorul nu trebuie să creadă că a uitat să introducă ceva sau să se uite la simboluri. Dacă doriți să extrageți cât mai multe informații de la utilizator, procedați astfel:
Pentru a se înregistra, trebuie să-și introducă login-ul, adresa de e-mail și parola. Iar după înregistrare, invită-l să completeze alte câmpuri ale chestionarului.
Un exemplu grozav de formular de înregistrare simplu, deși nu este cât se poate de scurt
Vimeo are o versiune a celui mai scurt formular de înregistrare - doar trei (!) câmpuri
Facebook este un alt exemplu de bună execuție a formei
14. Accente
Dă viață paginii tale. Subliniați cuvintele/expresiile importante. Joacă-te cu dimensiunea, fontul, culoarea, designul. La urma urmei, primul lucru pe care ar trebui să-l vadă un vizitator este ce ii subliniezi?. Cu toate acestea, este puțin mai dificil să-l faci să vadă părțile paginii în ORDINA potrivită. Dar și asta se poate rezolva.
Fragmente importante de text sunt evidențiate în turcoaz
Inscripția principală a paginii este mărită cât mai mult posibil și scrisă într-un font diferit
Fiecare linie nouă„se estompează” în raport cu cel precedent
15. Afișarea colecțiilor
Mulți dintre noi ne place să ne arătăm prietenii, colecțiile de imagini, resursele, fotografiile etc. Pentru a afișa aceste colecții, mai multe căi diferite.
Unii oameni folosesc o grilă de „miniaturi”, în timp ce alții folosesc o listă de imagini.
În acest exemplu vedem o afișare atât de ciudată de legături prietenoase
O afișare simplă și elegantă a celei mai recente lucrări ale designerului
16. Caută
Orice site web care are mult conținut ar trebui să aibă o funcție de căutare. Butonul de căutare este de obicei localizat pe un loc proeminent. Într-o pălărie sau meniu vertical.
Formular de căutare simplu și cu tonuri moale
Un exemplu de design neobișnuit de formular de căutare
Și un alt exemplu de design non-standard al formularului nostru
17. Forme
Formularele de pe site-uri sunt necesare pentru a lăsa un comentariu sau pentru a efectua un fel de plată. Ca în exemplul cu înregistrarea, și aici simplitatea maximă este importantă. La urma urmei, utilizatorilor nu le place să petreacă mult timp lăudându-se cu introducerea caracterelor și gândindu-se la ce să introducă unde.
Este mai bine să activați capacitatea de a vizualiza în ce stadiu de completare se află utilizatorul și cât timp a mai rămas până la sfârșit. De asemenea Este indicat să împărțiți etapele pe categorii (Informații generale, contacte etc.)
Pe această pagină puteți urmări pas cu pas procesul de completare a formularului
Un alt exemplu de completare pas cu pas a formularului. Etapa activă este evidențiată în culoare
O altă opțiune de design - procesul activ se deschide într-o filă nouă
18. Abonamente
În timp ce blogurile și social media câștigă popularitate, există tendința de a plasa mai multe butoane de abonare. De regulă, minimul este RSS și Twitter. Oamenii încearcă să facă paginile mai vii și mai comunicative, făcându-le cât mai ușor posibil pentru cititori să urmărească știrile.
Alături de butoanele de abonare este imediat indicat și numărul de abonați.
Când am văzut această opțiune, designul elegant mi-a atras imediat atenția
Cea mai simplă opțiune - doar butoane de abonare, plus link-uri către rețelele sociale
19. Glisoare
Fiecare designer de layout mai mult sau mai puțin experimentat poate lua un slider jQuery gata făcut pe Internet și îl poate introduce în pagina lor. ȘI arata foarte impresionant. Acesta este motivul pentru care glisoarele se găsesc din ce în ce mai mult pe pagini. De regulă, acestea sunt amplasate ca panou publicitar cu cele mai bune materiale (sau produse) ale site-ului, în cel mai vizibil loc.
Slider excelent, simplu, elegant.
Și acesta este un exemplu destul de comun de glisor
Un bun exemplu neobișnuit de design glisor
Desigur, elementele nu se termină aici - sunt mult mai multe dintre ele. Am vorbit doar despre cele mai trendy și populare. Aș dori să le doresc tuturor să ia informațiile în serios, să analizeze și să se gândească la ea. Faceți site-uri frumoase. Do confortabil site-uri.
Cu stimă, Naiko Mikhail.
Editorial: Rog Victor și Andrey Bernatsky. echipa webformyself.
25 octombrie 2019 Postarea a fost actualizată
Yuri Nemets
O selecție de file frumoase - un set de file frumoase pentru site
Astăzi vă aduc în atenție o selecție de file frumoase și originale. La crearea acestor efecte, s-au folosit pseudo-elemente, imagini SVGși tranziții CSS. Designul tuturor filelor este realizat într-un stil modern și este potrivit pentru aproape orice site web. Uită-te la exemplele acestor file și vei fi surprins de cât de neobișnuit poți proiecta ceea ce pare a fi un element atât de folosit pe site.
O selecție de file frumoase
Descarca
O selecție de file frumoase
Dacă ați urmărit versiunea demo, ați putea observa că toate exemplele sunt pe o singură pagină. Prin urmare, dacă descărcați și deschideți sursele, veți vedea o pagină lungă ca imaginea din stânga. Nu te speria! Totul este frumos structurat acolo. Trebuie doar să luați „bucata” de cod dorită și să o lipiți în site-ul dvs. web.
Fiecare exemplu nou este situat într-un bloc separat
Același lucru se întâmplă cu fișierul de stil. De asemenea, este mare, dar totul este comentat acolo, așa că nu ar trebui să fie probleme.
Dacă cineva încă nu a vizionat demonstrația, atunci ți-am făcut câteva capturi de ecran :)
Concluzie
O selecție bună de file cu efecte și tranziții non-standard. Luați câteva minute din timpul dvs. și uitați-vă la toate filele. Se întâmplă să te uiți și să te gândești: „Ei bine, file obișnuite, ce este în neregulă cu asta. Și nu chiar și am nevoie de ei.” Dar unul, un design neobișnuit este atât de memorabil încât atunci când trebuie să implementați file pe site, așa doriți să le faceți. Și nici nu-ți amintești unde i-ai văzut!
Prin urmare, nu uitați să adăugați site-ul meu la marcaje din browser (acest lucru se face cu comanda rapidă de la tastatură CTRL+D) 😉 .
Nu cu mult timp în urmă, ne-am uitat la implementarea filelor cu conținut, fără a conecta javascript, folosind exclusiv .
Astăzi vreau să vă prezint o altă soluție, nu mai puțin interesantă, pentru crearea unui bloc compact de file, construit pe CSS3 pur și folosind elemente aspect adaptiv. Ca și în prima variantă, nimic de prisos sau greoi, doar minim cod css, și veți avea la dispoziție un bloc adaptiv cu file comutabile care se va potrivi perfect în orice secțiune a paginii, fie că este un mesaj separat, o coloană laterală sau o fereastră modală.
Ce modificări au fost făcute față de prima versiune?
În primul rând, blocul de file a devenit adaptiv, adică. când vizionați dispozitive mobile, dimensiunea filelor se modifică în funcție de dimensiunea ecranelor dispozitivelor utilizatorului, textul titlurilor este eliminat și rămân doar pictogramele font, indicând sensul conținutului unuia sau altuia.
Pictogramele fonturilor sunt din , colecția este foarte bogată și, în plus, absolut gratuită. Puteți integra pictograme în orice proiect folosind un set descărcat de fonturi sau le puteți conecta la fișierul dvs stiluri css direct de pe site-ul web al dezvoltatorului prin @import folosind următoarea linie:
| @import URL( „http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css”) ; |
@import url ("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
În exemplul demonstrativ, asta este exact ceea ce am făcut, așa că, uitându-vă la codul sursă, vă puteți da seama cu ușurință ce este.
Structura file-urilor din Html este destul de simplă. Container div de bază, link
HTML
| < div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Fila 1" >Fila 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Fila 2" >Fila 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Fila 3" >Fila 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Fila 4" >Fila 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>Postați orice conținut aici.... < section id= "content-tab4" > < p>Postați orice conținut aici.... |
Pentru a organiza blocurile de conținut am folosit eticheta .
Comutarea filelor are loc prin interacțiunea atributului bifat din etichetă și pseudo-clasa:checked , strâns legate prin identificatori în CSS. În procesarea acestei metode se împiedică vechea, celebra frână a progresului Internet Explorer 8, din versiunea 9 totul funcționează cel mai bine.
Ajungem ușor la partea cea mai interesantă, la stilizarea file-urilor folosind magia CSS. Aici lucrurile sunt și mai simple, nu are rost să descriem în mod specific fiecare proprietate și parametri, am scris câteva explicații în codul sursă, așa că cred că nu va fi greu să-ți dai seama ce merge unde și de ce, dar dacă ai întrebări sau găsiți o eroare, scrieți în comentarii, cu siguranță voi răspunde și vă ajut.
CSS3
| /* Container cu file de bază */. file (lățime minimă: 320 px; lățime maximă: 800 px; umplutură: 0 px; marjă: 0 automat; ) /* Stilează secțiunile de conținut */. tabs> secțiune (afișare: niciuna; umplutură: 15px; fundal: #fff; chenar: 1px solid #ddd; ) . tabs> section> p ( margine: 0 0 5px; line-height: 1,5; culoare: #383838; /* adaugă animație */- webkit- animatie- durata: 1s; animatie- durata: 1s; - webkit- animație- umplere- mod: ambele; animație-fill-mode: ambele; - webkit- animatie- nume: fadeIn; nume-animație: fadeIn; ) /* Descrieți animația proprietății opacității */@- webkit- keyframes fadeIn ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ; ) ) @ keyframes fadeIn ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ; ) ) /* Ascunde casetele de selectare */. tabs> input (afișare: niciunul; poziție: absolut; ) /* Stiluri de comutatoare de file */. file> etichetă ( afișare: bloc inline; margine: 0 0 - 1px; umplutură: 15px 25px; greutate font: 600; aliniere text: centru; culoare: #aaa; chenar: 0px solid #ddd; lățime chenar: 1px 1px 1px 1px; fundal: #f1f1f1; chenar-rază: 3px 3px 0 0 ; ) /* Pictograme de font din Font Awesomeîn format Unicode */. file> etichetă: înainte (font-familie: fontawesome; font-greutate: normal; margine-dreapta: 10px; ) . tabs> label[ for *= "1" ]: before (conținut: " \f 19a"; ). tabs> label[ for *= "2" ]: before (conținut: " \f 17a"; ). tabs> label[ for *= "3" ]: before (conținut: " \f 13b"; ). tabs> label[ for *= "4" ]: before (conținut: " \f 13c"; } /* Schimbă stilul comutatoarelor de file la trecerea cursorului */. file> etichetă: hover (culoare: #888; cursor: indicator; ) /* Stiluri pentru fila activă */. file> intrare: bifat+ etichetă (culoare: #555; chenar-sus: 1px solid #009933; chenar-jos: 1px solid #fff; fundal: #fff; ) /* Activarea secțiunilor folosind pseudo-clasa:checked */ #tab1:verificat~#content-tab1, #tab2:verificat~#content-tab2, #tab3:verificat~#content-tab3, #tab4:verificat~#content-tab4 ( afisare: bloc; ) /* Eliminați textul de pe comutatoare * și lăsați pictograme pe ecranele mici */ Ecran @media și (lățime maximă: 680 px) ( . tabs> etichetă ( font-size: 0 ; ) . tabs> etichetă: înainte ( margine: 0 ; font-size: 18px; ) ) /* Schimbați umplutura * a comutatoarelor pentru ecrane mici */ Ecran @media și (lățime maximă: 400 px) ( . file> etichetă ( umplutură: 15 px; ) ) |
/* Container de bază pentru file */ .tabs ( lățime minimă: 320 px; lățime maximă: 800 px; padding: 0 px; margine: 0 automat; ) /* Stiluri secțiuni de conținut */ .tabs>section ( afișare: niciuna; padding : 15px; fundal: #fff; chenar: 1px solid #ddd; ) .tabs>section>p (marja: 0 0 5px; line-height: 1,5; culoare: #383838; /* atașați animația */ -webkit-animation -durata: 1s; durata-animație: 1s; -modul-de-umplere-animație-webkit: ambele; modul-umplere-animație: ambele; -nume-animație-webkit: fadeIn; numele-animație: fadeIn; ) /* Descrieți proprietățile opacității animației */ @-webkit-keyframes fadeIn ( de la ( opacitate: 0; ) la ( opacitate: 1; ) ) @keyframes fadeIn ( de la ( opacitate: 0; ) la ( opacitate: 1; ) ) /* Ascunderea opacității casete de selectare * / .tabs>input (afișare: niciunul; poziție: absolut; ) /* Stiluri de comutatoare de file */ .tabs>label (afișare: inline-block; margine: 0 0 -1px; padding: 15px 25px; font- greutate: 600; aliniere text: centru; culoare: #aaa; chenar: 0px solid #ddd; lățime chenar: 1px 1px 1px 1px; fundal: #f1f1f1; chenar-rază: 3px 3px 0 0; ) /* Pictograme font din Font Awesome în format Unicode */ .tabs>label:before ( font-family: fontawesome; font-weight: normal; margin-right: 10px; ) .tabs>label:before ( conținut: " \f19a"; ) .tabs>label:before ( conținut: "\f17a"; ) .tabs>label:before ( conținut: "\f13b"; ) .tabs>label:before ( conținut: "\f13c"; ) /* Schimbă stilul comutatoarelor de file la trecerea cursorului */ .tabs>label:hover (culoare: #888; cursor: pointer; ) /* Stiluri pentru fila activă */ .tabs>input:checked+label (culoare: # 555; chenar -sus: 1px solid #009933; chenar-jos: 1px solid #fff; fundal: #fff; ) /* Activarea secțiunilor folosind pseudo-clasa:checked */ #tab1:checked~#content-tab1, # tab2:checked~# content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* Eliminați textul din butoanele radio * și lăsați pictograme pe ecranele mici */ @media ecran și (max -width: 680px) ( .tabs>label ( font-size: 0; ) .tabs>label:before ( margin: 0; font-size: 18px; ) ) ) /* Schimbați umplutura pentru * comutatoare pentru ecrane mici */ @ ecran media și (lățime maximă: 400px) ( .tabs>label ( umplutură: 15px; ) )
Puteți proiecta filele () în orice mod doriți, totul din exemplu este doar un exemplu, viziunea mea de moment asupra produsului, nimic mai mult. Puteți afla valorile Unicode ale pictogramelor fontului de care aveți nevoie pe site-ul dezvoltatorului; pentru a face acest lucru, trebuie doar să faceți clic pe pictograma selectată și să copiați codul digital emis, cam așa: \f13b .
Vă rugăm să rețineți că atunci când reduceți dimensiunea ferestrei browser, filele se adaptează automat la dimensiunea curentă până la o anumită valoare (în exemplul 680px), după această valoare, titlurile text ale filelor dispar, lăsând pictograme. Acest lucru asigură compactitatea maximă a întregului bloc de file; tot ce rămâne este să alegeți pictogramele potrivite care se potrivesc cu semnificația conținutului prezentat în interiorul filelor.
Urmăriți un exemplu live despre cum funcționează filele, descărcați sursele, experimentați cu parametrii și creați, creați, creați...
Dacă te-ai săturat să lucrezi cu șabloane în limba engleză și visezi la o șansă de a folosi șabloane în limba rusă, atunci cu siguranță vei fi mulțumit de câteva vești grozave. Aceleași au apărut pe piața TemplateMonster soluții gata făcute, de care aveți nevoie. Da, da, pe site le găsești acum pe cele mai bune. Șabloanele localizate sunt exact ceea ce aveți nevoie dacă doriți să vă construiți proiectul online cantitate minimă timp. Pe lângă faptul că textele pentru șabloane au fost scrise manual, acestea au pe toate instrumentele necesare pentru a crea un site web profesional.
Cu tot respectul, Andrew
Bună ziua, dragi cititori. În această zi geroasă ne vom descurca cu tine file frumoase cu folosind CSSși JQuery. Se pare că aceste așa-numite file sunt foarte utile pentru întregul site; pot economisi spațiu în mod semnificativ pe pagină. Ele pot fi plasate peste tot, în bara laterală, sau direct în conținutul propriu-zis, articolul.
De asemenea, filele pe care le vom realiza au un design frumos; acestea vor decora semnificativ site-ul dvs. Ce frumos si util :-) mi se pare o rara coincidenta. Mai mult, sunt realizate doar cu ajutorul lui , respectiv: se incarca rapid si nu suporta nicio sarcina pe server.
JQuery
$(document).ready(function() ( $("#conținut div").hide(); // Conținut ascuns $("#tabs li:first").attr("id","current"); // Ce filă se afișează prima $("#content div:first").fadeIn(); // Afișează conținutul primei file $("#tabs a").click(function(e) ( e.preventDefault() ; $ ("#content div").hide(); //Ascunde tot conținutul $("#tabs li").attr("id",""); //Resetează identificatorii $(this).parent() .attr ("id","current"); // Activează identificatorii $("#" + $(this).attr("title")).fadeIn(); // Afișează conținutul filei curente )) ; ))() ;Asta e practic tot, principalul lucru este să experimentezi, poți adăuga la aceste file imagini de fundal, ceea ce le va face în mod semnificativ să arate mai bine, dar vor dura mai mult să se încarce.
Compatibilitate browser
Aceste file sunt acceptate de aproape toate browserele, doar că în unele vor arăta puțin diferit, deoarece multe nu acceptă încă CSS3.
Atât, sper că v-a plăcut :-) Dacă ceva nu vă este clar, asigurați-vă că întrebați în comentarii. Pe curând.
În articolele anterioare, ați învățat cum să creați file pentru un site web pe și. Și ne-am dat seama cum să rețelele sociale.
Dar uneori trebuie să faci cea mai simplă filă folosind o combinație de html și css și să o plasezi oriunde pe pagina site-ului, indiferent de ce cms folosești.
Puteți plasa orice conținut sau cod într-o astfel de filă. Și pentru aceasta nu trebuie să conectați biblioteci și scripturi suplimentare - HTML și CSS.
Un exemplu de filă html css pe o pagină:
Crearea unei file html
1 pas. Pentru tab-uri scriem cod simplu:
Conținutul filei 1
Conținutul filei 2
Conținutul filei 3
Conținutul filei 4
Se creează css pentru noua filă html
Pasul 2. Scriem stiluri pentru design extern.
În stiluri poți schimba orice și cum vrei. În acest exemplu, filele au colțuri rotunjite. Dacă nu aveți nevoie de el, atunci pur și simplu ștergeți acest bloc.
/* Document CSS */ .tabs ( opacitate: 0; vizibilitate: ascuns; ) .tab( poziție: absolut; vizibilitate: ascuns; z-index: 10; culoare:#000; font: bold 9pt arial; ) .tabs: target+.tab ( opacitate: 1; vizibilitate: vizibil; ) .tabsLink a( culoare de fundal:#F06406; padding:2px; font: bold 10pt arial; color:#fff; text-decoration:none; /* Începeți filele rotunjite */ -webkit-border-sus-stânga-rază: 10px; -webkit-border-sus-dreapta-rază: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; chenar-sus-stânga-rază: 10px; chenar-sus-dreapta-rază: 10px; /* Sfârșitul filelor rotunjite */ )
După cum puteți vedea, există multe opțiuni pentru a crea file obișnuite pentru a ascunde conținutul în file inactive. Și acesta este cel mai simplu, făcut în 5 minute.