Cadru bootstrap: aspect adaptiv rapid
Curs video pas cu pas despre elementele de bază ale aspectului adaptiv în cadrul Bootstrap.
Învățați să scrieți simplu, rapid și eficient folosind un instrument puternic și practic.
Aspect pentru a comanda și a fi plătit.
Curs gratuit „Site pe WordPress”
Vrei să stăpânești CMS-ul WordPress?
Obțineți lecții despre design și aspectul site-ului web pe WordPress.
Învață să lucrezi cu teme și să tăiați machete.
Curs video gratuit despre desenarea unui site web, aspect și instalare pe CMS WordPress!
* Treceți mouse-ul peste pentru a întrerupe derularea.
Inapoi inainte
Stăpânirea CSS: aspectul paginii
Unul dintre principalele avantaje ale CSS este capacitatea de a controla aspectul paginii fără a utiliza etichete. Design HTML . Cu toate acestea, crearea de șabloane CSS are o reputație nedreaptă de a fi dificilă, mai ales în rândul dezvoltatorilor care abia acum încep. această tehnologie . Acest lucru se datorează parțial faptului că nu toate browserele interpretează CSS în același mod, dar și mai mult datorită faptului că acum există pur și simplu o cantitate mare diferite tehnici de creare a machetelor folosind foi de stil.
Se pare că fiecare dezvoltator web are propriile tehnici de aspect CSS, iar webmasterii începători folosesc adesea o tehnică fără să înțeleagă măcar cum funcționează. Această cutie neagră se apropie de folosind CSS Desigur, ajută la obținerea rapidă a rezultatelor, dar în cele din urmă împiedică dezvoltarea înțelegerii limbajului de către dezvoltator.
Cu toate acestea, toate aceste tehnici diferite se bazează pe trei concepte de bază: poziționare, înfășurare și manipulare a căptușelii. Tehnici diverse la o examinare mai atentă, acestea nu sunt atât de diferite și, dacă stăpânești conceptele și conceptele de bază, îți va fi relativ ușor să creezi propriul șablon de pagină CSS.
Centrarea designului
Rândurile lungi de text sunt foarte incomode sau chiar greu de citit. Pe măsură ce monitoarele și rezoluțiile lor continuă să crească, problema lizibilității ecranului devine mai mult o problemă. O modalitate de a rezolva această problemă este centrarea conținutului paginii. În loc să extindă conținutul pe toată lățimea ecranului, desenele centrate ocupă doar o parte a ecranului, oferind liniilor o lungime ușor de citit.
Paginile centrate pe conținut sunt comune acum, așa că învățați cum să creați un design centrat folosind CSS este unul dintre primele lucruri pe care noii dezvoltatori web doresc să le învețe. Există două moduri principale de a centra un design: unul folosește automat marginile , în celălalt - poziționare și umplutură negativă.
Centrare cu umplutură automată
Să presupunem că vă confruntați cu o sarcină tipică de centrare orizontală a unui div cu un id învelitoare („înveliș”).
Pentru a face acest lucru în practică, trebuie doar să setați lățimea div-ului învelitoare și setați marginile orizontale la auto .
În acest exemplu, lățimea este setată în pixeli. Dar, desigur, puteți să o specificați la fel de ușor ca procent din lățimea corpului documentului sau să utilizați dimensiunea în „em” în raport cu dimensiunea textului.
Acest lucru funcționează în toate browserele moderne, dar nu și în IE 6. Din fericire, IE interpretează incorect proprietatea text-align: centru , centru aliniind totul, nu doar textul. Puteți folosi acest lucru în avantajul dvs. centrând totul în etichetă corp , inclusiv div învelitoare , apoi reatribuind alinierea către stânga pentru conținut de bloc învelitoare .
Corp ( text-align: center; ) #wrapper ( lățime: 720px; margine: 0 automat; text-align: stânga; )
Folosind proprietatea aliniere text Intr-un mod similar este în esență un hack, dar este complet inofensiv și nu vă va afecta negativ codul. Acum blocul nostru învelitoare centrat în IE 6, la fel ca în alte browsere care sunt mai conforme cu specificația.
Centrarea unui design folosind poziționare și umplutură negativă
Metoda de umplutură automată este cea mai populară abordare, dar necesită un hack. De asemenea, necesită stilul a două elemente în loc de unul singur. Din acest motiv, mulți oameni preferă să folosească poziționarea și marjele negative.
Începem, ca în exemplul anterior, prin a seta lățimea învelitoare . Apoi setăm proprietatea poziţie Pentru învelitoare în sens relativ și proprietate stânga în sens 50%
. Acest lucru ne permite să poziționăm marginea din stânga a blocului învelitoare în centrul paginii.
#wrapper ( lățime: 720px; poziție: relativ; stânga: 50%; )
Totuși, avem nevoie de ceva puțin diferit - vrem să vedem centrul blocului în centrul paginii învelitoare . Puteți realiza acest lucru aplicând umplutură negativă în partea stângă a blocului. învelitoare egal cu jumătate din lăţimea acestui bloc. Aceasta va muta blocul învelitoare jumătate din lățime spre stânga, deplasându-l în centrul ecranului:
Alegerea metodei de centrare depinde în întregime de gustul dumneavoastră. Cu toate acestea, este întotdeauna util să cunoașteți mai multe metode și tehnici, deoarece nu puteți ghici ce vă poate fi util.
Modele bazate pe wrap
Există mai multe moduri de a crea șabloane folosind CSS , inclusiv poziționare absolută și umplutură negativă. Cred că cea mai ușoară metodă de utilizat se bazează pe înfășurarea unor elemente în jurul altora. După cum sugerează și numele, în acest tip de șablon setați pur și simplu lățimea elementelor poziționate și apoi le dați o înfășurare la stânga sau la dreapta.
Deoarece aceste elemente flotante nu mai ocupă niciun spațiu în fluxul documentului, ele nu au niciun efect asupra elementelor bloc din jurul lor. Pentru a evita acest comportament, va trebui să desfaceți în diferite puncte de ancorare din șablon. În loc să aplicați secvențial împachetarea și să o anulați, este mai convenabil să adoptați o abordare puțin diferită: aplicați împachetarea la aproape orice și apoi anulați-l o dată sau de două ori în punctele „strategice” din document, cum ar fi subsolul.
Șablon cu două coloane folosind împachetare
Pentru a crea un șablon simplu cu două coloane folosind împachetarea, începeți cu structură de bază (X)HTML. În exemplul nostru, cadrul (X)HTML constă din zone: branding, conținut, zonă de navigare și subsol. Toate această structură închis într-un „înveliș” - învelitoare , care va fi aliniat orizontal folosind una dintre metodele descrise mai sus.
Navigare acasă va fi în stânga, iar conținutul va fi în partea dreaptă. Totuși, în structura paginii, am plasat zona de conținut deasupra zonei de navigare. Motivul principal pentru aceasta este că conținutul paginii este cel mai important și trebuie plasat cât mai sus posibil în document, aproape de început.
De obicei, atunci când oamenii creează șabloane și folosesc împachetarea, ei dau proprietatea pluti sens stânga pentru ambele coloane și apoi creați o „marjă” între coloane folosind proprietățile de marjă sau de umplutură. Când utilizați această abordare, difuzoarele sunt apăsate strâns în spațiul disponibil pentru ele - astfel încât să nu mai existe loc pentru respirație. Acest lucru de obicei nu cauzează probleme, dar unele browsere sparg acest design „strâns”, cu coloanele stivuite una sub alta.
Acest lucru se poate întâmpla în IE, deoarece IE se bazează pe „dimensiunea” conținutului, mai degrabă decât pe elementul care conține conținutul. În browserele bazate pe standarde, dacă conținutul nu se încadrează într-un bloc, pur și simplu iese în afara blocului. În IE, totuși, dacă conținutul nu se încadrează în elementul care îl conține, acesta „întinde” elementul, făcându-l mai mare ca dimensiune. Dacă se întâmplă așa ceva într-un design strâns, înghesuit, atunci elementele nu mai au loc să stea unul lângă celălalt, iar unul dintre ele pare să „cădă”, scufundându-se mai jos decât celălalt.
Pentru a evita acest scenariu, încercați să nu supraaglomerați blocul care conține designul dvs. de ambalare. În loc să utilizați margini orizontale, umplutură, puteți crea „margini virtuale” dând un singur bloc plutește la stânga , iar celuilalt - plutire: dreapta .
Acum, dacă unul dintre elemente crește ușor (în câțiva pixeli) în dimensiune, în loc să distrugă întregul design, deplasând unul dintre blocuri sub celălalt, blocul va „pluti” pe teritoriul „câmpului virtual”.
Codul CSS pentru atingerea acestui obiectiv se explică de la sine. Pur și simplu setăm lățimea dorită pentru fiecare dintre coloane și apoi specificăm pentru navigare plutește la stânga , iar pentru conținut - plutire: dreapta .
#conținut ( lățime: 520px; float: dreapta; ) #mainNav ( lățime: 180px; float: stânga; )
Apoi, pentru a poziționa corect subsolul sub navigare și conținut, trebuie să-l despachezi.
#footer ( clar: ambele; )
Versiunea de bază este gata. Să mai adăugăm câteva atingeri. Umplutură de sus și de jos pentru întregul bloc de navigare și umplutură la stânga și la dreapta pentru lista de elemente din meniul de navigare.
#mainNav ( padding-top: 20px; padding-bottom: 20px; ) #mainNav li ( padding-left: 20px; padding-right: 20px; )
Să indentăm și partea dreaptă a zonei de conținut:
#conținut h1, h2, p ( padding-dreapta: 20px; )
Gata, acum avem gata un aspect CSS simplu cu două coloane.
Șablon cu trei coloane utilizând împachetare
Cadrul HTML pentru construirea unui șablon cu trei coloane este foarte asemănător cu cel pe care l-am folosit cu unul cu două coloane, singura diferență fiind că are două coloane suplimentare. bloc div : unul pentru conținutul principal și încă unul pentru conținutul suplimentar.
Folosind la fel Reguli CSS , ca și în cazul unui șablon cu două coloane, putem da blocul de conținut principal plutește la stânga , iar blocul suplimentar - plutire: dreapta . Toate acestea se vor întâmpla în interiorul blocului de conținut principal deja poziționat corect. În acest fel, împărțim a doua coloană de conținut în două, creând un aspect cu trei coloane.
Ca și înainte, codul CSS este foarte simplu. Trebuie doar să specificați lățimea dorită pentru fiecare dintre blocuri și să oferiți fiecăruia propriul ambalaj.
#mainContent ( lățime: 320 px; float: stânga; ) #secondaryContent ( lățime: 180 px; float: dreapta; )
Puteți curăța puțin șablonul prin eliminarea căptușelii din bloc conţinut aplicând-o direct la conținutul blocului Conținut secundar :
#secondaryContent h1, h2, p ( padding-stânga: 20px; padding-right: 20px; )
Astfel, obținem acest aspect frumos cu trei coloane.
Andy Budd, Cameron Moll și Simon Collison: „CSS Mastery: Advanced Web Standards Solutions”
P.S. Doriți mai multe materiale pe aspectul aplicat? Consultați cursurile gratuite de mai jos. Aceasta este o serie de videoclipuri despre aspectul flexibil al site-ului web și un curs gratuit despre elementele de bază ale aspectului adaptiv. Ele vă vor ajuta să obțineți rapid abilitățile necesare:
Ți-a plăcut materialul și vrei să-mi mulțumești?
Aranjament în pagină este procesul de dezvoltare a structurii unui document HTML, al cărui rezultat este o pagină web. Structura unei pagini web este determinată de etichetele HTML corespunzătoare. Etichetele - blocuri de containere 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 - fișiere text sau media.
Cum se creează o structură de pagină folosind blocuri (aspect bloc)
1. Cum să împărțiți aspectul paginii în secțiuni
Pentru a crea un aspect de pagină, trebuie să selectați secțiunile (secțiunile) principale ale documentului. Puteți citi mai multe despre elementele secționale în articol.
O pagină web standard conține următoarele secțiuni:
Orez. 1. Secțiunile principale ale paginii
Nu vom folosi elementul , deoarece nu este acceptat de toate browserele.
Elemente , Și
- pe bază de bloc, astfel încât vor ocupa toată lățimea blocului - elementului lor container . O pagină cu acest aspect va arăta bine pe ecranele mici, dar pe dispozitivele cu Rezoluție înaltă Textul unor astfel de pagini va fi greu de citit. Prin urmare, trebuie să adăugați o etichetă de container pentru conținut - conținutul fiecărei secțiuni:
și setați pentru aceasta lățimea maximă, căptușeală internă, care va separa conținutul de marginile ecranului dispozitivelor cu rezoluție scăzută, precum și căptușeala externă, care vă permite să aliniați containerul în mijlocul blocului părinte:
Container ( lățime: 100%; lățime maximă: 1024px; /*lățimea maximă poate avea o valoare diferită*/ umplutură: 0 15px; margine: 0 automat; )
Astfel, am primit un cadru pentru pagina noastră (înălțimea secțiunilor este în acest caz, virtual, deoarece fără conținut secțiunile au înălțime zero).
2. Aspectul antetului site-ului și poziționarea elementelor acestuia
Să începem să marcam prima secțiune, așa-numitul antet al paginii web. Element conceput pentru a grupa informații introductive și ajutoare de navigare pe o pagină/site. Să-l adăugăm în interiorul etichetei logo-ul site-ului și link-uri de navigare:
Logo ( float: stânga; ) nav ( float: dreapta; ) nav ul ( margine: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /*o modalitate de a plasa elemente într-un linie */)
Există mai multe moduri de a plasa elemente de bloc într-un rând. Toate sunt date în lecție.
Observați că după ce am aplicat învelișul, antetul a dispărut. Acest lucru s-a întâmplat deoarece elementele plutitoare (cele care au setată proprietatea float) sunt eliminate din fluxul normal și containerul părinte nu le mai vede înălțimea, astfel încât elementul iar elementul din interiorul lui cu clasa.container s-a prăbușit. Pentru a remedia această situație, să folosim curățarea fluxului pentru un element cu clasa .container:
Container:după (conținut: „”; afișare: tabel; șterge: ambele; )
Vom adăuga și noi la el margini verticale , separând elementele din interiorul acestuia de marginile antetului. Ca rezultat, stilurile vor arăta astfel:
Container ( lățime: 100%; lățime maximă: 1024 px; umplutură: 15 px; marjă: 0 automat; )
Să luăm în considerare o situație în care o imagine servește drept logo. Poate fi adăugat direct în interiorul etichetei sau ca imagine de fundal. Imaginea va avea propria înălțime, care poate fi foarte diferită de înălțimea meniului de navigare, așa că ne vom confrunta cu o problemă aliniere verticală elemente de antet.
În exemplul nostru, înălțimea logo-ului este de 38 px, așa că pentru a alinia linkurile meniului la mijlocul antetului, trebuie să le setați la înălțimea corespunzătoare a liniei:
Nav a (decor text: niciunul; înălțimea liniei: 38px; ) Fig. 7. Alinierea linkurilor meniului antet
3. Creați o grilă pentru partea principală a paginii
Partea principală a paginii este cel mai adesea o grilă de blocuri de diferite lățimi. Poziționarea unor astfel de blocuri se face și folosind proprietatea float. Vom împacheta fiecare rând de blocuri cu un bloc suplimentar cu clasa .row:
Pentru un element cu clasa .row aplicăm și curățarea fluxului:
Container:după, .row:după (conținut: „”; afișare: tabel; clar: ambele; )
Pentru a separa rândurile unul de celălalt, puteți adăuga o marjă de jos:
Rând (marja-jos: 15px; )
Înălțimea blocurilor de grilă este determinată de înălțimea conținutului lor, deci poate fi diferită:
Înălțimea blocurilor poate fi fixată specificând-o în mod explicit, de exemplu, .row div (înălțime: 100px) . Dar, în acest caz, trebuie să vă asigurați că atunci când adăugați adaptabilitate la aspect, conținutul blocurilor nu se va extinde dincolo de marginea blocului.
Dacă trebuie să setați culoarea de fundal pentru blocurile unui rând, atunci acest lucru se poate face după cum urmează: pentru un element cu clasa .row, adăugați o nouă clasă care vă va permite să stilați numai acest rând (se pare că . row row-one), specificați pentru acesta culoarea de fundal a unui bloc mai mic în înălțime , iar pentru blocul înalt îi vom seta propria culoare, adică în acest fel vom realiza un fundal de fundal.
Lorem ipsum dolor sit amet.
Duis lobortis tempor torttor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem sempre at.
.row-one ( fundal: albastru deschis; ) .col-2-3 ( lățime: 66,6666666667%; plutire: stânga; fundal: scoici; ) Dacă secțiunea principală a paginii conține doar două blocuri, atunci rândul suplimentar de wrapper nu poate fi adăugat:
4. Aspect subsolul paginii
Subsolul paginii, sau subsolul paginii, conține de obicei informații despre drepturile de autor, link-uri suplimentare etc. Toate aceste informații sunt plasate și în coloane, care pot avea lățimi identice sau diferite.
Toate șabloanele prezentate pentru site-ul dvs. sunt construite pe baza versiuni moderne HTML5 și CSS3. În plus, autorii folosesc astfel de caracteristici la modă precum design plat , design responsive, layout adaptiv, slider jQuery, animație CSS3 etc. Adică dacă ești în căutarea unui șablon de site mobil, poți alege oricare dintre cele prezentate. Șabloane html5 frumoase 2017 , deși gratuit, arată premium.
Aici veți găsi peste 50 de șabloane gratuite de site web responsive Calitate superioară pe HTML5 și CSS3, care pot fi folosite atât pentru site-uri noi, cât ș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 distrus totul. Vă rugăm, dragi cititori, dacă găsiți un astfel de link, lăsați-l în comentarii, îl voi corecta.
1. Snow - șablon gratuit de pagină de destinație folosind 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 - un lucru 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 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, de asemenea, construit pe cadrul Bootstrap. Puteți crea un site unic pe acest șablon cu un portofoliu, echipa dvs., prețuri, recenzii și tot ce va fi necesar. De exemplu, acest șablon este perfect pentru un site web pentru servicii de curățare. Animația din acest șablon este netedă și impresionantă, curată și bine fonturi lizibile . Doar șablonul perfect!
3. Alb - un șablon minunat de o pagină!
O trăsătură distinctivă a șablonului site-ului White sunt două opțiuni de fundal în partea de sus. Alegerea dvs. este 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, conceput pe bază de grilă (citiți mai multe despre grilă). Design șablon frumos și receptiv pentru un blog sau site web.
5. Mart eCommerce - șablon frumos pentru site-ul web de comerț electronic HTML5 și CSS3
Designul 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, haine, ceasuri, accesorii, îmbrăcăminte sport etc. inclus Fișier PSD pe care îl puteți ajusta în funcție de nevoile dvs.
6. Nava - șablon HTML5 și CSS3 spectaculos 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. Multe variante ale setărilor șablonului vă permit să vă faceți site-ul unic. Șablon de site web ușor, frumos și receptiv.
7. Box Portfolio - un șablon unic de site creativ, folosind HTML5 și CSS3
Șablonul de site web Box Portfolio are un design minimalist curat și modern. Perfect pentru profesioniștii care doresc să-și afișeze în mod eficient munca online. După cum sugerează și numele, șablonul de site este ideal pentru un portofoliu.
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 site-ului Mountain King nu face excepție. Include 336 de pictograme vectoriale de la Typicons. Plus o animație excelentă folosind CSS3. Șablonul este perfect pentru site-uri web de călătorie și portofoliu.
9. Beauty Spa - șablon de site web HTML5 și CSS3 cool pentru saloanele spa
Beauty Spa este un șablon de site web responsive care are multe caracteristici, ideal pentru site-uri spa, centre de sănătate sau fitness, site-uri de yoga sau chiar saloane de coafură. Lizibilitate excelentă a fonturilor și minimalism discret.
10. Bent – pagină de destinație elegantă și eficientă pentru site-uri web care utilizează HTML5 și CSS3
Bent este grozav șablon gratuit site pe html5 și css3. Design receptiv, animație CSS3, defilare paralaxă, navigare personalizată ș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 și senzația site-ului, văzând în continuare conținutul de bază.
11. Triunghi - Șablon gratuit responsive multifuncțional HTML5 și CSS3
Triangle este un șablon de site web creativ exclusiv HTML5 și CSS3, special pentru cei care doresc să-și modifice designul cool, dar să nu-l înrăutățească. Șablonul vine cu 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, ideal pentru scriitori, autori, copywriteri și alți lucrători cu pix și hârtie. Șablonul poate fi folosit și pentru blog personal , blog despre călătorii, creativitate etc. Designul creativ și aspectul adaptiv al șablonului vor atrage mulți.
13. Bodo - un șablon grozav pentru un site web personal
Bodo- frumos șablon site pe HTML5 și CSS3, ceea ce este ideal pentru un site personal. Mai ales pentru organizarea unui portofoliu. Tipografie curată și clară, glisor carusel, ferestre pop-up ferestre pop-up pentru a afișa lucrări ș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ă splendoarea, impresionant și cel mai important - mare! Un șablon de site rar îndeplinește aceste cerințe. Lens este un astfel de șablon pentru site-ul fotografic.
15. Spectral - un șablon unic de site web realizat manual folosind HTML5 și CSS3
Dacă cauți șabloane gratuite de site-uri web pe subiecte auto , atunci Spectral va fi solutie ideala . Absolut aici design unic șablon de site web realizat manual de o pagină. Designul poate fi schimbat la discreția dvs. Cu acest șablon puteți 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 de o pagină
Oxigenul este un șablon convenabil și unic pentru un site web de afaceri. Design plat modern, aspect adaptiv. De exemplu, acest șablon este ideal pentru un site web despre aplicatii mobile sau tehnologie mobilă.
17. Mobirise Bootstrap - șablonul perfect de site gratuit pe HTML5 și CSS3
Dacă sunteți în căutarea unui șablon de site gratuit, atunci Mobirise Bootstrap este 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 se adaptează la orice dimensiune de ecran.
18. La Casa - șablon HTML5 frumos și gratuit pentru un site imobiliar
Șablonul Brandy este perfect pentru organizarea unui site imobiliar comercial. Receptiv și foarte Design frumos Acesta va atrage nu numai proprietarul site-ului, ci și vizitatorilor.
19. Drifolio - șablon elegant de site web HTML5 pentru portofoliu
Șablon de site web stilat și animat HTML5 și CSS3 pentru organizarea unui portofoliu. Design curat, tipografie excelentă, pictograme frumoase și multe altele.
20. Pluton - un șablon luminos și elegant pentru un site web de o pagină
Pluton este un șablon de site web luminos și eficient bazat pe Bootstrap. Un șablon de site web modern, cu aspectul său unic de o pagină și designul receptiv, care este grozav pentru studiouri, fotografi și designeri creativi.
21. SquadFree - șablon profesional de site web de o pagină pe HTML5
Șablonul SquadFree este perfect pentru crearea unui site web comercial cu o singură pagină. Șablonul nu numai că arată profesional, ci este și adaptat tuturor tipurilor de ecrane. Șablonul se bazează pe Bootstrap.
22. Sublime - un șablon de site fascinant pe 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ă de șablon de site web proaspătă, elegantă și neobișnuită. Diagonala este principala caracteristică de design a acestui șablon. Șablonul este perfect pentru un site web sau portofoliu de afaceri. Există o galerie încorporată, o hartă și informații de contact pe care le puteți adapta cu ușurință nevoilor dvs.
24. E-Shopper - cel mai bun șablon de site de comerț electronic
E-Shopper este un șablon excelent pentru site-ul web comerțul electronic . Construit pe bazat pe bootstrap cu un set uimitor de funcții pentru un magazin online complet și eficient.
25. Magnetic - șablon gratuit HTML5 și CSS3 pentru un site foto
Un șablon HTML5 și CSS3 absolut uimitor pentru crearea unui site web foto sau 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 - un șablon frumos de site într-un stil minimalist folosind HTML5 și CSS3
Designul plat al acestui șablon de site minimalist este perfect pentru crearea unui portofoliu. În șablon, toate detaliile sunt verificate perfect!
27. Modern Bootstrap HTML5 - Șablon de site web gratuit pe o pagină
Această pagină gratuită bazată pe cadrul Bootstrap este perfectă pentru site-urile web corporative, atât pentru companiile mici, cât și pentru cele mari. Design plat, aspect adaptiv, toate elementele de design de înaltă calitate. Șablonul vine în 4 culori diferite.
28. Infuzie - șablon elegant de site web de o pagină folosind HTML5 și CSS3
Infusion este un exemplu excelent de șablon de site web HTML5 și CSS3 care este conceput special pentru crearea 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 pentru site-ul corporativ pe HTML5 și CSS3
Acest șablon de site web în stil plat de înaltă calitate este perfect pentru orice site web corporativ. Design adaptiv, o mulțime de setări și opțiuni de editare.
30. Douăzeci - șablon de site web HTML5 și CSS3 spectaculos cu paralaxă
Acest șablon de site unic și foarte frumos cu efect de paralaxă nu va lăsa pe nimeni indiferent. Șablon de o pagină construit pe HTML5 și CSS3 pur cu aspect adaptiv , fundaluri impresionante, suport social media etc.
31. Urbanic – excelent șablon de site web HTML5 și CSS3 pe Bootstrap
Urbanic este un șablon de site web HTML5 și CSS3 proaspăt și cool, construit pe motorul Bootstrap. Perfect pentru a începe să vă creați site-ul imediat, fără nicio bătaie de cap. Șablonul este perfect adaptat oricărei dimensiuni de ecran.
32. Design Showcase - șablon de site web portofoliu HTML5
Un șablon de site web HTML5 armonios vizual și eficient pentru organizarea portofoliului dvs. Șablonul este perfect adaptat pentru dispozitivele mobile, ceea ce este foarte greu de realizat pentru site-urile de acest format.
33. Mamba One - un șablon de site web simplu și elegant, folosind HTML5 și CSS3
Mamba One este un exemplu de șablon de site web simplu, dar elegant, pentru crearea unei pagini cu o singură pagină. Compatibil cu toată lumea browsere moderne și va fi afișat în mod adecvat peste tot.
34. KreativePixel - șablon gratuit de site 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 folosind HTML5 și CSS3
După cum sugerează și numele, acest șablon minunat de site nu este numai perfect adaptat pagini de destinație , dar îndeplinește și noile tendințe mobile, mai ales în ceea ce privește claritatea afișajului pe dispozitivele cu ecrane Retina.
36. Brushed - șablon de site web responsive HTML5 și CSS3 bazat pe motorul Bootstrap
Brushed este un șablon de site web receptiv, gratuit HTML5 și CSS3, bazat pe motorul Bootstrap. De asemenea, optimizat pentru ecrane Retina (iPhone, iPad, iPod Touch și MacBook Pro Retină).
37. Șablon de site web Big Picture HTML5 și CSS3
Bun venit la Big Picture! Acest șablon de site web HTML5 receptiv este perfect pentru toți oamenii creativi care au ceva de arătat și îl arată mare și impresionant pe site-ul lor. În plus, șablonul folosește o animație excelentă.
38. Tesselatte - Șablon gratuit de răspuns HTML5 și CSS3
Un șablon simplu de o pagină care ia în considerare toate instrumentele necesare pentru crearea de succes a site-ului web. Ideal pentru blogul personal al unui scriitor, copywriter sau doar al unui iubitor al cuvântului scris.
39. Overflow - un șablon unic de site web pe HTML5 și CSS3
Acest șablon de site unic 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 un site web de orice subiect. Stil strălucitor și fonturi clare, design adaptiv și detalii impresionante de model. Totul funcționează pentru tine!
41. Pinball Responsive Grid Style - Șablon de site web bazat pe grilă
Acest șablon uimitor de site web profesional bazat pe grilă este perfect pentru un site web corporativ. Designul plat modern și structura de șablon receptivă se afișează perfect pe ambele ecrane monitoare mari , și dispozitive mobile.
42. Prolog - șablon curat de site web de o pagină folosind HTML5 și CSS3
Acest șablon de site web HTML5 și CSS3 curat, simplu și clar este perfect pentru construirea unei pagini de destinație. Designul minimalist nu distrage atenția de la lucrul principal. O bară de navigare laterală cu defilare atrăgătoare și linii curate ale paginii sunt doar combinația perfectă!
43. Helios - șablon modern de site folosind HTML5 și CSS3 pur
Un alt șablon de site web în stil minimalism și forme curate. Conceput special pentru a profita de ecranele de afișare mari, dar și perfect adaptate 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 un mare avantaj - este simplu și concis, dar este exact ceea ce lipsește multor oameni.
45. Strongly Typed - un șablon de site foarte frumos într-un stil semi-retro
Un nou șablon de site web cu un stil minimalist semi-retro. Doar că retro nu mai este la modă, dar un mic indiciu este binevenit. Acest șablon de site este pe deplin responsive, construit pe HTML5 și CSS3 pur și include toate elementele de bază ale paginii necesare. Șablonul Strongly Typed este ideal pentru site-urile web creative. De exemplu, pentru un site despre 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 pe HTML5 și CSS3. Are totul în arsenalul său elementele necesare pagini, inclusiv citate proiectate, tabele și liste, precum și o bară laterală adaptată (dreapta sau stânga - după cum doriți).
47. Paralelism - un șablon de site web neobișnuit și elegant, folosind HTML5 și CSS3
Paralelism este un șablon de site web elegant pentru organizarea de portofolii sau fotografii. Ceea ce îl face neobișnuit este că derularea aici nu este verticală, ca de obicei, ci orizontală. Acest lucru conferă site-ului un șic și memorabil deosebit.
48. Miniport - șablon de site web HTML5 complet receptiv în stil minimalist
Excelent șablon de site web în stil minimalist pe HTML5. Perfect pentru un site web/blog personal, precum și pentru un site web corporativ mic de o pagină sau ca site web 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 mari sau proiecte comerciale. Reactiv și convenabil atât pentru autor, cât și pentru utilizatori.
50. ZeroFour - șablon de site web impresionant și elegant, folosind HTML5 și CSS3
Și ultimul pe listă, dar nu în ultimul rând în ceea ce privește calitatea și eficacitatea vizuală, este șablonul de site - ZeroFour. Design elegant , Foarte meniu frumos , forme și butoane perfect aliniate, pictograme frumoase și multe altele. Și toate acestea sunt absolut gratuite!
Sper că ați găsit ceva potrivit pentru dvs. printre aceste șabloane uimitoare de site-uri HTML5 și CSS3. Noroc!
Marcați-l ca să îl găsiți rapid.
PS: Dacă nu puteți face o alegere, citiți articolul „Nu știu ce vreau”. Va fi de folos.
Unde începe de obicei procesul de layout? Începe cu studierea aspectului sau aspectului viitorului site. Cel mai adesea, aceste aspecte sunt create în program Adobe Photoshop , prin urmare, tu, ca designer de layout, trebuie să poți folosi acest program și anume, să poți tăia imagini din layout, să măsori indentările dintre elemente, să calculezi dimensiunile și parametrii diferitelor componente ale viitoarei pagini web etc. . În primul rând, să configuram spațiul de lucru în Adobe Photoshop pentru a ușura lucrul.
Toate exemplele vor fi afișate în program Adobe Photoshop CS5 , cu o interfață în engleză.
Când deschideți Adobe Photoshop, veți vedea ceva de genul acesta:
Bara de meniu principală;
Panoul de optiuni;
Bara de instrumente;
Panouri suplimentare.
Trebuie să configuram un set de panouri suplimentare. Pentru a începe, accesați meniul Fereastră – Spațiu de lucru nou :
Introduceți un nume pentru noul spațiu de lucru, de exemplu, spațiul meu de lucru , și apăsați Salvați . Acum trebuie să selectăm panourile necesare cu care să lucrăm. Accesați fereastră și bifați casetele de lângă Istorie , Info , Straturi , Navigator , Opțiuni , Instrumente . Puteți debifa panourile rămase dacă sunt bifate.
Acum trebuie să securizăm aceste panouri. Pentru a face acest lucru, faceți clic pe partea de sus a panoului și trageți-l în locația dorită, astfel încât, în final, dvs spatiu de lucru arata asa:
Când apare o bandă albastră transparentă, eliberați cursorul pentru a andoca panoul în acea locație:
Pentru a închide filele inutile, faceți clic pe pictograma din dreapta colțul de sus file și selectați elementul din meniul derulant Închide :
Primul aspect pe care îl vom crea se numește simplu_text.psd , se află în folder șabloane . Deschideți-l în Adobe Photoshop ținând apăsate tastele Ctrl+O (sau prin meniu Fişier – Deschis ) și selectați fișierul.
Porniți rigla folosind tastele rapide Ctrl+R sau prin meniu Vedere – Conducători :
Acum faceți dublu clic pe riglă și deschideți fila Unități și rigle pentru a seta unitățile de măsură. Selectați în bloc Unități Pentru Conducători Și Tip unități de măsură pixeli:
Acum totul este gata, puteți începe să alcătuiți aspectul.
Crearea unei structuri de pagină web
Creați un folder pe desktop și denumiți-l text simplu . În acest folder creați două fișiere index.html Și stil.css .
După cum vă amintiți, creăm structura paginii web pe limbaj HTML . Deci mai întâi deschidem fișierul index.html și scrieți codul original în el:
Text simplu
Acum între etichete
creați un bloc folosind o etichetă
:
Text simplu
Etichetă
este un element de bloc universal și definește un bloc pe o pagină web.
Să scriem în acest bloc elementele care sunt prezente pe layout, și anume titlul și paragrafele:
Text simplu
Adăugați text între aceste etichete.
Acum într-un recipient
scrie calea către fișier cu stiluri:
Stilul paginii web
Dacă deschizi index.html în browser, veți vedea o pagină web scrisă în HTML pur. Este foarte diferit de cel prezentat pe model. Vom rezolva acest lucru cu foi de stil în cascadă.
Deschideți fișierul style.css și resetați toate umpluturile folosind selectorul universal cu asterisc:
* ( marja: 0; umplutură: 0; )
Acum să notăm proprietățile etichetei
:
Corp (culoare de fundal: #e35b5b; dimensiunea fontului: 16px; înălțimea liniei: 24px; culoarea: alb; familia de fonturi: Arial; )
Cum să găsiți culoarea de fundal a unei pagini web în Adobe Photoshop? Pentru a face acest lucru, faceți clic pe unul dintre cele două pătrate cu o culoare:
Apoi faceți clic pe fundalul aspectului cu o pipetă și copiați codul hexazecimal prezentat în fereastră Selector de culoare :
Cum să afli dimensiunea spațiere între linii , stilul, familia de fonturi și culoarea textului? Pentru a face acest lucru, selectați stratul cu text, apoi deschideți panoul Caracter . Acest panou va afișa următoarele opțiuni:
Vă rugăm să rețineți că pentru culoarea textului, în loc de un cod hexazecimal, am scris numele nuanței: culoare: alb; . Este convenabil să folosiți nume de nuanțe pentru negru și alb alb, deoarece numele este mult mai rapid de scris decât codul hexazecimal. Toate denumirile nuanțelor de culoare pot fi găsite în acest tabel.
Proprietăți pentru bloc
Pentru acest bloc, vom specifica lățimea, precum și umplutura de sus, stânga și dreapta:
Pentru multe proprietăți, veți vedea valori scrise în următoarele formate:
marja: valoare1 valoare2 valoare3 valoare4 ;marja: valoare1 valoare2 valoare3 ;marja: valoare1 valoare2 ;marja: valoare1 ;În primul caz specificăm valori pentru fiecare dintre cele patru laturi, de exemplu, marjă: 10px 12px 20px 15px; : 10px – umplutură de sus, 12px – umplutură dreapta, 20px – umplutură de jos, 15px – umplutură stânga. Această notație este de obicei folosită atunci când indentările de pe fiecare parte sunt diferite.
În al doilea caz sunt scrise trei valori, de exemplu, marginea: 10px 12px 20px; : 10px – umplutură superioară, 12px umplutură dreapta și stânga, 20px – umplutură inferioară. Această notație este convenabilă de utilizat atunci când valorile din dreapta și din stânga sunt egale, dar valorile din partea de sus și de jos sunt diferite. Valoare automată folosit atunci când doriți ca browserul să calculeze automat umplutura la stânga și la dreapta.
În al treilea caz sunt utilizate două valori, de exemplu, marginea: 10px 12px; : marginea superioară și inferioară 10px, marginea dreaptă și stângă 12px. Dacă liniuțele de mai sus și de dedesubt sunt egale, iar liniuțele din dreapta și din stânga sunt egale între ele, atunci este convenabil să notăm doar două valori, ca în exemplul nostru.
În al patrulea caz se scrie o valoare, de exemplu, margin: 10px; : umplutura pe fiecare parte este de 10px. Când parametrii sunt egali pe toate părțile, este convenabil să folosiți doar o astfel de notație.
Cum se măsoară lățimea sau înălțimea unui element în Adobe Photoshop? Să luăm în considerare un singur mod: luați un instrument Instrument Marquee dreptunghiular (tasta rapidă M) :
Apoi selectăm zona, de exemplu, trebuie să aflăm indentarea de la marginea superioară a aspectului până la începutul conținutului, selectați-o:
În panou Info uitați-vă la valorile înălțimii H , sau valoarea lățimii W dacă trebuie să știți lățimea unui element:
Să trecem la titlu
Aici trebuie să specificăm dimensiunea, distanța dintre linii, umbra și umplutura inferioară. Știți deja cum să înregistrați primele două proprietăți.
Pentru a specifica umbra avem nevoie de proprietate text-umbră :
Aici 0
– indentare de-a lungul axei X;
1px – offset de-a lungul axei Y;0
– raza de estompare a umbrei;rgba(0,0,0,0.3) – culoarea umbrei. În acest caz folosim format RGBA , inclusiv un canal alfa care stabilește transparența elementului. Între paranteze, primele trei valori responsabile pentru culoarea din format rgb , iar ultima valoare este responsabilă pentru transparență. Această valoare este scrisă în intervalul de la 0 la 1, unde 0 reprezintă transparența totală și 1 reprezintă opacitatea.Cum să aflați parametrii de umbră în Adobe Photoshop? Alege stratul dorit în panoul de straturi și faceți clic pe pictogramă ƒx :
Se deschide o fereastră Stil strat . Trebuie să selectați o filă Umbra :
Iată parametrul Opacitate responsabil pentru transparență, parametru Distanţă este responsabil pentru indentarea de-a lungul axei Y, parametru mărimea este responsabil pentru estompare și parametru Unghi este responsabil pentru indentarea de-a lungul axei X. Deoarece umbra noastră cade în unghi drept, indentarea de-a lungul axei X va fi egal cu zero . Culoarea umbrei poate fi găsită în caseta de lângă parametru Modul de amestecare :
Valoarea culorii în format RGB și cu un canal alfa în acest caz va arăta astfel:
Text-shadow: 0 1px 0 rgba(0,0,0,0.3);
Rămâne să notăm indentarea de mai jos.
Dacă trebuie să scrieți o valoare pentru una dintre cele patru laturi, atunci utilizați această notație:
margine-top – liniuță de sus;margine-dreapta – indentare dreapta;margine-fond – liniuță de jos;margine-stânga – indentarea stângă.Deoarece trebuie să specificăm marginea de jos, vom scrie margin-bottom: 30px;
Ca rezultat, primim acest cod în fișier stil.css :
* ( margine: 0; umplutură: 0; ) body ( culoarea fundalului: #e35b5b; dimensiunea fontului: 16px; înălțimea liniei: 24px; culoarea: alb; familia fonturilor: Arial; ) div ( lățime: 724px; marginea : 43px automat 0; ) h1 (dimensiunea fontului: 60px; înălțimea liniei: 62px; text-shadow: 0 1px 0 rgba(0,0,0,0.3); margin-bottom: 30px; )
Primul paragraf. Selectoare adiacente
Să notăm proprietățile pentru primul paragraf:
P (dimensiunea fontului: 24px; înălțimea liniei: 30px; culoare: #a42727; umbră text: 0 1px 0 rgba(255,255,255,0,35); margin-bottom: 42px; )
Acum, dacă salvați modificările și deschideți fișierul index.html în browser, veți vedea că aceste proprietăți sunt aplicate tuturor paragrafelor din pagină. Deoarece trebuie să notăm aceste proprietăți numai pentru primul paragraf, în acest caz putem folosi selectoare adiacente . Ce este? În șablonul html, etichete
Și (luăm exact primul paragraf) merg unul după altul, ceea ce înseamnă că sunt etichete adiacente, în css adiacent selectoarele sunt scrise astfel:
H1+p (dimensiunea fontului: 24px; înălțimea liniei: 30px; culoare: #a42727; text-shadow: 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 42px; )
Acum, aceste proprietăți se vor aplica numai la primul paragraf.
Ultimul paragraf. Clasele în CSS
Acum să trecem la ultimul paragraf. Deoarece diferă și de textul principal, îi vom atribui o clasă. În șablonul html, scrieți atributul de clasă pentru ultimul paragraf cu valoarea last-p . Numele clasei, precum și identificatorul, trebuie să înceapă cu litere din alfabetul latin:
În clasele CSS sunt scrise astfel:
P.last-p (culoare: #ffbfbf; text-align: dreapta; text-shadow: 0 1px 0 rgba(0,0,0,0.3); )
Aceste proprietăți vor funcționa numai pentru ultimul paragraf din șablonul nostru.
Spre deosebire de identificatori, puteți folosi o clasă cu o anumită valoare pe pagină de câte ori doriți.
proprietatea text-align cu valoarea dreapta este folosit când trebuie să aliniați textul la dreapta. De asemenea, puteți utiliza alte valori, de exemplu, text-align: center; în acest caz textul va fi aliniat la centrul blocului.
Alte paragrafe
Pentru paragrafele rămase scriem următoarea proprietate:
P (marja-jos: 30px; )
Alte proprietăți: culoare, familie de fonturi, dimensiune, spațiere între rânduri, de la care va moșteni această etichetă element părinte , adică etichetă
.
Dacă facem fereastra browserului mai mică, putem vedea că conținutul este lipit pe părțile laterale ale ferestrei. Pentru a remedia acest lucru, adăugați padding la selectorul div:
Gruparea selectoarelor
Dacă mai multe elemente ale unei pagini web conțin aceleași proprietăți cu aceleasi valori , de exemplu, ca și în exemplul nostru, titlul și ultimul paragraf au o proprietate comună - aceasta este o umbră, apoi puteți grupa acești selectori scriindu-i separate prin virgule:
H1,p.last-p ( text-shadow: 0 1px 0 rgba(0,0,0,0.3); )
Nu uitați să eliminați proprietățile elementelor individuale; în cazul nostru, trebuie să eliminați umbra din selectoarele h1 și p.last-p.
Video pentru lecție
Partea 1
Ultima actualizare: 24.04.2016
De obicei, o pagină web este formată din mai multe diverse elemente , care poate avea o structură complexă. Prin urmare, atunci când creați o pagină web, există o nevoie în mod corect poziționați aceste elemente, stilați-le astfel încât să fie amplasate pe pagină în modul dorit. Adică, se pune întrebarea despre crearea unui aspect de pagină și aspectul acesteia.
Exista diferite căi , strategii și tipuri de layout. Inițial, aspectul bazat pe tabel era obișnuit. Deoarece tabelele fac posibil, dacă este necesar, împărțirea foarte ușor și simplu a întregului spațiu al unei pagini web în rânduri și coloane. Rândurile și coloanele sunt destul de ușor de gestionat și este ușor să poziționați orice conținut în ele. Acesta este ceea ce a determinat popularitatea aspectului tabelului.
Cu toate acestea, aspectul tabelar nu creează cele mai flexibile pagini în design, ceea ce este un aspect deosebit de relevant într-o lume în care nu există o singură rezoluție a ecranului, adică ecrane mari pe televizoare, ecrane mici pe tablete și phablete, ecrane foarte mici pe smartphone-uri etc. Dispunerea mesei nu a putut satisface toată această varietate de ecrane. Prin urmare, a fost înlocuit treptat de aspectul blocului. Aspectul bloc este un nume relativ convențional pentru metodele și tehnicile de aspect, atunci când folosesc majoritatea paginilor web Proprietate float CSS , iar elementul principal de construcție al paginilor web este elementul
, adică în esență un bloc. Folosind proprietatea float și
elemente div sau alte elemente, puteți crea o structură de pagină din mai multe coloane, ca și în cazul unui aspect de tabel, care va fi mult mai flexibil.
Anterior, într-unul dintre subiectele anterioare, a fost discutat efectul proprietății float. Acum să-l folosim pentru a crea o pagină web cu două coloane. Să presupunem că avem un antet și un subsol standard în partea de sus și de jos și două coloane în centru: o coloană cu un meniu sau o bară laterală și o coloană cu conținutul principal.
Mai întâi, să definim toate blocurile. Când lucrați cu elemente care folosesc float și proprietatea float, ordinea acestora este importantă. Astfel, codul pentru un element plutitor care are setată proprietatea flotant trebuie să fie înaintea elementului care se înfășoară în jurul elementului plutitor. Adică, blocul barei laterale va merge înaintea blocului de conținut principal:
Aspect bloc în HTML5
Conținut principal
Adică, până acum rezultatul este aproximativ următoarea pagină:
Înălțimea, chenarul și căptușeala blocurilor în acest caz sunt adăugate doar pentru frumusețe, pentru a identifica spațiul blocului și a-l separa de altele.
În continuare, pentru a muta blocul barei laterale la stânga blocului de conținut principal și a obține un efect de împachetare, trebuie să specificăm proprietatea float: left a blocului barei laterale și lățimea preferată. Lățimea poate fi fixă, de exemplu 150 px sau 8 em. Sau puteți folosi și procente, de exemplu 30% - 30% din lățimea recipientului de corp. Pe de o parte, blocurile cu lățime fixă sunt mai ușor de gestionat, dar pe de altă parte, lățimile procentuale vă permit să creați blocuri mai flexibile, fluide, care se redimensionează pe măsură ce fereastra browserului este redimensionată.
Ultimul pas este să setați indentarea blocului cu conținutul principal din blocul din bara laterală. Deoarece atunci când curge în jurul unui bloc care curge, poate curge în jurul unui element plutitor atât din dreapta, cât și din jos, dacă elementul plutitor are o înălțime mai mică, atunci trebuie să setăm offset-ul cel puțin egal cu lățimea elementului plutitor. De exemplu, dacă lățimea barei laterale este de 150 px, atunci blocul de conținut principal poate fi setat la 170 px, ceea ce va crea spațiu gol între cele două blocuri.
Cu toate acestea, nu ar trebui să specificați în mod explicit lățimea blocului de conținut principal, deoarece browserele îl extind automat, astfel încât să ocupe tot spațiul disponibil.
Deci, ținând cont de toate cele de mai sus, să schimbăm stilurile barei laterale și ale blocurilor de conținut principale, după cum urmează:
#sidebar( culoarea fundalului: #ddd; float: stânga; lățime: 150px; ) #principal( culoarea fundalului: #eee; înălțime: 200px; margin-left: 170px; /* 150px (lățimea barei laterale) + 10px + 10px (2 liniuțe) */ )
Ca rezultat, vom avea o bară laterală de partea stanga din blocul principal:
Înălțimea blocurilor în acest caz este indicată condiționat pentru o mai mare claritate; în realitate, de regulă, înălțimea va fi setată automat de browser.
Crearea unei bare laterale din dreapta va fi similară, doar că acum trebuie să setăm bara laterală să plutească: dreapta și blocul de conținut principal la umplutura din dreapta:
#sidebar( culoarea fundalului: #ddd; float: dreapta; lățime: 150px; ) #principal( culoarea fundalului: #eee; înălțimea: 200px; marginea dreapta: 170px; )
în care marcaj html rămâne același, blocul barei laterale trebuie să precedă blocul de conținut principal.
Cele mai bune articole pe această temă
Orez. 1. Secțiunile principale ale paginii