Toate șabloanele prezentate pentru site-ul dvs. sunt construite pe baza versiuni moderne HTML5 și CSS3. În plus, autorii folosesc funcții la modă precum design plat, design responsive, layout responsive, slidere jQuery, animație CSS3 etc. Adică, dacă sunteți în căutarea unui șablon de site mobil, puteți alege oricare dintre cele prezentate. Șabloane html5 frumoase 2017 deși gratuite, arată premium.
Aici veți găsi peste 50 de șabloane gratuite de site web responsive de înaltă calitate în HTML5 și CSS3, care pot fi folosite pentru site-uri noi, precum și pentru reproiectarea celor existente. Șabloane elegante de site-uri html5- de asta ai nevoie!
Actualizat la 03.12.2019: De când articolul a fost scris acum 2 ani, multe link-uri s-au rupt. Fie proprietarii șabloanelor au fuzionat, fie au schimbat statutul șabloanelor de la gratuit la plătit, fie extratereștrii au pierdut totul. Solicitați-vă, dragi cititori, dacă găsiți un astfel de link, postați-l în comentarii, îl voi corecta.
1. Snow - șablon gratuit de pagină de destinație în HTML5 și CSS3
Șablonul html5 css3 pentru pagina de destinație Snow este construit pe framework Bootstrap. Șablonul este foarte elegant și cool! Un fundal fix și un Jumbotron imens este lucrul care arată conținutul principal al site-ului. Care este cel mai important lucru de pe pagina de destinație? Așa e, un îndemn la acțiune. Desigur, șablonul este complet adaptat pentru dispozitive mobile... Îl poți folosi chiar și ca bază pentru propriile șabloane.
2. Sima - șablon de site comercial șic
Acest șablon html5 css3 este construit și pe framework Bootstrap. Cu acest șablon, puteți crea un site web unic cu un portofoliu, echipa dvs., prețuri, recenzii și orice altceva aveți nevoie. De exemplu, acest șablon este perfect pentru un site web de servicii de curățenie. Animațiile din acest șablon sunt fluide și atrăgătoare, cu fonturi curate și lizibile. Doar șablonul perfect!
3. Albul este un șablon grozav de o pagină!
O caracteristică distinctivă a șablonului de site web White este două opțiuni de fundal în partea de sus. Puteți alege fie un glisor cu imagini, fie un fundal video. Șablon de foarte înaltă calitate și eficient pentru site!
4. Platz - Șablon gratuit de site web HTML5 bazat pe grilă
Un șablon de site web HTML5 modern, atrăgător din punct de vedere vizual, bazat pe grilă (citiți mai multe despre grilă). Design frumos și receptiv pentru șablon de blog sau site web.
5. Mart eCommerce - Model frumos pentru site-ul web de comerț electronic HTML5 și CSS3
Un design de șablon de site web proaspăt și elegant este cel mai bun pentru toate tipurile de site-uri web de modă care vând pantofi, îmbrăcăminte, ceasuri, accesorii, îmbrăcăminte sport și multe altele. vine cu Fișier PSD pe care le puteți ajusta în funcție de nevoile dvs.
6. Nava - Șablon HTML5 și CSS3 eficient pentru site-uri web creative
Nava este un șablon de site web HTML5 modern, care este folosit în principal pentru profesioniștii creativi care doresc să-și arate munca în toată gloria. O mulțime de variații ale setărilor șablonului vă permit să vă faceți site-ul unic. Ușoare, frumoase și șablon receptiv pentru site.
7. Box Portfolio - un șablon unic de site creativ în HTML5 și CSS3
Șablonul de site web Box Portfolio are un design minimalist curat și modern. Perfect pentru profesioniștii care doresc să-și prezinte eficient munca online. După cum sugerează și numele, șablonul site-ului este perfect adaptat portofoliului.
8. Mountain King - șablon de site web HTML5 și CSS3 popular și funcțional
Tema de munte în designul site-ului web a fost foarte populară în ultima vreme. Șablonul de site web Mountain King nu face excepție. Include 336 de pictograme vectoriale de la Typicons. Plus animații CSS3 grozave. Șablonul este perfect pentru site-uri web de călătorie și portofoliu.
9. Beauty Spa - Șablon cool HTML5 și CSS3 pentru site-ul spa
Beauty Spa este un șablon de site web receptiv, plin cu multe funcții perfecte pentru spa, centre de wellness sau fitness, site-uri de yoga sau chiar site-uri de coafură. Lizibilitate excelentă a fonturilor și minimalism discret.
10. Bent - pagină de destinație elegantă și eficientă pentru site-uri în HTML5 și CSS3
Bent este grozav șablon gratuit site în html5 și css3. Design receptiv, animații CSS3, defilare paralaxă, navigare personalizabilă și alte bunătăți. Acesta este un șablon de design curat pentru site-urile care doresc să folosească un design echilibrat pentru a se asigura că vizitatorii se bucură de aspectul site-ului, în timp ce văd în continuare conținutul principal în mod clar.
11. Triunghiul este un șablon multifuncțional responsiv gratuit în HTML5 și CSS3
Triunghiul este un șablon creativ exclusiv de site web HTML5 și CSS3, special pentru cei care doresc să-și pună în funcțiune designul cool, fără a înrăutăți situația. Șablonul are peste 40 de pagini pre-proiectate care vă permit să vă personalizați site-ul după cum doriți.
12. Viitorul imperfect - un șablon de site genial pentru oameni creativi!
Experimentați un adevărat sentiment de distracție cu acest șablon de site web perfect pentru scriitori, autori, copywriteri și alți lucrători cu pix și hârtie. Șablonul poate fi folosit și pentru blog personal, blog de călătorie, despre creativitate etc. Designul creativ și aspectul receptiv al șablonului vor atrage mulți.
13. Bodo este un șablon grozav pentru un site web personal
Bodo - frumos șablon site în HTML5 și CSS3, ceea ce este ideal pentru un site personal. Mai ales pentru organizarea portofoliului. Tipografie curată și clară, glisor carusel, ferestre pop-up ferestre pop-up pentru afișarea lucrărilor și multe altele.
14. Lens - șablonul perfect de site HTML5 pentru fotografi
Fotografii caută mereu șablonul perfect pentru site-ul lor web pentru a-și arăta munca în toată gloria, spectaculos și cel mai important - mare! Un șablon de site rar îndeplinește aceste cerințe. Lens este un astfel de șablon de site de fotografie.
15. Spectral - șablon unic de site web realizat manual în HTML5 și CSS3
Daca esti in cautare șabloane gratuite de site-uri auto atunci Spectral va fi solutie ideala... Aici absolut design unicșablon de site web cu o pagină făcut singur... Designul poate fi schimbat la discreția dvs. Acest șablon poate fi folosit pentru a crea un site web uimitor pe absolut orice subiect, fie că este un blog de călătorie impresionant sau o galerie foto, un site web auto sau un furnizor de găzduire.
16.Oxygen - Șablon de site web HTML5 și CSS3 cu o pagină
Oxigenul este convenabil și șablon unic pentru un site de afaceri. Design plat modern, aspect receptiv. De exemplu, acest șablon este perfect pentru un site web despre aplicații mobile sau tehnologie mobilă.
17. Mobirise Bootstrap - Cel mai bun șablon gratuit de site web HTML5 și CSS3
Dacă sunteți în căutarea unui șablon de site gratuit, atunci Mobirise Bootstrap este locul perfect pentru a începe. Acesta este un șablon multifuncțional cu o mulțime de suplimente incluse. Trei machete prefabricate pagina principala iar blogul te va ajuta cu asta. Mobirise Bootstrap este, de asemenea, 100% optimizat SEO și răspunde la orice dimensiune de ecran.
18. La Casa - șablon HTML5 frumos și gratuit pentru un site web imobiliar
Șablonul Brandy este perfect pentru organizarea unui site imobiliar comercial. Designul receptiv și foarte frumos va atrage nu numai proprietarul site-ului, ci și vizitatorilor.
19. Drifolio - șablon stilat de site web pentru portofoliu HTML5
Șablon de site web de portofoliu HTML5 și CSS3 elegant și animat. Design curat, tipografie excelentă, pictograme frumoase și multe altele.
20. Pluton - șablon luminos și elegant pentru site-ul web cu o singură pagină
Pluton este un șablon de site web Bootstrap luminos și eficient. Un șablon de site web modern, cu aspectul său unic într-o singură pagină și design responsive, care este grozav pentru studiouri, fotografi și designeri creativi.
21. SquadFree - Șablon de site web profesional HTML5 pe o pagină
Șablonul SquadFree este perfect pentru crearea unui site web comercial cu o singură pagină. Șablonul pare nu numai profesional, ci și adaptat pentru toate tipurile de ecrane. Șablonul este construit pe baza Bootstrap.
22. Sublime - un șablon de site web fascinant HTML5 și CSS3
Sublime este un șablon de site web HTML5 și CSS3 curat și uimitor de frumos, perfect pentru un startup, o agenție de creație sau un site de portofoliu. Design responsive și două opțiuni de pagină din care să alegeți.
23. Cherestea - șablon web neobișnuit și frumos HTML5 și CSS3
Cheresteaua este o temă proaspătă, elegantă și neobișnuită de șablon de site web de o pagină. Diagonala - caracteristica principală designul acestui șablon. Șablonul este perfect pentru un site web sau portofoliu de afaceri. Există o galerie încorporată, o hartă și Informatii de contact pe care te poți adapta cu ușurință pentru tine.
24. E-Shopper - Cel mai bun șablon de site de comerț electronic
E-Shopper este o opțiune excelentă pentru un șablon de site de comerț electronic. Construit pe bazat pe bootstrap cu un set uimitor de caracteristici pentru un magazin online complet și eficient.
25. Magnetic - Șablon gratuit de site web cu fotografii HTML5 și CSS3
Un șablon HTML5 și CSS3 absolut uimitor pentru a crea un site foto sau un portofoliu pentru un designer, ilustrator sau artist. Acest șablon ridică ștacheta pentru șabloane profesionale prin nou nivel! Design receptiv, suport excelent pentru toate tipurile de dispozitive de afișare, navigare ușoară și convenabilă și multe altele.
26. Mabur Portfolio - frumos șablon de site minimalist în HTML5 și CSS3
Designul plat al acestui șablon de site minimalist este perfect pentru construirea portofoliului. În șablon, toate detaliile sunt verificate perfect!
27. Modern Bootstrap HTML5 - Șablon de site web gratuit pe o pagină
Acest cadru Bootstrap gratuit de o pagină este perfect pentru site-urile web corporative, atât mici, cât și mari. Design plat, aspect receptiv, toate elementele de design de înaltă calitate. Șablonul este disponibil în 4 culori diferite.
28. Infuzie - șablon elegant de site web de o pagină în HTML5 și CSS3
Infusion este un exemplu excelent de șablon de site web HTML5 și CSS3 conceput special pentru construirea unui portofoliu de afaceri. Funcționalitatea bogată a acestui șablon vă permite să lucrați eficient cu clienții și să atrageți alții noi.
29. Yebo - șablon de site web corporativ în HTML5 și CSS3
Acest șablon de site web de înaltă calitate, în stil plat, este perfect pentru orice site web corporativ. Design receptiv, multe opțiuni de personalizare și editare.
30. Twenty - Spectacular HTML5 & CSS3 Parallax Website Template
Acest șablon de site web paralax unic și foarte frumos nu va lăsa pe nimeni indiferent. Șablon de o pagină construit în pur HTML5 și CSS3 cu aspect adaptiv, fundaluri impresionante, suport social media etc.
31. Urbanic - Excelent șablon de site web Bootstrap HTML5 și CSS3
Urbanic este un șablon de site web HTML5 și CSS3 proaspăt și cool, creat cu motorul Bootstrap. Grozav să începi să-ți construiești site-ul imediat fără probleme speciale... Șablonul este perfect adaptat oricărei dimensiuni de ecran.
32. Design Showcase - Șablon de site web pentru portofoliu HTML5
Un șablon de site web HTML5 armonios vizual și eficient pentru a vă organiza portofoliul. Șablonul este perfect adaptat pentru dispozitivele mobile, ceea ce este foarte dificil pentru site-urile de acest format.
33. Mamba One - șablon de site web simplu și elegant în HTML5 și CSS3
Mamba One este un exemplu de șablon de site web simplu, dar elegant, pe o pagină. Compatibil cu toate browserele moderne și va fi afișat în mod adecvat peste tot.
34. KreativePixel - Șablon de site web gratuit pentru fotografi
Un alt șablon grozav de site pentru fotografi. Designul receptiv și sortarea foarte convenabilă a fotografiilor în portofolii și galerii vor atrage mulți iubitori de fotografie. Șablonul folosește și un efect de paralaxă, care impresionează și spectatorii atunci când vizionează fotografii.
35. Aplicație Retina Ready Responsive - Șablon gratuit de pagină de destinație HTML5 și CSS3
După cum sugerează și numele, acest șablon minunat de site nu este doar perfect adaptat pentru paginile de destinație, dar răspunde și noilor tendințe mobile, în special în ceea ce privește claritatea afișajului pe dispozitivele cu ecrane Retina.
36. Brushed - Șablon de site web responsive HTML5 și CSS3 alimentat de Bootstrap
Brushed este un șablon de site web receptiv, gratuit HTML5 și CSS3, alimentat de Bootstrap. De asemenea, optimizat pentru Afișează retina(iPhone, iPad, IPod Touchși MacBook Pro Retina).
37.Big Picture HTML5 & CSS3 Website Template
Bun venit la Big Picture! Acest șablon receptiv Site-ul HTML5 este perfect pentru toți oamenii creativi care au ceva de afișat și de afișat mare și eficient pe site-ul lor. În plus, șablonul are o animație excelentă.
38. Tesselatte - Șablon gratuit de răspuns HTML5 și CSS3
Un șablon simplu de o pagină care ia în considerare totul instrumentele necesare pentru stabilire de succes site-ul. Ideal pentru blogul personal al unui scriitor, copywriter și doar un iubitor al cuvântului tipărit.
39. Overflow - un șablon unic de site web în HTML5 și CSS3
Acest șablon unic de site web în pur HTML5 și CSS3 este perfect pentru orice persoană creativă. Este complet receptiv și complet gratuit.
40. Runkeeper - șablon de site web receptiv și foarte frumos
Runkeeper este un șablon de site web gratuit, receptiv și foarte frumos. Poate fi folosit pentru orice site. Stil strălucitor și fonturi clare, design adaptivși detalii impresionante ale șablonului. Totul funcționează pentru tine!
41. Stil de grilă responsive Pinball - Șablon de site web bazat pe grilă
Acest șablon de site web minunat, profesional, bazat pe grilă, este perfect pentru un site web corporativ. Designul plat modern și structura receptivă a șablonului sunt afișate perfect atât pe monitoare mari, cât și pe ecranele mobile.
42. Prolog - șablon de site web cu o singură pagină HTML5 și CSS3
Acest șablon de site web HTML5 și CSS3 curat, simplu și clar este perfect pentru a vă construi pagina de destinație. Designul minimalist nu distrage atenția de la principalul lucru. O bară laterală de navigare cu derulare atrăgătoare și linii clare ale paginii sunt combinația perfectă!
43. Helios - șablon de site web modern în pur HTML5 și CSS3
Un alt șablon de site web în stilul minimalismului și al formelor curate. Conceput special pentru a profita de ecranele mari de afișare, dar și perfect adaptat la micile ecrane ale dispozitivelor mobile.
44. Telephasic - Șablon de site web HTML5 gratuit și receptiv
Acest șablon de site web modern, receptiv și complet gratuit are unul mare avantaj- este simplu si laconic, dar tocmai asta le lipseste multora.
45. Strongly Typed - șablon de site web semi-retro foarte frumos
Nou șablon de site web cu un stil minimalist semi-retro. Doar că retro nu mai este la modă, dar un mic indiciu este de mare ajutor. Acest șablon de site este pe deplin responsive, construit cu HTML5 și CSS3 pur și include toate elementele esențiale ale paginii de care aveți nevoie. Strongly Typed este perfect pentru site-uri web creative. De exemplu, pentru un site web pentru decorarea casei.
46. În dungi - șablon de site web HTML5 și CSS3 curat, frumos și funcțional
Proaspăt și curat, frumos și funcțional, șablon nou site în HTML5 și CSS3. Are în arsenalul său toate elementele de pagină necesare, inclusiv citate proiectate, tabele și liste, precum și o bară laterală adaptată (în dreapta sau în stânga - după cum doriți).
47. Paralelism - șablon de site web neobișnuit și elegant în HTML5 și CSS3
Paralelism este un șablon de site web elegant pentru organizarea de portofolii sau fotografii. Particularitatea sa este că derularea aici nu este verticală, ca de obicei, ci orizontală. Acest lucru oferă site-ului un șic special și memorabil.
48. Miniport - Șablon de site web HTML5 complet receptiv în stil minimalist
Excelent șablon de site web HTML5 minimalist. Perfect atât pentru un site web/blog personal, cât și pentru un site web corporativ mic de o pagină sau ca site pentru cărți de vizită.
49. Verti - șablon web HTML5 spațios și gratuit responsive
Designul curat și spațios al acestui șablon de site este perfect pentru site-uri web corporative mici sau proiecte comerciale. Reactiv și ușor de utilizat atât pentru autor, cât și pentru utilizatori.
50. ZeroFour - Șablon de site web HTML5 și CSS3 impresionant și elegant
Și ultimul pe listă, dar nu ultimul în ceea ce privește calitatea și impactul vizual, șablon de site - ZeroFour. Design elegant, un meniu foarte frumos, forme și butoane perfect ajustate, pictograme frumoase și multe altele. Și toate acestea sunt absolut gratuite!
Sper că ați găsit ceva potrivit pentru dvs. printre aceste șabloane grozave de site-uri HTML5 și CSS3. Noroc!
Marcați pentru găsirea rapidă mai târziu.
PS: Dacă nu poți alege, citește articolul „Nu știu ce vreau”. Va fi de ajutor.
27.02.16 4.8KÎn acest articol, vreau să acopăr patru moduri diferite de a crea machete cu mai multe coloane. Fiecare metodă are propriile sale avantaje și dezavantaje. Pentru a demonstra cum funcționează și arată aceste aspecte, am creat un site simplu care folosește tabele HTML, proprietate CSS float, framework CSS și flexbox.
Prima zi a unei noi vieți
În acest articol, folosim patru metode diferite de aspect al site-ului web:
- Mese. Nici măcar nu trebuie să-l folosești dosar separat stiluri. Și mai important, nu se sparg.
- Pluti. Vorbim despre o proprietate CSS. Acesta este o modalitate destul de comună de a crea un aspect de pagină web. Și în acest caz, va trebui să folosim o foaie de stil separată. Fișierul HTML este folosit doar pentru a defini conținutul unei pagini web. Dacă doriți să aliniați conținutul, trebuie să utilizați fișier CSS.
- cadre CSS. Ele funcționează la fel ca cadre JavaScript... Includeți fișierul sursă în antet (de exemplu, ) și este gata de plecare! Nu trebuie să setați singur valorile proprietăților. Pentru aceasta, sunt folosite clasele pe care dezvoltatorii framework-ului le-au pregătit pentru tine.
- Flexbox. Flexbox este un nume scurt Modulul de aranjare a casetei flexibile CSS... Această tehnologie este mai nouă în comparație cu proprietatea plutitoare. Principiul de bază al flexbox este de a oferi containerului capacitatea de a modifica lățimea, înălțimea și ordinea elementelor pe care le conține. Dacă doriți cel mai bun posibil, completați totul spatiu liber, ar trebui folosit pentru layout-uri div flexbox. De exemplu, pentru a acoperi toate tipurile de dispozitive și dimensiuni de ecran. Un container plutitor va extinde elementele conținute pentru a umple întregul ecran.
Acum este momentul să le încerci pe fiecare dintre ele.
Metode de creație
Acesta este designul site-ului meu:
Mese
Pentru a crea antetul site-ului, am folosit poziția: proprietate relativă. Să încercăm să o facem de la zero folosind un aspect de tabel.
Iată HTML-ul meu:
| Cinematron | |||||
| ACASĂ | PREMIERE | BOX OFFICE | FOTOGRAFII | ||
Și asta am primit:
După cum puteți vedea, aceasta nu este aceeași pălărie. Pare cunoscută, dar poziția ei s-a schimbat ușor. Si de aceea. Știți că mesele sunt grozave pentru poziționarea simetrică. Dar pentru alte scopuri, ele nu sunt atât de potrivite. De asemenea, rețineți cât de greoi este codul. Dar tabelele au o caracteristică utilă. Iată un truc pe care îl putem face:
tabel, td (border-collapse: collapse; chenar: 1px roșu continuu;)
Și veți vedea că aspectul arată astfel:
Astfel, puteți determina cu ușurință care este unde, dacă vă confuzi.
Acum vesti proaste... Aruncă o altă privire la codul HTML. Acesta este un tabel simplu, dar imaginați-vă cum ar arăta cu zeci de celule. Asta e ceea ce sursă Eu am:
Cinematron
Toate lucrurile pe care trebuie să le știi despre filme
Și fișierul CSS:
#header (înălțime: 230px; imagine de fundal: url (../ imagini / header1.jpg); background-repeat: fără repetare; font-family: „Shift”, sans-serif;) #header h2 (font- dimensiune: 4em; poziție: relativ; sus: 30px; stânga: 550px; afișare: inline;) #header p (dimensiunea fontului: 1.3em; greutatea fontului: bold; poziție: relativ; sus: 50px; stânga: 60px; afișare: inline) #meniu (poziție: relativ; sus: 100px; stânga: 340px; afișare: inline-block;) #meniu li (greutate font: bold; afișare: inline; text-transform: majuscule; margine-dreapta: 14px;) #menu introducere (dimensiune font: 0,7em; text-transform: minuscule; text-align: dreapta; poziție: relativă; sus: -4px;)
În acest caz, trebuie să utilizați un aspect bloc al site-ului cu folosind CSS... Aplicând ceva de genul acesta:
div (poziție: relativă; sus: 100px; stânga: 100px;)
Indicați să vă mutați
Pluti
Proprietatea float este utilizată pe scară largă în aspectul bloc al site-ului. Vom folosi această proprietate pentru a afișa zona principală de conținut. Un mic exemplu vă va ajuta să înțelegeți mai bine cum funcționează:
Are trei elemente colorate diferite
Și aici este fișierul CSS:
#verde (lățime: 200px; înălțime: 200px; chenar: 1px verde continuu; float: stânga; margine: 5px;) #roșu (lățime: 100px; înălțime: 200px; chenar: 1px roșu continuu; margine: 5px; flotant: stânga ;) #albastru (lățime: 310px; înălțime: 100px; chenar: 1px albastru solid; margine: 5px; clar: ambele;)
Și iată ce avem:
Când așezați în straturi, specificați prin proprietatea float pe care doriți să îl faceți elementul dvs
Următorul plutitor se va mișca până când îl va întâlni pe primul și așa mai departe. Elementul de lângă elementul plutitor va curge în jurul lui ca apa! Dar dacă nu vrei să-ți lansezi toate obiectele „pe apă”, poți folosi proprietate clară... Determină ce laturi ale unui element nu trebuie să curgă în jurul elementelor plutitoare.
Iată cum arată o parte a aspectului meu pentru conținutul principal:
Antetul primului articol
Corpul primului articolCitiți mai multe
Al doilea titlu al articolului
Corpul articolului al doilea Citește mai mult
Primul antet al articolului de știri
Primul articol de știri
Al doilea antet al articolului de știri
Al doilea articol de știri
Acum să-l facem să plutească:
# main-content (lățime: 780px; float: stânga;) #știri (margin-left: 20px; float: stânga; lățime: 180px;)
Noi avem bloc mare pentru articole și un bloc mai mic pentru știri. Am folosit proprietatea float: left și pentru imagini. Observați cum se înfășoară eticheta în jurul lor. Acest aspect arată ca revista ta preferată.
cadre CSS
Dacă ești puțin leneș
Dacă nu ai timp să te încurci cu codul când Aspect CSS, puteți utiliza unul dintre cadrele CSS. În exemplul nostru, folosim Bootstrap. Pentru a face acest lucru, trebuie să îl descărcați și să îl includeți într-un fișier HTML.
Bootstrap conține o grilă care constă din 12 coloane de dimensiuni egale. Elementele HTML sunt ordonate pentru a cuprinde un număr diferit de coloane. În acest fel, sunt create machete personalizate. Fiecare parte de conținut este aliniată la această grilă prin numărul specificat de coloane pentru a o întinde.
Iată un exemplu:
În acest exemplu, am creat un șir. După aceea, am plasat două coloane de dimensiuni egale în el. Fiecare dintre ele acoperă șase dintre cele douăsprezece coloane disponibile.
Cod HTML:
In curand:
Și asta am primit:
Arata bine. Și atunci când codificați un site web din PSD, nici măcar nu trebuie să editați fișierul CSS. Dar nu vezi ce se întâmplă înăuntru.
Flexbox
Clasicii de mâine
Vom folosi flexbox pentru a crea secțiunea „Box Office” a site-ului. Iată codul HTML:
- Cenușăreasa: 67,9 milioane USD
- Alergați toată noaptea: 11,0 milioane USD
- Kingsman: Serviciul Secret: 6,2 milioane USD
- Focus: 5,7 milioane USD
- Chappie: 5,7 milioane de dolari
- McFarland SUA: 3,6 milioane USD
- DUFF: 2,9 milioane USD
- Lunetist american: 2,8 milioane USD
Iată CSS-ul pentru containerul „boxoffice”:
#boxoffice (lățime: 780px; înălțime: 500px; imagine de fundal: url (../ images / box_office_cropped.jpg); background-repeat: coperta; chenar-radius: 5px; umplutură: 20px;)
Acum este timpul să creați un container flexibil. Pentru a face acest lucru, setați elementul să afișeze: flex. Conform regulilor de aspect, toate elementele flexbox sunt situate de-a lungul axelor principale și transversale:
Pentru flexbox, există două tipuri de proprietăți. Primul este folosit pentru a controla containerul flexibil, al doilea este folosit pentru a umple articole flexibile. Să luăm în considerare primul tip în detaliu.
Implicit, axa principală este orizontală, astfel încât elementele se vor întinde pe rând. Putem folosi proprietatea flex-direction pentru a schimba axa principală. Poate lua următoarele valori: rând, rând invers, coloană și coloană inversă. Vom folosi coloana valoare. Să adăugăm și o proprietate de înălțime. Pentru ce este aceasta, veți înțelege puțin mai târziu:
container flex (înălțime: 300 px; afișare: flex; direcție flex: coloană;)
Iată cum arată micul nostru box office:
Am folosit proprietatea înălțime deoarece nu dorim ca containerul flexbox să se suprapună cu imaginea săgeată din partea de jos a fundalului.
Flexbox vă oferă, de asemenea, posibilitatea de a modifica conținutul fără a modifica fișierul HTML. De exemplu, dacă doriți să inversați aspectul elementelor, puteți schimba direcția flexibilă în coloane inversă. Acest lucru va inversa direcția flexbox-ului. Dar va trebui, de asemenea, să modificați ordinea articolelor din interiorul containerului.
Pentru aceasta folosim proprietatea justify-content. Valorile disponibile pentru acesta sunt flex-start, flex-end, center, space-between și space-around. Trebuie setat la justificare-conținut, ceea ce este echivalent cu flex-end.
Iată codul nostru:
Flex-container (înălțime: 300px; afișare: flex; flex-direction: coloană-revers; justificare-conținut: flex-end;)
Și iată cum au fost reflectate aceste schimbări:
De asemenea, puteți muta elemente de-a lungul axei transversale. Proprietatea align-items este folosită pentru aceasta. Îl puteți seta la următoarele valori: flex-start, flex-end, center, baseline sau stretch.
Pentru a-l folosi, adăugați o proprietate la selectorul dvs. flexbox:
Flex-container (alinierea articolelor: flex-end;)
Toate elementele se vor muta la marginea dreaptă:
O altă proprietate utilă este flex-wrap. Imaginați-vă că un box office crește rapid. Ce se întâmplă dacă devine mai mare decât recipientul? Nimic în neregulă cu utilizarea proprietății flex-wrap.
Încercați să adăugați următorul cod:
Flex-container (înălțime: 300px; afișare: flex; flex-direction: coloană; flex-wrap: wrap;)
Și iată care va fi rezultatul:
După cum puteți vedea, articolele sunt acum stivuite în mai multe coloane. Valoarea implicită pentru această proprietate este nowrap. Când sunt aplicate, elementele vor fi aranjate într-o singură coloană ( sau șir - depinde de valoarea direcției flexibile). Valoarea wrap-reverse poate fi utilizată. Apoi elementele vor fi aranjate în ordine inversă.
Există multe proprietăți utile... Cu ajutorul lor, puteți modifica parametrii fiecărui element individual al containerului. De exemplu, proprietatea order vă permite să schimbați ordinea în care sunt plasate elementele fără a fi nevoie să faceți modificări codului HTML.
Ce modalitate de a alege?
Mese. Tabelele nu sunt utilizate într-un aspect de pagină valid. Ei fac codul dezordonat. Tabelele nu sunt atât de ușor de utilizat pe cât ar părea. Dacă încă nu v-ați hotărât singur dacă folosiți tabele pentru aspectul paginii dvs., atunci aruncați o privire pe acest site.
Dar pot fi utile atunci când vine vorba de aspectul e-mailurilor. Nu există atât de multe browsere pe care oamenii le folosesc în zilele noastre, dar agenți poștali pur şi simplu o cantitate mare... Staționar, online și aplicatii mobile utilizați diferite motoare de randare. Tabelele HTML arată la fel în toate. Acesta este motivul pentru care este o opțiune excelentă pentru compunerea e-mailurilor.
Pluti. Proprietatea float este cea mai bună alegere dacă cerințele dumneavoastră nu sunt prea mari. Aceasta este o modalitate simplă de a vă face site-ul mai atractiv. Folosirea lui pentru imagini este, după părerea mea, un semn de bună formă. Nu uitați cum funcționează proprietățile float și clear. Acest lucru este suficient pentru a începe.
În ceea ce privește dezavantajele sale, trebuie să recunoaștem că flotoarele sunt ancorate de fluxul documentului, iar acest lucru poate reduce semnificativ flexibilitatea acestuia.
cadre CSS. Dacă trebuie să creați rapid un aspect, utilizați cadre. Astăzi sunt mulți dintre ei. Printre acestea, alege-l pe cel care ti se potriveste cel mai bine.
Flexbox. Va dura ceva timp pentru a afla cum funcționează. Cred că ați înțeles deja cât de convenabile sunt flexbox-urile pentru gestionarea elementelor individuale.
ProstAranjament în pagină este procesul de dezvoltare a structurii unui document html, al cărui rezultat este o pagină web. Structura paginii web este determinată de etichetele html corespunzătoare. Etichetele - casete dreptunghiulare pentru conținut - nu apar în fereastra browserului. Ei spun browserului despre tipul de conținut, iar browserul, pe baza acestor informații, își afișează conținutul pe ecran - fișiere text sau media.
Cum se creează structura paginii folosind blocuri (aspect bloc)
1. Cum să împărțiți un aspect de pagină în secțiuni
Pentru a crea un aspect de pagină, trebuie să evidențiați secțiunile (secțiunile) principale ale documentului. Puteți citi mai multe despre elementele secționale în articol.
Pagina web standard conține următoarele secțiuni:
Orez. 1. Secțiunile principale ale paginiiNu vom folosi elementul
Elementele