Crearea unui aspect simplu. Crearea unui aspect simplu Aspecte de pagină Web
Această subsecțiune descrie aspecte populare de site-uri web care sunt cel mai des folosite în aspect, precum și câteva tehnici care le oferă un aspect mai atractiv. Aspectele sunt realizate folosind , așa că veți avea nevoie de cunoștințe ale acestor limbi pentru a înțelege pe deplin principiul aspectului. Dacă le cunoașteți, atunci știți că în HTML și CSS același rezultat poate fi obținut în moduri complet diferite. Doar câteva dintre metodele posibile sunt prezentate aici.
Aspectele sunt împărțite în trei tipuri principale:
În plus față de coloane, layout-urile au o parte superioară (antet) și o parte inferioară (subsol), deoarece de mult timp sunt o parte familiară și integrantă a aproape tuturor site-urilor de pe Internet. Din același motiv, aici veți găsi exemple care permit apăsați pe subsolîn partea de jos a paginii și faceți coloane de aceeași înălțime.
Vă rugăm să rețineți că în aproape toate aspectele puteți schimba unele coloane fără a modifica codul HTML al paginilor. Prin urmare, în primul rând, pe baza acestor aspecte, puteți crea unele dintre propriile opțiuni și, în al doilea rând, dacă se dovedește că deja
Stimate cititor, cu acest articol deschid o serie de articole dedicate layout-ului.
Prima parte va descrie cum să faceți acest lucru folosind instrumente standard folosind HTML și CSS pur. În părțile ulterioare ne vom uita la cum să facem același lucru, dar cu ajutorul cadrelor moderne și CMS.
Deci, să începem. Ca subiect de testare, vom lua șablonul PSD gratuit Corporate Blue de la studioul Pcklaboratory.
- Creați un folder cu numele proiectului nostru, de exemplu Whitesquare.
- În el creăm un fișier index.html gol.
- În folderul de proiect, creați un folder css cu un fișier styles.css gol.
- În folderul de proiect, creați un folder de imagini gol.
- Cum vor fi tăiate imaginile?
- Care vor fi principalele stiluri?
- Ce fel de layout vom primi?
Numai după ce răspunzi mental la aceste întrebări pentru tine, poți trece la tăierea imaginilor și la scrierea codului. Să ne uităm la aceste întrebări în ordine.
Imagini generale În această etapă, trebuie să tăiați și să salvați doar imaginile generale care vor fi pe toate paginile site-ului și nu au legătură cu conținutul. În cazul nostru, acesta va fi un fundal de pagină gri deschis, un fundal antet, o imagine goală, două sigle și butoane pentru rețelele sociale.Să salvăm siglele după cum urmează:
/images/logo.png
/images/footer-logo.png
Ca imagini goale din layout, vom folosi o imagine gri de un pixel, pe care o vom întinde după cum este necesar
/images/sample.png
Imaginile de fundal care se repetă trebuie decupate într-o bucată mică suficientă pentru a forma o imagine completă prin repetarea verticală și orizontală.
/images/bg.png
/images/h1-bg.png
Este convenabil să salvați pictogramele rețelelor sociale cu aceleași dimensiuni într-un singur fișier și să le folosiți ca sprites pentru o încărcare mai rapidă. Pentru a face acest lucru, puteți lipi imaginile manual în Photoshop sau le puteți tăia mai întâi pe rând și apoi le puteți lipi împreună folosind un serviciu special, de exemplu http://ru.spritegen.website-performance.org. Rezultatul vor fi două fișiere:
/images/social.png
/images/social-small.png
Regula generală la denumirea imaginilor este aceea că imaginile mici și simple, cum ar fi pictograme, logo-uri etc. sunt salvate în format png, iar fotografiile în format jpg.
Stiluri de bază Și abia acum poți începe să scrii cod. Dar vom începe să facem acest lucru nu cu HTML obișnuit, ci cu transferul regulilor în CSS.În această etapă, este recomandabil să transferați toate stilurile vizuale din design în CSS, care vor fi aplicate implicit pentru fiecare etichetă.
Culoarea de fundal este aproximativ #f8f8f8. Va fi afișat dacă imaginea de fundal nu se încarcă. Există o bandă de design gri în partea de sus a paginii. Să-l aplicăm prin proprietatea de frontieră a corpului.
Fontul principal este fontul folosit pentru a scrie textul în zona de conținut. Pentru a-i afla stilurile, trebuie să îl selectați în Photoshop și să vă uitați la proprietățile fontului. În acest caz, este Tahoma 12px cu culoarea #8f8f8f. De asemenea, în acest aspect, paragrafele au indentare crescută.
Scriem toate aceste stiluri în styles.css:
Corp (culoare: #8f8f8f; font: 12px Tahoma, sans-serif; culoare de fundal: #f8f8f8; chenar-sus: 5px solid #7e7e7e; margine: 0; ) intrare (culoare fundal: #f3f3f3; chenar: 1px solid #e7e7e7; culoare: #b2b2b2: 0 10px, sans-serif;
În viitor, vom scrie toate stilurile în același fișier, așa că îl vom numi pur și simplu „stiluri”.
Cadrul HTML Și acum, în sfârșit, putem exersa scrierea codului HTML. Să scriem următoarele în index.html:White Square
Aici indicăm că folosim marcaj HTML5, codificare utf-8, iar pagina se numește Whitesquare. Includem, de asemenea, fișierul nostru de stiluri și un fișier extern cu stiluri de font.
În ultimul bloc din secțiunea head, includem un script special care vă permite să acceptați etichete Html5 în browserele Internet Explorer mai mici decât versiunea 9. Metaeticheta X-UA-Compatible vă spune că, dacă utilizați Internet Explorer, ar trebui să afișeze site-ul în cel mai modern mod.
Tot codul html în viitor se va referi la același fișier, astfel încât autorul nu va mai indica în mod specific unde să scrie codul html.
Layout În acest caz, vedem că site-ul este format din două coloane: conținutul principal și bara laterală. Deasupra lor este un antet, care conține trei blocuri orizontale: un logo cu o căutare, un meniu și un titlu de pagină. În partea de jos, sub coloane, există un bloc de subsol gri orizontal.
Să descriem asta în eticheta body:
Wrapper este folosit pentru a combina blocuri și a le alinia la centrul paginii.
Apoi specificăm stilurile de bloc:
Logo
Introduceți sigla în eticheta antetului:
Nu sunt necesare stiluri suplimentare.
CăutareIntroduceți formularul de căutare în eticheta de antet:
...MERGE
Și stilurile de aliniere potrivite pentru el:
Formă (float: dreapta; )
MeniuPentru a afișa meniul, trebuie să creați o listă cu link-uri în interiorul etichetei nav:
Stilurile CSS pentru acesta vor fi următoarele:
Nav a ( text-decor: niciunul; ) nav ul ( margine: 0; padding: 0; ) nav li ( list-style-position: inside; font: 14px "Oswald", sans-serif; padding: 10px; ) . meniul de sus li ( afișare: bloc inline; umplutură: 10px 30px; margine: 0; ) .meniu de sus li.active ( fundal: #29c5e6; culoare: #fff; ) .meniu de sus a ( culoare: #b2b2b2 )
Aici am specificat că linkurile pentru toate navigațiile nu ar avea subliniere, au eliminat indentările standard pentru elementele din listă, au afișat lista pe orizontală și au specificat culorile și fontul dorit.
Titlul paginiiTitlul paginii este plasat într-un div cu antetul id
DESPRE NOI
Antetul are următoarele stiluri:
#heading ( fundal: URL transparent(../images/h1-bg.png); margine: 30px 0; padding-left: 20px; ) h1 ( display: inline-block; culoare: #7e7e7e; font: 40px/40px „Oswald”, fundal: url(../images/bg.png: 0 10px );
Desenăm o dungă gri ca fundal pe div și introducem un h1 în linie în ea cu fontul și culoarea de fundal dorite a paginii pentru a crea impresia unui fundal transparent pentru h1.
Coloane Pentru a crea coloane de pagină, trebuie să specificați următoarele stiluri:Deoparte ( float: stânga; lățime: 250 px; ) secțiune ( margine-stânga: 280 px; padding-bottom: 50 px; )
Aici am stabilit o lățime fixă de 250 de pixeli pentru bara laterală, am fixat-o în cuie pe marginea din stânga și am mutat coloana de conținut la dreapta la 280 de pixeli de la marginea din stânga. Am adăugat și o indentă la conținutul de jos.
Submeniu
Creăm un submeniu în același mod ca și meniul principal. Pentru a face acest lucru, scrieți următoarele în eticheta de lângă:
Și aplicați următoarele stiluri în submeniu:
Aside-menu li ( font-weight: 300; list-style-type: square; border-top: 1px solid #e7e7e7; ) .aside-menu li:first-child (border: none; ) .aside-menu li. activ (culoare: #29c5e6; ) .aside-meniu a (culoare: #8f8f8f; )
Submeniurile folosesc fonturi mai subțiri și marcatori pătrați. Pentru a afișa separatorii, desenați un chenar superior pentru fiecare element din listă, cu excepția primului.
Conținutul barei laterale În conținutul barei laterale, pe lângă submeniu, aspectul conține și o imagine cu locația birourilor.
În html arată așa:
BIRURILE NOASTRE
În stiluri vom indica fonturi, culori și indentări:
Deoparte > h2 ( fundal: #29c5e6; font: 14px „Oswald”, sans-serif; culoare: #fff; umplutură: 10px; margine: 30px 0 0 0; ) deoparte > p ( fundal: #f3f3f3; chenar: 1px solid #e7e7e7: 10px;
Aceste stiluri se aplică numai titlurilor și paragrafelor imediat în interiorul barei laterale, dar nu mai profunde.
Citat Să începem să prezentăm conținutul adăugând un citat.
Să adăugăm codul citatului la secțiunea secțiunii
“QUISQUE IN ENIM VELIT, LA DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
John Doe, Lorem IpsumȘi aplică stiluri pentru el:
Citate bloc (marja: 0; fundal: #29c5e6; umplutură: 10px 20px; familia fonturilor: „Oswald”, sans-serif; greutatea fontului: 300; ) citatul bloc p (culoare: #fff; stilul fontului: cursiv; fontul -size: 33px margin: 0 ) blockquote cite ( afișare: bloc; dimensiunea fontului: 20px; stilul fontului: normal; culoarea: #1d8ea6; marginea: 0; text-align: right; )
Nu este nimic nou aici, la fel - fonturi, fundaluri și indentări.
Conţinut
Lorem ipsum dolor sit amet…
Donec vel nisl nibh…
Donec vel nisl nibh…
Următorul pas este să adăugați două imagini care se află la sfârșitul textului de conținut. Acest lucru se face folosind eticheta:
La care vom seta următoarele stiluri:
Figura ( afișare: bloc inline; marjă: 0; familia de fonturi: „Oswald”, sans-serif; greutate font: 300; ) imagine img ( afișare: bloc; chenar: 1px solid #fff; contur: 1px solid # c9c9c9; ) figura figcaption (dimensiunea fontului: 16px; greutatea fontului: 300; margin-top: 5px; ) figura figcaption span (afișare: bloc; dimensiunea fontului: 14px; culoare: #29c5e6; ) secțiune > figura + figură ( marja-stânga: 28px; )
Aici am eliminat umplutura standard din figură, am afișat-o ca un bloc inline și am aplicat fontul dorit. Imaginea este afișată ca element de bloc cu un chenar alb. Al doilea chenar gri poate fi creat folosind proprietatea outline css. Cel mai interesant lucru este în ultima regulă, care stabilește indentarea din stânga pentru toate figurile, cu excepția primei din interiorul etichetei secțiunii.
Blocați „Echipa noastră”
Când așezați acest bloc, să adăugăm mai întâi un titlu:
ECHIPA NOASTRA
Cu stil:
Secțiune > h2 ( fundal: #29c5e6; font: 30px „Oswald”, sans-serif; greutate font: 300; culoare: #fff; umplutură: 0 10px; margine: 30px 0 0 0; )
Și apoi două rânduri de bloc cu carduri de angajat
John Doeceo Saundra Pittsley liderul echipei... Regizorul Ericka Nobrigaart Cody Roussellesenior designer ui...
Astfel, cardul (figura) constă dintr-o fotografie (img), o semnătură (figcaption) cu numele și funcția angajatului (div). Cardurile vor avea următoarele stiluri:
Figura figcaption (dimensiunea fontului: 16px; greutatea fontului: 300; margin-sus: 5px; ) figure div ( dimensiunea fontului: 14px; culoare: #29c5e6; ) .team-row figure (marja-sus: 20px; ) .figură-rând echipa + figură (marja-stânga: 43px; )
Aici am stabilit fontul și indentarea pentru semnătură, dimensiunea și culoarea postării, am adăugat o indentație de sus pentru cărți și am specificat că toate cardurile din rând, cu excepția primei, trebuie să fie indentate la stânga.
Subsol Subsolul este format din patru blocuri mari: feed Twitter, harta site-ului, linkuri sociale și logo cu drepturi de autor.Mai întâi, să creăm un container de subsol cu aceste blocuri:
Și aplicați-i designul:
Subsol ( fundal: #7e7e7e; culoare: #dbdbdb; dimensiunea fontului: 11px; ) #footer (lățime maximă: 960px; margine: automată; umplutură: 10px 0; înălțime: 90px; )
Containerul cu id=”footer” este situat în interiorul etichetei de subsol, acest lucru ne oferă posibilitatea de a seta o zonă gri pe toată lățimea ecranului prin eticheta de subsol și de a o centra prin div-ul interior cu o lățime maximă de 960 pixeli. Acest div setează, de asemenea, înălțimea ambelor blocuri la 90 de pixeli.
Flux Twitter Așezați conținutul fluxului Twitter:
FEED TWITTER 23 oct
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
Subsol h3 ( font: 14px „Oswald”, sans-serif; culoare: #fff; chenar-jos: 1px solid #919191; margine: 0 0 10px 0; ) #twitter time a ( culoare: #b4aeae; ) subsol p ( margine: 5px 0; ) #twitter ( float: stânga; lățime: 300px; ) #twitter p ( padding-right: 15px; )
Printre punctele interesante aici se numără următoarele: am făcut sublinierea titlului prin chenarul de jos, iar blocul Twitter în sine, precum și blocurile ulterioare, sunt aliniate la stânga și setează lățimea.
Harta site-ului Harta site-ului constă din două blocuri cu link-uri:
HARTA SITE-ULUI Acasă Despre Servicii Parteneri Sprijin Contact
Subsol a ( culoare: #dbdbdb; ) #sitemap ( lățime: 150px; float: stânga; margin-left: 20px; padding-right: 15px; ) #sitemap div ( display: inline-block; ) #sitemap div + div ( margin-left: 40px; ) #sitemap a ( afișare: bloc; text-decoration: niciunul; font-size: 12px; margin-bottom: 5px; ) #sitemap a:hover ( text-decoration: subliniere; )
Legături sociale
Inserarea unui set de link-uri într-un container
REȚELE SOCIALE
Și să le modelăm:
#social ( float: stânga; margin-left: 20px; lățime: 130px; ) .social-pictogramă ( lățime: 30px; înălțime: 30px; fundal: url(../images/social.png) no-repeat; afișare: inline-block; margin-right: 10px; .social-icon-small ( lățime: 16px; înălțime: 16px; fundal: url(../images/social-small.png) no-repeat; display: inline-block ; margin: 5px 6px 0 0 ) .twitter ( background-position: 0 0; ) .facebook ( background-position: -30px 0; ) .google-plus ( background-position: -60px 0; ) .vimeo ( background - poziție: 0 0; .youtube ( poziție de fundal: -16px 0; ) .flickr (poziție de fundal: -32px 0; ) .instagram (poziție de fundal: -48px 0; ) .rss (poziție de fundal: -64px 0;
Aici am folosit tehnica sprite - atunci când un fișier imagine este folosit pentru imagini diferite. Toate linkurile sunt împărțite în pictograme mari (.social-icon) și mici (.social-icon-small). Am setat această clasă să se afișeze sub forma unui bloc inline cu dimensiuni fixe și același fundal. Și apoi folosind css am mutat acest fundal, astfel încât imaginea corespunzătoare să fie afișată pe fiecare link.
Drepturi de autor
Blocul cu drepturi de autor și logo este o imagine cu un link și un paragraf cu text dedesubt.
Copyright 2012 Whitesquare. O creație pcklab
Stilurile sunt făcute similar cu blocurile anterioare, singura diferență fiind că blocul este bătut în cuie pe marginea dreaptă, iar alinierea în interiorul acestuia este tot la dreapta:
#footer-logo (float: dreapta; margin-sus: 20px; font-size: 10px; text-align: right; )
Aceasta încheie munca noastră. Proiectul finalizat poate fi descărcat
În acest articol, vreau să împărtășesc patru moduri diferite de a crea machete cu mai multe coloane. Fiecare metodă are avantajele și dezavantajele sale. Pentru a demonstra modul în care funcționează și arată aceste aspecte, am creat un site simplu care utilizează tabele HTML, proprietatea CSS float, un cadru CSS și Flexbox.
Prima zi de viață nouăÎn acest articol, folosim patru metode diferite de aspect al site-ului web:
- Mesele. Nici măcar nu trebuie să utilizați un fișier de stiluri separat. Și, mai important, nu se sparg.
- Plutește Vorbim despre o proprietate CSS. Aceasta 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 paginii web. Dacă doriți să aliniați conținutul, trebuie să utilizați un fișier CSS.
- cadre CSS. Ele funcționează în același mod ca cadrele JavaScript. Includeți fișierul sursă în antet (de ex. ) și este gata! Nu trebuie să setați singur valorile proprietății. Pentru a face acest lucru, utilizați clasele pe care dezvoltatorii cadru le-au pregătit pentru dvs.
- Flexbox. Flexbox este numele scurt pentru CSS Flexible Box Layout Module. Aceasta este o tehnologie 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 să umpleți cel mai bine tot spațiul liber, trebuie să utilizați Flexbox pentru aspectul div. De exemplu, pentru a acoperi toate tipurile de dispozitive și dimensiunile ecranului. Un container plutitor va extinde elementele pe care le conține pentru a umple întregul ecran.
Acum este timpul să le încerci pe fiecare dintre ele.
Metode de creațieAcesta este designul site-ului meu:
MeselePentru a crea antetul site-ului, am folosit poziția: proprietate relativă. Să încercăm să facem acest lucru de la zero folosind aspectul tabelului.
Iată codul meu HTML:
| 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 amplasarea sa s-a schimbat puțin. Și iată de ce. Știți că mesele sunt grozave pentru poziționarea simetrică. Dar pentru alte scopuri nu sunt atât de bune. De asemenea, acordați atenție caracterului greoi al codului. Dar tabelele au o caracteristică utilă. Iată un truc pe care îl putem face:
tabel, td ( chenar-restrângere: restrângere; chenar: 1px roșu continuu; )
Și veți vedea că aspectul arată astfel:
În acest fel, puteți determina cu ușurință unde se află dacă vă confuzi.
Acum veștile 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. Iată codul meu sursă:
Cinematron
Toate lucrurile pe care trebuie să le știi despre filme
Și fișierul CSS:
#header ( înălțime: 230px; imagine de fundal: url(../images/header1.jpg); background-repeat: fără repetare; font-family: „Shift”, sans-serif; ) #header h2 ( font- dimensiune: 4em; poziție: relativ sus: 30px; afișare: în linie; ; afișare: text-transform: majuscule-dreapta: 14px ) #menu input (font-size: 0.7em; text-transform: text-align: right; top: -4px; )
În acest caz, trebuie să utilizați un aspect bloc al site-ului folosind CSS. Aplicând ceva de genul acesta:
div (poziție: relativ; sus: 100px; stânga: 100px; )
Îi spuneți să se miște cu 100 de pixeli în jos și 100 de pixeli spre dreapta față de poziția inițială. Aceste proprietăți facilitează mutarea textului pe pagină. Îl puteți muta dintr-un colț în altul pentru a determina care este cea mai bună poziție. Este mai bine decât o masă.
PluteșteProprietatea float este utilizată pe scară largă în aspectul site-ului web bazat pe blocuri. 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 multicolore. Verde pentru articolele principale, roșu pentru articolele de știri și albastru pentru subsol.
Ș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; float: stânga ; ) #albastru ( lățime: 310px; înălțime: 100px; chenar: 1px albastru solid; margine: 5px; clar: ambele; )
Și asta este ceea ce avem:
La stratificarea, indicați prin proprietatea float că doriți ca elementul dvs. să plutească. Apoi setați direcția de compensare pentru acesta. Acesta este de obicei float: left sau float: right . Când îi spui unui element să se miște la stânga, acesta va face acest lucru până când nu mai rămâne spațiu.
Următorul element plutitor se va mișca până când îl întâlnește pe primul și așa mai departe. Elementul care urmează celui plutitor va curge în jurul lui ca apa! Dar dacă nu doriți să vă eliberați toate obiectele, puteți utiliza proprietatea clear. Specifică ce laturi ale unui element nu trebuie să se înfășoare î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 știriPrimul articol de știri
Al doilea antet al articolului de știriCorpul celui de-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; )
Avem un bloc mare pentru articole și un bloc mai mic pentru știri. Am folosit proprietatea float: left și pentru imagini. Observați cum sunt împachetate cu o etichetă. Acest aspect arată ca revista ta preferată. Cadre CSS Dacă ești puțin leneș
Dacă nu aveți timp să modificați codul pentru aspectul 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 aranjate 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ă printr-un număr specificat de coloane pe care se întind.
Iată un exemplu:
În acest exemplu, am creat un șir. După aceea, două coloane de dimensiuni egale au fost plasate în el. Fiecare acoperă șase dintre cele douăsprezece coloane disponibile.
Cod HTML:
În curând: 
Și asta am primit:
Arata bine. Și atunci când proiectați un site web din PSD, nici nu trebuie să editați fișierul CSS. Dar nu vezi ce se întâmplă înăuntru. Flexbox Clasici 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 de dolari
- 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 de dolari
Iată codul CSS pentru containerul „boxoffice”:
#boxoffice ( lățime: 780px; înălțime: 500px; imagine de fundal: url(../images/box_office_cropped.jpg); background-repeat: coperta; chenar-rază: 5px; umplutură: 20px; )
Acum este timpul să creați un container flexibil. Pentru a face acest lucru, trebuie să setați afișarea elementului: flex . Conform regulilor de dispunere, toate elementele flexbox sunt situate de-a lungul axelor principale și transversale:
Pentru Flexbox, sunt setate două tipuri de proprietăți. Primul este folosit pentru a gestiona containerul flexibil, al doilea este folosit pentru a umple articolele flexibile. Să aruncăm o privire mai atentă la primul tip.
Implicit, axa principală este orizontală, astfel încât elementele se vor întinde pe rând. Pentru a schimba axa principală putem folosi proprietatea flex-direction. Poate lua următoarele valori: row , row-reverse , column și column-reverse . Vom folosi valoarea coloanei. Să adăugăm și o proprietate de înălțime. Veți înțelege de ce este necesar acest lucru puțin mai târziu:
container flex (înălțime: 300px; 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 modifica valoarea direcției flexibile la coloane-inversare . Acest lucru va inversa direcția flexbox-ului. Dar va trebui și să schimbați ordinea elementelor din interiorul containerului.
Pentru a face acest lucru, folosim proprietatea justify-content. Valorile disponibile pentru acesta sunt flex-start , flex-end , center , space-between și space-around . Trebuie setat la justify-content , 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 așa s-au reflectat 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 flexbox:
Flex-container ( alinierea elementelor: flex-end; )
Toate elementele se vor muta la marginea dreaptă:
Există o altă proprietate utilă - flex-wrap. Imaginați-vă că box office-ul se extinde rapid. Ce se întâmplă dacă devine mai mare decât recipientul? Nimic în neregulă dacă utilizați proprietatea flex-wrap.
Încercați să adăugați următorul cod.
Toate șabloanele prezentate pentru site-ul dvs. sunt construite pe versiuni moderne de HTML5 și CSS3. În plus, autorii folosesc astfel de caracteristici la modă precum design plat, design responsive, layout adaptiv, 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. Frumoase șabloane html5 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 atât pentru site-uri noi, cât și pentru reproiectarea celor existente. Șabloanele elegante de site-uri html5 sunt ceea ce aveți nevoie!
Actualizat 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 pentru dispozitivele mobile. Îl poți folosi chiar și ca bază pentru propriile șabloane.
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 eficientă, fonturile sunt curate și ușor de citit. Doar șablonul perfect!
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!
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.
Designul proaspăt și elegant al șablonului de site este cel mai potrivit pentru toate tipurile de site-uri web de modă care vând pantofi, haine, ceasuri, accesorii, îmbrăcăminte sport etc. Vine cu un fișier PSD pe care îl puteți ajusta în funcție de nevoile dvs.
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.
Ș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.
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.
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.
Bent este un șablon excelent de site web gratuit în 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 în mod clar conținutul de bază.
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.
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 un blog personal, un blog despre călătorii, creativitate etc. Mulți oameni le va plăcea designul creativ și aspectul adaptiv al șablonului.
Bodo este un șablon frumos de site web HTML5 și CSS3, care este ideal pentru un site web personal. Mai ales pentru organizarea unui portofoliu. Tipografie curată și clară, glisor carusel, ferestre pop-up pentru afișarea lucrărilor și multe altele.
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.
Dacă sunteți în căutarea unor șabloane gratuite pentru site-uri web pe tema auto, atunci Spectral va fi soluția perfectă. Iată un design de șablon de site web cu o pagină complet unic, realizat manual. 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.
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 despre aplicații mobile sau tehnologie mobilă.
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 layout-uri prefabricate pentru pagina de pornire și blog vă vor ajuta în acest sens. Mobirise Bootstrap este, de asemenea, 100% optimizat SEO și se adaptează la orice dimensiune de ecran.
Ș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.
Șablon de site web stilat și animat HTML5 și CSS3 pentru organizarea unui portofoliu. Design curat, tipografie excelentă, pictograme frumoase și multe altele.
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.
Ș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.
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.
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.
E-Shopper este o opțiune excelentă pentru un șablon de site de comerț electronic. Construit pe bootstrap, cu un set uimitor de caracteristici pentru un magazin online complet și eficient.
Un șablon HTML5 și CSS3 absolut uimitor pentru crearea unui site web foto sau portofoliu pentru un designer, ilustrator sau artist. Acest șablon duce bara de șabloane profesionale la următorul nivel! Design receptiv, suport excelent pentru toate tipurile de dispozitive de afișare, navigare ușoară și convenabilă și multe altele.
Designul plat al acestui șablon de site minimalist este perfect pentru crearea unui portofoliu. În șablon, toate detaliile sunt verificate perfect!
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.
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.
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.
Acest șablon de site unic și foarte frumos cu efect de paralaxă nu va lăsa pe nimeni indiferent. Șablonul de o pagină este construit pe HTML5 și CSS3 pur, cu aspect receptiv, fundaluri impresionante, suport pentru rețelele sociale și multe altele.
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.
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.
Mamba One este un exemplu de șablon de site web simplu, dar elegant, pentru crearea unei pagini cu o singură pagină. Compatibil cu toate browserele moderne și va fi afișat în mod adecvat peste tot.
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.
După cum sugerează și numele, acest minunat șablon de site nu este doar ideal pentru paginile de destinație, ci îndeplinește și noile tendințe mobile, în special în ceea ce privește claritatea afișajului pe dispozitivele cu ecrane Retina.
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 Retina).
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ă.
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.
Acest șablon de site unic pur HTML5 și CSS3 este perfect pentru orice persoană creativă. Este complet receptiv și complet gratuit.
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 receptiv și detalii impresionante ale șablonului. Totul funcționează pentru tine!
Acest șablon uimitor de site web 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 dispozitive mobile.
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ă!
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.
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.
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.
Proaspăt și curat, frumos și funcțional, șablon de site web nou î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).
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.
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ă.
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.
Ș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, 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 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.
Aspectul paginii 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țiuniPentru 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.
Elementele , și sunt la nivel de bloc, așa că vor ocupa întreaga lățime a blocului lor container, . O pagină cu acest aspect va arăta bine pe ecranele mici, dar pe dispozitivele de înaltă rezoluție textul de pe 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:
Orez. 2. Secțiunile principale ale paginii cu o etichetă de container ș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 în acest caz este virtuală, deoarece fără conținut secțiunile au înălțime zero).
2. Aspectul antetului site-ului și poziționarea elementelor acestuiaSă începem să marcam prima secțiune, așa-numitul antet al paginii web. Elementul este conceput pentru a grupa informații introductive și ajutoare de navigare pe o pagină/site. Să adăugăm sigla site-ului și link-urile de navigare în interiorul etichetei:
LOGO
- Acasă
- Despre noi
- Contacte
Orez. 3. Antetul site-ului cu logo și linkuri adăugateLogo ( 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.
Orez. 4. Efectul prăbușirii blocului containerului 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 atât elementul, cât și elementul din interiorul acestuia cu clasa .container s-au 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; )
De asemenea, îi vom adăuga căptușeală verticală, 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; ) 
Orez. 5. Curățarea fluxului
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 problema alinierii verticale a elementelor antetului.
Orez. 6. Imagine logo Î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 paginiiPartea 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:
Orez. 7. Grila părții principale a paginii.col-1-2 ( lățime: 50%; float: stânga; ) .col-1-3 ( lățime: 33.3333333333%; float: stânga; ) .col-1-4 ( lățime: 25 %; float: stânga; .col-2-3 ( lățime: 66,6666666667%; float: stânga; )
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ă:
Orez. 8. Înălțimi diferite ale elementelor de grilă Î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; )
Orez. 9. Mat de fundal
Dacă secțiunea principală a paginii conține doar două blocuri, atunci rândul suplimentar de înveliș nu trebuie 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.
- Cum să obțineți monede MacBain pe harta resurselor Icarus - toate locațiile din Icarus
- Citeste si...
- Captură de ecran cu trei degete miui
