Web izgledi. Šabloni zasnovani na premotavanju

Svi predstavljeni predlošci za Vašu web stranicu su izgrađeni moderne verzije HTML5 i CSS3. Osim toga, autori koriste takve trendovske značajke kao što su ravni dizajn, responsive dizajn, responsive layout, jQuery klizači, CSS3 animacija, itd. To jest, ako tražite predložak za mobilne stranice, možete odabrati bilo koji od predstavljenih. Prekrasni html5 šabloni 2017 iako besplatni, izgledaju premium.

Ovdje ćete pronaći više od 50 besplatnih visokokvalitetnih responzivnih web šablona u HTML5 i CSS3, koji se mogu koristiti za nove web stranice kao i za redizajn postojećih. Elegantni html5 predlošci web stranica- to ti treba!

Ažurirano 03.12.2019: Od kada je članak napisan prije 2 godine, mnogi linkovi su pokvareni. Ili su se vlasnici šablona spojili, ili promijenili status šablona iz besplatnih u plaćeni, ili su vanzemaljci izgubili sve. Molimo vas, dragi čitaoci, ako pronađete takav link, postavite ga u komentarima, ispraviću ga.

1. Snijeg - besplatni HTML5 i CSS3 predložak odredišne ​​stranice

Sniježna odredišna stranica html5 css3 šablon je izgrađen na Bootstrap frameworku. Šablon je vrlo moderan i cool! Fiksna pozadina i ogroman Jumbotron je ono što prikazuje glavni sadržaj stranice. Šta je najvažnija stvar na odredišnoj stranici? Tako je, poziv na akciju. Naravno, šablon je u potpunosti prilagođen za mobilnih uređaja... Možete ga čak koristiti kao osnovu za svoje vlastite šablone.

2. Sima - šik komercijalni šablon za web stranicu

Ovaj html5 css3 šablon je takođe izgrađen na Bootstrap okviru. Pomoću ovog predloška možete kreirati jedinstvenu web stranicu s portfoliom, svojim timom, cijenama, recenzijama i svime što vam je potrebno. Na primjer, ovaj predložak je savršen za web stranicu usluge čišćenja. Animacije u ovom predlošku su fluidne i privlačne, sa čistim i čitljivim fontovima. Samo savršen šablon!

3. Bijela je odličan šablon za jednu stranicu!

Karakteristična karakteristika bijelog predloška web stranice su dvije opcije pozadine na vrhu. Možete odabrati ili klizač sa slikama ili video pozadinu. Veoma kvalitetan i efikasan šablon za sajt!

4. Platz - Besplatni HTML5 šablon web stranice zasnovan na mreži

Moderan, vizualno privlačan HTML5 šablon web stranice zasnovan na mreži (pročitajte više o mreži). Prekrasan i responzivan dizajn bloga ili web stranice.

5. Mart eCommerce - Prekrasan HTML5 & CSS3 eCommerce Website Template

Svjež i moderan dizajn predloška web stranice najbolji je za sve vrste modnih web stranica koje prodaju cipele, odjeću, satove, dodatke, sportsku odjeću i još mnogo toga. dolazi sa PSD fajl koje možete prilagoditi svojim potrebama.

6. Nava - učinkovit HTML5 & CSS3 predložak za kreativne web stranice

Nava je moderan HTML5 predložak web stranice koji se uglavnom koristi za kreativne profesionalce koji žele pokazati svoj rad u punom sjaju. Mnogo varijacija u postavkama šablona omogućava vam da svoju web stranicu učinite jedinstvenom. Lagan, lijep i responsive template za sajt.

7. Box Portfolio - jedinstveni kreativni predložak web stranice u HTML5 i CSS3

Predložak web stranice Box Portfolio ima čist i moderan minimalistički dizajn. Savršeno za profesionalce koji žele efikasno da prikažu svoj rad na mreži. Kao što ime sugerira, predložak web stranice savršeno je skrojen za portfolio.

8. Mountain King - popularan i funkcionalan HTML5 i CSS3 predložak web stranice

Tema planine u dizajnu web stranica je vrlo popularna u posljednje vrijeme. Predložak web stranice Mountain King nije izuzetak. Uključuje 336 vektorskih ikona iz Typicons. Plus odlične CSS3 animacije. Predložak je savršen za web stranice za putovanja i portfolio.

9. Beauty Spa - Cool HTML5 & CSS3 Spa Website Template

Beauty Spa je responzivni predložak web stranice prepun mnogih funkcija savršenih za web lokacije spa, wellness ili fitnes centara, web stranice za jogu, pa čak i za frizerske web stranice. Odlična čitljivost fontova i nenametljiv minimalizam.

10. Bent - elegantna i efikasna odredišna stranica za sajtove u HTML5 i CSS3

Bent je odličan besplatni šablon stranica u html5 i css3. Responsivan dizajn, CSS3 animacije, paralaksno skrolovanje, prilagodljiva navigacija i druge dobrote. Ovo je predložak čistog dizajna za web lokacije koje žele koristiti uravnotežen dizajn kako bi osigurali da posjetitelji uživaju u izgledu web-mjesta dok i dalje jasno vide glavni sadržaj.

11. Triangle je besplatni responzivni višenamjenski predložak u HTML5 i CSS3

Triangle je ekskluzivni kreativni HTML5 i CSS3 predložak web stranice posebno za one koji žele svoj cool dizajn pokrenuti i pokrenuti bez da ga pogoršaju. Predložak ima preko 40 unaprijed dizajniranih stranica koje vam omogućavaju da prilagodite svoju web stranicu kako god želite.

12. Future Imperfect - sjajan predložak web stranice za kreativne ljude!

Doživite pravi osjećaj zabave uz ovaj predložak web stranice savršen za pisce, autore, autore tekstova i druge radnike na olovkama i papiru. Šablon se može koristiti i za lični blog, blog o putovanjima, o kreativnosti itd. Kreativni dizajn i responzivni izgled šablona će se svidjeti mnogima.

13. Bodo je odličan šablon za ličnu web stranicu

Bodo - prelep šablon sajt u HTML5 i CSS3, što je idealno za ličnu stranicu. Posebno za organizaciju portfelja. Čista i oštra tipografija, klizač vrtuljka, iskačući prozori popup prozori za izlaganje radova i još mnogo toga.

14. Objektiv - savršen HTML5 predložak web stranice za fotografe

Fotografi su uvijek u potrazi za savršenim predloškom za svoju web stranicu kako bi prikazali svoj rad u punom sjaju, spektakularno i što je najvažnije - veliko! Rijetki predložak stranice ispunjava ove zahtjeve. Objektiv je jedan takav predložak web stranice za fotografije.

15. Spectral - jedinstveni ručno rađeni web šabloni u HTML5 i CSS3

Ako tražite besplatni šabloni za auto sajtove tada će Spectral biti idealno rešenje... Ovdje apsolutno jedinstven dizajn predložak web stranice na jednoj stranici self made... Dizajn se može mijenjati po vlastitom nahođenju. Ovaj predložak se može koristiti za kreiranje zapanjujuće web stranice o apsolutno bilo kojoj temi, bilo da je to impresivan blog o putovanjima ili galerija fotografija, automobilska web stranica ili hosting provajder.

16.Oxygen - One Page HTML5 & CSS3 Website Template

Kiseonik je zgodan i jedinstveni šablon za poslovni sajt. Moderan ravan dizajn, prilagodljiv raspored. Na primjer, ovaj predložak je savršen za web stranicu o mobilnim aplikacijama ili mobilnoj tehnologiji.

17. Mobirise Bootstrap - Najbolji besplatni HTML5 i CSS3 predložak web stranice

Ako tražite besplatni predložak za web stranicu, onda je Mobirise Bootstrap savršeno mjesto za početak. Ovo je multifunkcionalni predložak s mnoštvom dodataka. Tri gotova izgleda početna stranica a blog će vam pomoći u tome. Mobirise Bootstrap je također 100% SEO optimiziran i odgovara na bilo koju veličinu ekrana.

18. La Casa - prekrasan i besplatan HTML5 predložak za web stranicu za nekretnine

Predložak Brandy savršen je za organiziranje web stranice za komercijalne nekretnine. Odgovarajući i vrlo lijep dizajn će se svidjeti ne samo vlasniku stranice, već i posjetiteljima.

19. Drifolio - Moderan HTML5 Portfolio Website Template

Moderan i animirani HTML5 i CSS3 portfolio predložak web stranice. Čisti dizajni, odlična tipografija, prekrasne ikone i još mnogo toga.

20. Pluton - svijetao i moderan šablon za web stranicu na jednoj stranici

Pluton je svijetao i efektan Bootstrap predložak web stranice. Moderan predložak web stranice, sa svojim jedinstvenim izgledom na jednoj stranici i responzivnim dizajnom, koji je odličan za studije, fotografe i kreativne dizajnere.

21. SquadFree - profesionalni HTML5 jednostrani predložak web stranice

Predložak SquadFree savršen je za kreiranje komercijalne web stranice na jednoj stranici. Šablon izgleda ne samo profesionalno, već i prilagođen za sve vrste ekrana. Šablon je napravljen na bazi Bootstrapa.

22. Sublime - očaravajući HTML5 i CSS3 predložak web stranice

Sublime je čist i zapanjujuće lijep HTML5 i CSS3 predložak web stranice savršen za startup, kreativnu agenciju ili web lokaciju za portfolio. Responzivni dizajn i dvije opcije stranica koje možete izabrati.

23. Drvo - neobičan i lijep HTML5 i CSS3 šablon web stranice

Timber je svježa, elegantna i neobična tema predloška web stranice na jednoj stranici. dijagonala - glavna karakteristika dizajn ovog šablona. Šablon je savršen za poslovnu web stranicu ili portfolio. Ugrađena je galerija, mapa i Kontakt informacije koju možete lako prilagoditi sebi.

24. E-Shopper - Najbolji predložak web stranice za e-trgovinu

E-Shopper je odlična opcija za predložak web stranice za e-trgovinu. Izgrađen na baziran na bootstrapu sa neverovatnim skupom funkcija za kompletnu i efektivnu internet prodavnicu.

25. Magnetic - Besplatni HTML5 & CSS3 Photo Website Template

Apsolutno zadivljujući HTML5 i CSS3 predložak za kreiranje web stranice ili portfelja za fotografije za dizajnera, ilustratora ili umjetnika. Ovaj predložak podiže ljestvicu profesionalnih predložaka novi nivo! Odgovarajući dizajn, odlična podrška za sve vrste uređaja za prikaz, laka i praktična navigacija i još mnogo toga.

26. Mabur Portfolio - prekrasan minimalistički predložak web stranice u HTML5 i CSS3

Ravni dizajn ovog minimalističkog predloška web stranice savršen je za izradu portfelja. U šablonu su svi detalji savršeno provjereni!

27. Modern Bootstrap HTML5 - besplatni jednostrani predložak web stranice

Ovaj besplatni jednostrani Bootstrap okvir savršen je za korporativne web stranice, male i velike. Ravni dizajn, responzivni raspored, svi elementi visokog kvaliteta. Šablon je dostupan u 4 različite boje.

28. Infuzija - moderan predložak web stranice na jednoj stranici u HTML5 i CSS3

Infusion je odličan primjer HTML5 i CSS3 predloška web stranice posebno dizajniranog za izgradnju poslovnog portfelja. Bogata funkcionalnost ovog šablona omogućava vam da efikasno radite sa klijentima i privučete nove.

29. Yebo - šablon korporativnog sajta u HTML5 i CSS3

Ovaj visokokvalitetni predložak web stranice ravnog stila savršen je za bilo koju korporativnu web stranicu. Responsibilan dizajn, puno mogućnosti prilagođavanja i uređivanja.

30. Twenty - Spektakularni HTML5 & CSS3 Parallax Website Template

Ovaj jedinstveni i vrlo lijep paralaks web šablon nikoga neće ostaviti ravnodušnim. Šablon za jednu stranicu ugrađen u čisti HTML5 i CSS3 sa adaptivni raspored, impresivne pozadine, podrška društvenim medijima itd.

31. Urbanic - Sjajan HTML5 & CSS3 Bootstrap Website Template

Urbanic je svjež i cool HTML5 i CSS3 predložak web stranice napravljen sa Bootstrap motorom. Odlično je da odmah počnete graditi svoju web stranicu bez posebne probleme... Šablon je savršeno prilagođen bilo kojoj veličini ekrana.

32. Design Showcase - HTML5 Portfolio Website Template

Vizuelno harmoničan i efikasan HTML5 predložak web stranice za organiziranje vašeg portfelja. Šablon je savršeno prilagođen mobilnim uređajima, što je vrlo teško za stranice ovog formata.

33. Mamba One - jednostavan i moderan web šablon u HTML5 i CSS3

Mamba One je primjer jednostavnog, ali elegantnog predloška web stranice na jednoj stranici. Kompatibilan sa svim modernim pretraživačima i svuda će biti adekvatno prikazan.

34. KreativePixel - Besplatna web stranica za fotografe

Još jedan sjajan predložak web stranice za fotografe. Odgovarajući dizajn i vrlo zgodno razvrstavanje fotografija u portfelje i galerije dopasti će se mnogim ljubiteljima fotografije. Šablon takođe koristi efekat paralakse, koji takođe impresionira gledaoce prilikom gledanja fotografija.

35. Retina Ready Responsive App - besplatni HTML5 & CSS3 predložak odredišne ​​stranice

Kao što ime sugerira, ovaj sjajni predložak web stranice nije samo savršeno skrojen za odredišne ​​stranice, već odgovara i novim mobilnim trendovima, posebno u pogledu jasnoće prikaza na uređajima s Retina ekranima.

36. Brushed - Responsive HTML5 & CSS3 Website Template Powered by Bootstrap

Brushed je brzi, besplatni HTML5 i CSS3 predložak web stranice koji pokreće Bootstrap. Također optimiziran za Retina displeji(iPhone, iPad, IPod touch i MacBook Pro Retina).

37.Big Picture HTML5 & CSS3 Website Template

Dobrodošli u Big Picture! Ovo responsive template HTML5 stranica je savršena za sve kreativne ljude koji imaju šta da pokažu i pokažu na veliko i efektno na svojoj stranici. Osim toga, predložak ima odličnu animaciju.

38. Tesselatte - besplatni responzivni HTML5 & CSS3 predložak

Jednostavan šablon na jednoj stranici koji uzima sve u obzir neophodni alati za uspješno osnivanje site. Idealno za lični blog pisca, copywritera i samo ljubitelja štampane reči.

39. Overflow - jedinstveni predložak web stranice u HTML5 i CSS3

Ovaj jedinstveni predložak web stranice u čistom HTML5 i CSS3 savršen je za svaku kreativnu osobu. Potpuno je prilagodljiv i potpuno besplatan.

40. Runkeeper - responzivan i vrlo lijep web šablon

Runkeeper je besplatan, responzivan i vrlo lijep predložak web stranice. Može se koristiti za bilo koju stranicu. Briljantan stil i oštri fontovi, adaptivni dizajn i impresivne detalje šablona. Sve radi za vas!

41. Pinball Responsive Grid Style - Sjajan šablon web stranice zasnovan na mreži

Ovaj sjajan, profesionalni mrežni predložak web stranice savršen je za korporativnu web stranicu. Moderan ravni dizajn i responzivna struktura predloška savršeno se prikazuju i na velikim monitorima i na mobilnim ekranima.

42. Prolog - čisti HTML5 i CSS3 jednostrani šablon web stranice

Ovaj čist, jednostavan i jasan HTML5 i CSS3 predložak web stranice savršen je za izgradnju vaše odredišne ​​stranice. Minimalistički dizajn ne odvlači pažnju od glavne stvari. Privlačna navigacija na bočnoj traci i oštri redovi stranica savršena su kombinacija!

43. Helios - moderan šablon web stranice u čistom HTML5 i CSS3

Još jedan predložak web stranice u stilu minimalizma i čistih formi. Posebno dizajniran da iskoristi prednosti velikih ekrana, ali i savršeno prilagođen malim ekranima mobilnih uređaja.

44. Telephasic - besplatni i responzivni HTML5 predložak web stranice

Ovaj moderan, prilagodljiv i potpuno besplatan predložak web stranice ima jedan velika prednost- jednostavan je i lakonski, ali upravo to mnogima nedostaje.

45. Strongly Typed - vrlo lijep polu-retro predložak web stranice

Novi predložak web stranice sa minimalističkim poluretro stilom. Samo što retro više nije u modi, ali lagani nagovještaj toga je od velike pomoći. Ovaj predložak web stranice je u potpunosti prilagodljiv, napravljen sa čistim HTML5 i CSS3 i uključuje sve bitne elemente stranice koji su vam potrebni. Strongly Typed je savršen za kreativne web stranice. Na primjer, za web stranicu za uređenje doma.

46. ​​Striped - čist, lijep i funkcionalan HTML5 i CSS3 predložak web stranice

Svježe i čisto, lijepo i funkcionalno, novi šablon stranica u HTML5 i CSS3. U svom arsenalu ima sve potrebne elemente stranice, uključujući dizajnirane citate, tabele i liste, kao i prilagođenu bočnu traku (desno ili lijevo - po želji).

47. Paralelizam - neobičan i moderan web šablon u HTML5 i CSS3

Paralelizam je moderan predložak web stranice za organiziranje portfelja ili fotografija. Njegova posebnost je u tome što pomicanje ovdje nije okomito, kao i obično, već horizontalno. Ovo stranici daje poseban šik i nezaboravan.

48. Miniport - Potpuno responzivni HTML5 Website Template u minimalističkom stilu

Sjajan minimalistički HTML5 predložak web stranice. Savršeno za ličnu web stranicu/blog i malu korporativnu web stranicu na jednoj stranici ili kao web stranicu za vizit karte.

49. Verti - prostran i besplatni responzivni HTML5 predložak web stranice

Čist i prostran dizajn ovog predloška web stranice savršen je za male korporativne web stranice ili komercijalne projekte. Prilagodljiv i jednostavan za korištenje i za autora i za korisnike.

50. ZeroFour - Impresivan i moderan HTML5 i CSS3 predložak web stranice

I posljednji na listi, ali ne i posljednji po kvaliteti i vizualnom učinku, predložak stranice - ZeroFour. Moderan dizajn, veoma lep meni, savršeno prilagođene forme i dugmad, prelepe ikone i još mnogo toga. I sve ovo je potpuno besplatno!

Nadam se da ste pronašli nešto prikladno za sebe među ovim sjajnim HTML5 i CSS3 predlošcima za web stranice. Sretno!

Označite za kasnije brzo pronalaženje.

PS: Ako ne možete da se odlučite, pročitajte članak "Ne znam šta želim". Biće od pomoći.

U ovom članku želim pokriti četiri različita načina za kreiranje rasporeda sa više kolona. Svaka metoda ima svoje prednosti i nedostatke. Da bih pokazao kako ovi izgledi rade i izgledaju, kreirao sam jednostavnu stranicu koja koristi HTML tabele, CSS float svojstvo, CSS framework i flexbox.

Prvi dan novog života

U ovom članku koristimo četiri različite metode izgleda web stranice:

• Stolovi. Ne morate čak ni koristiti poseban fajl stilova. I što je još važnije, ne lome se.
• Float. Govorimo o CSS svojstvu. Ovo je prilično uobičajen način za kreiranje izgleda web stranice. I u ovom slučaju, morat ćemo koristiti posebnu tablicu stilova. HTML datoteka se koristi samo za definiranje sadržaja web stranice. Ako želite uskladiti sadržaj, morate koristiti CSS fajl.
• CSS okviri. Oni rade na isti način kao JavaScript okviri... Uključite izvorni fajl u zaglavlje (na primjer, ) i spremno je za rad! Ne morate sami postavljati vrijednosti svojstva. Za to se koriste klase koje su programeri okvira pripremili za vas.
• Flexbox. Flexbox je kratak naziv CSS fleksibilni modul izgleda kutije... Ova tehnologija je novija u odnosu na float svojstvo. Osnovni princip flexbox-a je dati kontejneru mogućnost promjene širine, visine i redoslijeda elemenata koji sadrži. Ako želite najbolje moguće popunite sve slobodan prostor, treba koristiti za div rasporedi flexbox. Na primjer, za pokrivanje svih vrsta uređaja i veličina ekrana. Plutajući kontejner će proširiti sadržane stavke da popuni cijeli ekran.

Sada je vrijeme da isprobate svaki od njih.

Metode stvaranja

Ovo je dizajn moje stranice:

Stolovi

Da kreiram zaglavlje stranice, koristio sam poziciju: relativno svojstvo. Pokušajmo to učiniti od nule koristeći raspored tabele.

Evo mog HTML-a:

I evo šta sam dobio:

tablica, td (border-collapse: kolaps; granica: 1px puna crvena;)

I vidjet ćete da izgled izgleda ovako:

Sad loše vijesti... Još jednom pogledajte HTML kod. Ovo je jednostavna tabela, ali zamislite kako bi izgledala sa desetinama ćelija. To je to izvor Imam:

I CSS fajl:

#header (visina: 230px; background-image: url (../ images / header1.jpg); background-repeat: no-repeat; font-family: "Shift", sans-serif;) #header h2 (font- veličina: 4em; pozicija: relativna; vrh: 30px; lijevo: 550px; prikaz: inline;) #header p (veličina fonta: 1,3em; težina fonta: bold; pozicija: relativna; vrh: 50px; lijevo: 60px; display: inline) #menu (pozicija: relativna; vrh: 100px; lijevo: 340px; display: inline-block;) #menu li (font-weight: bold; display: inline; text-transform: uppercase; margin-right: 14px;) #unos u meni (veličina fonta: 0,7em; transformacija teksta: mala slova; poravnanje teksta: desno; pozicija: relativna; vrh: -4px;)

U ovom slučaju morate koristiti blok izgled stranice sa koristeći CSS... Primjenom nečeg ovako:

div (pozicija: relativna; vrh: 100px; lijevo: 100px;)

Naznačite da se krećete

dole 100 piksela i desno 100 piksela od prvobitne pozicije. Ova svojstva olakšavaju premještanje teksta po stranici. Možete ga pomicati iz jednog ugla u drugi kako biste odredili koji je položaj najbolji. Bolje je od stola.

Float

Svojstvo float se naširoko koristi u blok rasporedu stranice. Koristit ćemo ovo svojstvo za prikaz glavnog područja sadržaja. Mali primjer će vam pomoći da bolje shvatite kako to funkcionira:

Ima tri elementa različitih boja

... Zelena za glavne članke, crvena za novinske članke, a plava za podnožje.

A evo i CSS fajla:

#zeleno (širina: 200px; visina: 200px; granica: 1px puna zelena; float: lijevo; margina: 5px;) #crvena (širina: 100px; visina: 200px; granica: 1px puna crvena; margina: 5px; float: lijevo ;) #plava (širina: 310px; visina: 100px; ivica: 1px puna plava; margina: 5px; čista: oba;)

A evo šta smo dobili:

Prilikom postavljanja u slojeve, kroz svojstvo float specificirate koje želite da vaš element

plutao. Zatim postavite smjer pomaka za to. Ovo je obično float: lijevo ili float: desno. Kada pokažete na element

pomaknite se ulijevo, on će to raditi dok ne ponestane slobodnog prostora.

Sljedeći plovak će se kretati sve dok ne naiđe na prvi i tako dalje. Element pored plutajućeg elementa će teći oko njega poput vode! Ali ako ne želite sve svoje objekte lansirati "na vodu", možete koristiti čista imovina... Određuje koje strane elementa ne bi trebalo da teče oko plutajućih elemenata.

Ovako izgleda dio mog izgleda za glavni sadržaj:

Zaglavlje prvog članka

Tijelo prvog članka Pročitajte više

Zaglavlje drugog članka

Tijelo drugog članka Pročitajte više

Zaglavlje prvog vijesti

Tijelo prve vijesti

Zaglavlje drugog vijesti

Tijelo drugog članka vijesti

Sada neka lebdi:

# main-content (širina: 780px; float: lijevo;) #news (margin-left: 20px; float: lijevo; širina: 180px;)

Imamo veliki blok za članke i manji blok za vijesti. Koristili smo svojstvo float: left i za slike. Obratite pažnju na to kako se oznaka omota oko njih. Ovaj izgled izgleda kao vaš omiljeni časopis.

CSS okviri

Ako ste malo lijeni

Ako nemate vremena da se petljate sa kodom kada CSS izgled, možete koristiti jedan od CSS okvira. U našem primjeru koristimo Bootstrap. Da biste to učinili, morate ga preuzeti i uključiti u HTML datoteku.

Bootstrap sadrži mrežu koja se sastoji od 12 kolona jednake veličine. HTML elementi su uređeni tako da obuhvataju različit broj kolona. Na ovaj način se kreiraju prilagođeni izgledi. Svaki dio sadržaja je poravnat s ovom mrežom kroz određeni broj kolona da bi se razvukao.

Evo primjera:

U ovom primjeru kreirali smo string. Nakon toga smo u njega postavili dva stuba jednake veličine. Svaki od njih pokriva šest od dvanaest dostupnih kolona.

HTML kod:

Uskoro dolazi:

I evo šta sam dobio:

Izgleda dobro. A kada kodirate web stranicu iz PSD-a, ne morate čak ni uređivati ​​CSS datoteku. Ali ne vidite šta se dešava unutra.

Flexbox

Klasici sutrašnjice

Koristićemo flexbox da kreiramo odeljak „Box Office“ na sajtu. Evo HTML-a:

• Pepeljuga: 67,9 miliona dolara
• Trčanje cijele noći: 11,0 miliona dolara
• Kingsman: Tajna služba: 6,2 miliona dolara
• Fokus: 5,7 miliona dolara
• Chappie: 5,7 miliona dolara
• McFarland SAD: 3,6 miliona dolara
• DUFF: 2,9 miliona dolara
• Američki snajperista: 2,8 miliona dolara

Evo CSS-a za “boxoffice” kontejner:

#boxoffice (širina: 780px; visina: 500px; background-image: url (../ images / box_office_cropped.jpg); background-repeat: cover; border-radius: 5px; padding: 20px;)

Sada je vrijeme da kreirate flex kontejner. Da biste to učinili, postavite element na display: flex. Prema pravilima rasporeda, svi flexbox elementi se nalaze duž glavne i poprečne ose:

Za flexbox postoje dvije vrste svojstava. Prvi se koristi za kontrolu flex kontejnera, drugi se koristi za punjenje flex stavki. Razmotrimo prvi tip detaljnije.

Podrazumevano, glavna os je horizontalna, tako da će se elementi protezati u nizu. Možemo koristiti svojstvo flex-direction da promijenimo glavnu os. Može poprimiti sljedeće vrijednosti: red, red-obrnuti, stupac i stupac-obrnut. Koristit ćemo kolonu vrijednosti. Dodajmo i svojstvo visine. Čemu ovo služi, shvatit ćete malo kasnije:

flex-container (visina: 300px; display: flex; flex-direction: column;)

Ovako izgleda naša mala blagajna:

Koristili smo svojstvo visine jer ne želimo da flexbox kontejner preklapa sliku sa strelicom na dnu pozadine.

Flexbox vam također daje mogućnost da unosite izmjene u sadržaj bez modifikacije HTML datoteke. Na primjer, ako želite obrnuti raspored stavki, možete promijeniti smjer flex-a u kolone-obrnuti. Ovo će obrnuti smjer flexboxa. Ali također ćete morati promijeniti redoslijed stavki unutar kontejnera.

Za ovo koristimo svojstvo justify-content. Dostupne vrijednosti za njega su flex-start, flex-end, center, space-between i space-around. Treba ga postaviti na justify-content, što je ekvivalentno flex-endu.

Evo našeg koda:

Flex-container (visina: 300px; prikaz: flex; flex-direction: column-reverse; justify-content: flex-end;)

A evo kako su se ove promjene odrazile:

Također možete pomicati elemente duž poprečne ose. Za ovo se koristi svojstvo align-items. Možete ga postaviti na sljedeće vrijednosti: flex-start, flex-end, center, baseline ili stretch.

Da biste ga koristili, dodajte svojstvo svom flexbox selektoru:

Flex-kontejner (align-items: flex-end;)

Svi elementi će se pomeriti na desnu ivicu:

Još jedno korisno svojstvo je flex-wrap. Zamislite da blagajna brzo raste. Šta se dešava ako postane veći od kontejnera? Nema ništa loše u korištenju svojstva flex-wrap.

Pokušajte dodati sljedeći kod:

Flex-container (visina: 300px; prikaz: flex; flex-direction: stupac; flex-wrap: wrap;)

A evo kakav će biti rezultat:

Kao što vidite, stavke su sada naslagane u više kolona. Zadana vrijednost za ovo svojstvo je nowrap. Kada se primjene, elementi će biti raspoređeni u jednu kolonu ( ili string - zavisi od vrijednosti flex-directiona). Može se koristiti vrijednost wrap-reverse. Tada će elementi biti raspoređeni obrnutim redoslijedom.

Ima ih mnogo korisna svojstva... Uz njihovu pomoć možete promijeniti parametre svakog pojedinačnog elementa kontejnera. Na primjer, svojstvo order vam omogućava da promijenite redoslijed postavljanja elemenata bez potrebe za promjenama u HTML kodu.

Koji način odabrati?

Stolovi. Tabele se ne koriste u važećem izgledu stranice. Oni čine šifru neurednim. Tabele nisu tako jednostavne za upotrebu kao što se čini. Ako još uvijek niste sami odlučili da li ćete koristiti tabele za izgled stranice, onda pogledajte ovu stranicu.

Ali mogu biti korisni kada je u pitanju izgled e-pošte. Ne postoji toliko mnogo pretraživača koje ljudi koriste ovih dana, ali poštanski agenti jednostavno velika količina... Stacionarni, online i mobilne aplikacije koristite različite mašine za renderovanje. HTML tabele izgledaju isto u svim. Zbog toga je odlična opcija za kucanje e-pošte.

Float. Svojstvo float je najbolji izbor ako vaši zahtjevi nisu previsoki. Ovo je jednostavan način da svoju web stranicu učinite privlačnijom. Njegova upotreba za slike je, po mom mišljenju, znak dobre forme. Samo zapamtite kako funkcionišu svojstva float i clear. Ovo je dovoljno da počnete.

Kada govorimo o njegovim nedostacima, moramo priznati da su plutajući elementi usidreni za tok dokumenta, a to može značajno smanjiti njegovu fleksibilnost.

CSS okviri. Ako trebate brzo kreirati raspored, koristite okvire. Danas ih ima mnogo. Među njima izaberite onaj koji vam najviše odgovara.

Flexbox. Trebat će neko vrijeme da saznate kako funkcionira. Mislim da ste već shvatili koliko su flexboxovi praktični za upravljanje pojedinačnim elementima.

Loše

Izgled stranice je proces razvoja strukture html dokumenta čiji je rezultat web stranica. Struktura web stranice određena je odgovarajućim html tagovima. Oznake - pravougaone kutije za sadržaj - se ne pojavljuju u prozoru pretraživača. Oni govore pretraživaču o vrsti sadržaja, a pretraživač na osnovu tih informacija prikazuje njihov sadržaj na ekranu – tekstualne ili medijske datoteke.

Kako kreirati strukturu stranice koristeći blokove (izgled bloka)

1. Kako rasporediti stranicu na dijelove

Da biste kreirali izgled stranice, potrebno je istaknuti glavne dijelove (odjeljke) dokumenta. Više o elementima presjeka možete pročitati u članku.

Standardna web stranica sadrži sljedeće odjeljke:

Rice. 1. Glavni dijelovi stranice

Nećemo koristiti element

jer ga ne podržavaju svi pretraživači.

Elementi

,

i