Bootstrap framework: brzi prilagodljivi izgled
Korak po korak video kurs o osnovama adaptivnog izgleda u Bootstrap okviru.
Naučite pisati jednostavno, brzo i efikasno koristeći moćan i praktičan alat.
Izgled po narudžbi i platiti.
Besplatan kurs "Site on WordPress"
Želite li savladati WordPress CMS?
Dobijte lekcije o dizajnu i izgledu web stranice na WordPress-u.
Naučite raditi s temama i izrezanim izgledima.
Besplatan video kurs o crtanju dizajna web stranice, izgledu i instalaciji na CMS WordPress!
*Pređite mišem preko za pauziranje pomicanja.
Nazad napred
Ovladavanje CSS-om: Izgled stranice
Jedna od glavnih prednosti CSS-a je mogućnost kontrole izgleda stranice bez korištenja oznaka. HTML dizajn . Međutim, stvaranje CSS šablona ima nepravednu reputaciju da je teško, posebno među programerima koji tek počinju. ovu tehnologiju . To je dijelom zbog činjenice da svi pretraživači ne tumače CSS na isti način, ali još više zbog činjenice da sada jednostavno postoji velika količina različite tehnike za kreiranje izgleda koristeći stilove.
Čini se da svaki web programer ima svoje tehnike CSS rasporeda, a webmasteri početnici često koriste tehniku bez razumijevanja kako ona funkcionira. Ova crna kutija pristup koristeći CSS Pomaže, naravno, da se brzo dobiju rezultati, ali u konačnici ometa razvoj programerskog razumijevanja jezika.
Međutim, sve ove različite tehnike zasnovane su na tri osnovna koncepta: pozicioniranju, premotavanju i manipulaciji dopunama. Razne tehnike kada bolje pogledate, nisu toliko različiti, a ako savladate osnovne koncepte i koncepte, biće vam relativno lako da kreirate sopstveni CSS šablon stranice.
Centriranje dizajna
Dugi redovi teksta su veoma nezgodni ili čak teški za čitanje. Kako monitori i njihove rezolucije nastavljaju da rastu, pitanje čitljivosti ekrana postaje sve veći problem. Jedan od načina za rješavanje ovog problema je centriranje sadržaja stranice. Umjesto da se sadržaj proteže po cijeloj širini ekrana, centrirani dizajni zauzimaju samo dio ekrana, dajući linijama dužinu lako čitljive.
Stranice sa sadržajem su sada uobičajene, pa naučite kako kreirati centriran dizajn koristeći CSS je jedna od prvih stvari koje novi web programeri žele naučiti. Postoje dva glavna načina za centriranje dizajna: jedan koristi automatski margine , u drugom - pozicioniranje i negativni padding.
Centriranje pomoću automatskog oblaganja
Pretpostavimo da ste suočeni s tipičnim zadatkom horizontalnog centriranja diva s ID-om omotač ("omotač").
Da biste to učinili u praksi, trebate samo postaviti širinu diva omotač i postavite horizontalne margine na auto .
U ovom primjeru, širina je postavljena u pikselima. Ali, naravno, možete ga jednostavno odrediti kao procenat širine tijela tijela dokumenta, ili koristiti veličinu u "em" u odnosu na veličinu teksta.
Ovo radi u svim modernim pretraživačima, ali ne i u IE 6. Na sreću, IE pogrešno tumači svojstvo text-align: centar , centriranje svega, ne samo teksta. Ovo možete iskoristiti u svoju korist centriranjem svega u oznaci tijelo , uključujući div omotač , a zatim ponovno dodjeljivanje poravnanja na lijevo za blok sadržaj omotač .
Body (text-align: center; ) #wrapper (širina: 720px; margina: 0 auto; text-align: left; )
Korištenje imovine text-align Na sličan način je u suštini hak, ali je potpuno bezopasan i neće negativno utjecati na vaš kod. Sada naš blok omotač centriran u IE 6, baš kao iu drugim pretraživačima koji su usklađeniji sa specifikacijom.
Centriranje dizajna pomoću pozicioniranja i negativnih paddinga
Metoda automatskog dodavanja je najpopularniji pristup, ali zahtijeva hakiranje. Takođe zahteva stilizovanje dva elementa umesto jednog. Upravo iz tog razloga mnogi ljudi radije koriste pozicioniranje i negativne margine.
Počinjemo, kao u prethodnom primjeru, postavljanjem širine omotač . Zatim postavljamo svojstvo pozicija Za omotač u značenju relativno i imovine lijevo u značenju 50%
. Ovo nam omogućava da pozicioniramo lijevu ivicu bloka omotač u centru stranice.
#wrapper ( širina: 720px; pozicija: relativna; lijevo: 50%; )
Nama, međutim, treba nešto malo drugačije - želimo da vidimo centar bloka u sredini stranice omotač . To možete postići primjenom negativnog paddinga na lijevoj strani bloka. omotač jednaka polovini širine ovog bloka. Ovo će pomjeriti blok omotač pola njegove širine ulijevo, pomjerajući ga u sredinu ekrana:
Vaš izbor metode centriranja u potpunosti ovisi o vašem ukusu. Međutim, uvijek je korisno znati nekoliko metoda i tehnika, jer ne možete pogoditi šta bi vam moglo biti od koristi.
Uzorci na bazi omotača
Postoji nekoliko načina za kreiranje šablona koristeći CSS , uključujući apsolutno pozicioniranje i negativni padding. Mislim da je najlakši metod za korištenje baziran na omotavanju nekih elemenata oko drugih. Kao što ime sugerira, u ovoj vrsti šablona jednostavno postavite širinu pozicioniranih elemenata, a zatim ih premotate lijevo ili desno.
Budući da ovi float elementi više ne zauzimaju nikakav prostor u toku dokumenta, nemaju utjecaja na blok elemente koji ih okružuju. Da biste zaobišli ovo ponašanje, morat ćete odmotati različite točke sidrišta u vašem predlošku. Umjesto da uzastopno primjenjujete premotavanje i poništavate ga, zgodnije je zauzeti malo drugačiji pristup: primijeniti premotavanje na gotovo sve, a zatim ga poništiti jednom ili dvaput na "strateškim" točkama u dokumentu, poput podnožja.
Predložak sa dva stupca koristeći premotavanje
Da biste kreirali jednostavan predložak sa dva stupca koristeći premotavanje, počnite s osnovna struktura (X)HTML. U našem primjeru, (X)HTML okvir se sastoji od zona: brendiranje, sadržaj, zona navigacije i podnožje. Sve ovu strukturu zatvoreno u "omotu" - omotač , koji će biti vodoravno poravnati pomoću jedne od gore opisanih metoda.
Početna navigacija bit će na lijevoj, a sadržaj na desnoj strani. Međutim, u strukturi stranice postavio sam područje sadržaja iznad područja za navigaciju. Glavni razlog za to je taj što je sadržaj stranice najvažniji i treba ga postaviti što je više moguće u dokumentu, bliže početku.
Obično kada ljudi kreiraju šablone i koriste premotavanje, oni daju svojstvo float značenje lijevo za oba stupca, a zatim kreirajte “marginu” između kolona koristeći svojstva margine ili dopuna. Kada koristite ovaj pristup, zvučnici su čvrsto pritisnuti u prostor koji im je na raspolaganju - tako da nema mjesta za disanje. Ovo obično ne uzrokuje probleme, ali neki pretraživači prekidaju ovaj "zategnut" dizajn, sa kolonama naslaganim jedan ispod drugog.
Ovo se može dogoditi u IE-u jer ga IE zasniva na "veličini" sadržaja, a ne na elementu koji sadrži sadržaj. U pretraživačima zasnovanim na standardima, ako sadržaj ne stane u blok, on jednostavno izlazi izvan bloka. Međutim, u IE-u, ako sadržaj ne stane u element koji sadrži, on "razvlači" element, čineći ga većim po veličini. Ako se ovako nešto dogodi u tesnom, skučenom dizajnu, tada elementi više nemaju prostora da ostanu jedan pored drugog, a jedan od njih kao da „propada“, tonući niže od drugog.
Da biste izbjegli ovaj scenarij, pokušajte da ne pretrpate blok koji sadrži vaš dizajn omota. Umjesto korištenja horizontalnih margina, paddinga, možete kreirati "virtuelne margine" davanjem jednog bloka float:levo , a drugom - float: desno .
Sada, ako se jedan od elemenata malo poveća (unutar nekoliko piksela) u veličini, umjesto da uništi cijeli dizajn, pomjeri jedan od blokova ispod drugog, blok će „lebdjeti“ u teritoriju „virtuelnog polja“.
CSS kod za postizanje ovog cilja je sam po sebi razumljiv. Jednostavno postavljamo željenu širinu za svaku kolonu, a zatim specificiramo za navigaciju float:levo , a za sadržaj - float: desno .
#content ( širina: 520px; float: desno; ) #mainNav ( širina: 180px; float: lijevo; )
Zatim, da biste pravilno pozicionirali podnožje ispod navigacije i sadržaja, morate ga odmotati.
#footer (jasno: oba; )
Osnovna verzija je spremna. Hajde da dodamo još par dodira. Gornji i donji padding za ceo blok navigacije i lijevi i desni padding za listu stavki u navigacijskom meniju.
#mainNav ( padding-top: 20px; padding-bottom: 20px; ) #mainNav li ( padding-left: 20px; padding-right: 20px; )
Uvucimo i desnu stranu područja sadržaja:
#content h1, h2, p ( padding-desno: 20px; )
To je to, sada imamo spreman jednostavan CSS raspored sa dve kolone.
Predložak s tri stupca koristeći premotavanje
HTML okvir za pravljenje predloška sa tri kolone je vrlo sličan onom koji smo koristili sa šablonom sa dve kolone, sa jedinom razlikom što ima dva dodatna div blok : jedan za glavni sadržaj i još jedan za dodatni sadržaj.
Koristeći isto CSS pravila , kao u slučaju predloška s dvije kolone, možemo dati glavni blok sadržaja float:levo , a dodatni blok - float: desno . Sve će se to dogoditi unutar već pravilno pozicioniranog glavnog bloka sadržaja. Na ovaj način smo podijelili drugu kolonu sadržaja na dva, stvarajući raspored od tri kolone.
Kao i ranije, CSS kod je vrlo jednostavan. Vi samo trebate navesti željenu širinu za svaki od blokova i svakom dati svoje premotavanje.
#mainContent ( širina: 320px; float: lijevo; ) #secondaryContent ( širina: 180px; float: desno; )
Možete malo očistiti predložak tako što ćete ukloniti padding iz bloka sadržaja primjenom direktno na sadržaj bloka secondaryContent :
#secondaryContent h1, h2, p ( padding-left: 20px; padding-right: 20px; )
Tako smo dobili ovaj lijep raspored od tri kolone.
Andy Budd, Cameron Moll i Simon Collison: "CSS Mastery: Advanced Web Standards Solutions"
P.S. Želite više materijala o primijenjenom rasporedu? U nastavku pogledajte besplatne kurseve. Ovo je serija video zapisa o fleksibilnom izgledu web stranice i besplatni tečaj o osnovama adaptivnog izgleda. Oni će vam pomoći da brzo steknete potrebne vještine:
Da li vam se dopao materijal i želite da mi se zahvalite?
Izgled stranice je proces razvoja strukture HTML dokumenta čiji je rezultat web stranica. Struktura web stranice određena je odgovarajućim HTML oznakama. Oznake - pravougaoni blokovi kontejnera 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 – tekstualne ili medijske datoteke.
Kako kreirati strukturu stranice koristeći blokove (izgled bloka)
1. Kako razbiti izgled vaše stranice na sekcije
Da biste kreirali izgled stranice, potrebno je odabrati glavne odjeljke (odjeljke) dokumenta. Više o elementima sekcije 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
- bazirani na blokovima, tako da će zauzeti cijelu širinu svog kontejnerskog bloka - elementa . Stranica sa ovim izgledom će izgledati dobro na malim ekranima, ali na uređajima sa visoka rezolucija Tekst takvih stranica će biti težak za čitanje. Stoga morate dodati oznaku kontejnera za sadržaj - sadržaj svakog odjeljka:
i postavite za njega maksimalnu širinu, interni padding, koji će odvojiti sadržaj od ivica ekrana uređaja niske rezolucije, kao i eksterni padding, koji vam omogućava da poravnate kontejner u sredini roditeljskog bloka:
Kontejner ( širina: 100%; maksimalna širina: 1024px; /*maksimalna širina može imati drugačiju vrijednost*/ padding: 0 15px; margina: 0 auto; )
Tako smo dobili okvir za našu stranicu (visina sekcija je u ovom slučaju virtuelni, jer bez sadržaja sekcije imaju nultu visinu).
2. Izgled zaglavlja sajta i pozicioniranje njegovih elemenata
Počnimo označavati prvi dio, takozvano zaglavlje web stranice. Element dizajnirano da grupiše uvodne informacije i pomagala za navigaciju preko stranice/sajta. Dodajmo ga unutar oznake logo stranice i navigacijski linkovi:
Logo ( float: lijevo; ) nav ( float: desno; ) nav ul ( margina: 0; padding: 0; stil liste: nijedan; ) nav li ( display: inline-block; /*jedan način postavljanja elemenata u linija */ )
Postoji nekoliko načina za postavljanje blok elemenata u niz. Svi su dati u lekciji.
Primijetite da je nakon što smo nanijeli omotač, zaglavlje nestalo. To se dogodilo jer su plutajući elementi (oni koji imaju postavljeno svojstvo float) uklonjeni iz normalnog toka i roditeljski kontejner više ne vidi njihovu visinu, tako da element i element unutar njega sa class.container se srušio. Da popravimo ovu situaciju, koristimo čišćenje toka za element s .container klasom:
Kontejner:nakon (sadržaj: ""; prikaz: tabela; brisanje: oba; )
Dodaćemo i njemu vertikalne margine , odvajajući elemente unutar njega od rubova zaglavlja. Kao rezultat toga, stilovi će izgledati ovako:
Kontejner (širina: 100%; maksimalna širina: 1024px; padding: 15px; margina: 0 auto; )
Razmotrimo situaciju u kojoj slika služi kao logo. Može se dodati direktno unutar oznake ili kao pozadinska slika. Slika će imati svoju visinu, koja može biti veoma različita od visine navigacionog menija, tako da ćemo se suočiti sa problemom vertikalno poravnanje elementi zaglavlja.
U našem primjeru, visina logotipa je 38px, tako da da biste poravnali veze menija sa sredinom zaglavlja, morate ih postaviti na odgovarajuću visinu linije:
Nav a (dekoracija teksta: nema; visina linije: 38px; ) Sl. 7. Poravnanje linkova menija zaglavlja
3. Kreirajte mrežu za glavni dio stranice
Glavni dio stranice najčešće je mreža blokova različitih širina. Pozicioniranje takvih blokova se također vrši korištenjem svojstva float. Umotat ćemo svaki red blokova dodatnim blokom sa .row klasom:
Za element s klasom .row također primjenjujemo čišćenje toka:
Kontejner:posle, .red:posle (sadržaj: ""; prikaz: tabela; brisanje: oba; )
Da odvojite redove jedan od drugog, možete dodati donju marginu:
Red ( margin-bottom: 15px; )
Visina blokova rešetke određena je visinom njihovog sadržaja, tako da može biti različita:
Visina blokova se može fiksirati eksplicitnim navođenjem, na primjer, .row div (visina: 100px) . Ali u ovom slučaju, morate biti sigurni da prilikom dodavanja prilagodljivosti rasporedu sadržaj blokova neće proteći dalje od ruba bloka.
Ako trebate postaviti boju pozadine za blokove reda, to se može učiniti na sljedeći način: za element s .row klasom, dodajte novu klasu koja će vam omogućiti da stilizirate samo ovaj red (ispada . red red-jedan), odredite za njega boju pozadine manjeg bloka po visini, a za visoki blok ćemo postaviti svoju boju, odnosno na taj način ćemo napraviti pozadinu.
Lorem ipsum dolor sit amet.
Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.
.row-one (pozadina: svijetloplava; ) .col-2-3 (širina: 66,6666666667%; float: lijevo; pozadina: školjka; ) Ako glavni dio stranice sadrži samo dva bloka, tada se dodatni red omota ne može dodati:
4. Izgled podnožja stranice
Podnožje stranice, ili podnožje, obično sadrži informacije o autorskim pravima, dodatne veze itd. Sve ove informacije se takođe nalaze u kolonama, koje mogu biti iste ili različite širine.
Svi predstavljeni predlošci za Vašu web stranicu su izgrađeni moderne verzije HTML5 i CSS3. Osim toga, autori koriste takve moderne značajke kao što su ravni dizajn , responzivni dizajn, adaptivni izgled, jQuery klizači, CSS3 animacija, itd. To jest, ako tražite šablon za mobilnu web stranicu, možete odabrati bilo koji od predstavljenih. Prekrasni html5 šabloni 2017 , iako besplatan, izgleda premium.
Ovdje ćete pronaći više od 50 besplatnih responzivnih šablona web stranica Visoka kvaliteta na HTML5 i CSS3, koji se mogu koristiti i za nove stranice i za redizajn postojećih. Elegantni html5 predlošci web stranica - Ovo ti treba!
Ažurirano 03.12.2019 : Pošto je članak napisan prije 2 godine, mnoge veze su pokvarene. Ili su se vlasnici šablona spojili, ili promijenili status šablona iz besplatnih u plaćeni, ili su vanzemaljci sve pokvarili. Molimo vas, dragi čitaoci, ako pronađete takav link, ostavite ga u komentarima, ispraviću ga.
1. Snijeg - besplatni predložak odredišne stranice koristeći HTML5 i CSS3
Snow landing page html5 css3 šablon je izgrađen na Bootstrap frameworku. Šablon je vrlo moderan i cool! Fiksna pozadina i ogroman Jumbotron - stvar koja 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 mobilnih uređaja . Možete ga čak koristiti kao osnovu za vlastite šablone.
2. Sima - šik šablon za komercijalnu web stranicu
Ovaj html5 css3 šablon je takođe izgrađen na Bootstrap okviru. Na ovom šablonu možete kreirati jedinstvenu web stranicu sa portfoliom, vašim timom, cijenama, recenzijama i svime ostalim što će vam biti potrebno. Na primjer, ovaj predložak je savršen za web stranicu za usluge čišćenja. Animacija u ovom predlošku je glatka i impresivna, čista i dobra čitljivi fontovi . Samo savršen šablon!
3. Bijela - predivan šablon na jednoj stranici!
Karakteristična karakteristika bijelog predloška web stranice su dvije opcije pozadine na vrhu. Vaš izbor je ili klizač sa slikama ili video pozadina. Veoma kvalitetan i efikasan šablon za sajt!
4. Platz - Besplatni HTML5 mrežni predložak web stranice
Moderan, vizualno privlačan HTML5 predložak web stranice dizajniran na osnovi mreže (pročitajte više o mreži). Prekrasan i responzivan dizajn predložaka za blog ili web stranicu.
5. Mart eCommerce - prekrasan HTML5 i CSS3 predložak web stranice za e-trgovinu
Svjež i moderan dizajn predložaka web stranice najbolji je za sve vrste modnih web stranica koje prodaju obuću, odjeću, satove, dodatke, sportsku odjeću itd. uključeno PSD fajl koji možete prilagoditi svojim potrebama.
6. Nava - spektakularan HTML5 i CSS3 predložak za kreativne web stranice
Nava je moderan HTML5 predložak web stranice koji se koristi uglavnom za kreativne profesionalce koji žele pokazati svoj rad u punom sjaju. Mnoge varijacije postavki šablona omogućuju vam da svoju web stranicu učinite jedinstvenom. Lagan, lijep i prilagodljiv predložak web stranice.
7. Box Portfolio - jedinstveni kreativni predložak web stranice koji koristi HTML5 i CSS3
Predložak web stranice Box Portfolio ima čist i moderan minimalistički dizajn. Savršeno za profesionalce koji žele efikasno prikazati svoj rad na mreži. Kao što ime sugerira, predložak web stranice je idealno prikladan 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čna animacija koristeći CSS3. Predložak je savršen za web stranice za putovanja i portfolio.
9. Beauty Spa - cool HTML5 i CSS3 šablon web stranice za spa salone
Beauty Spa je responzivni predložak web stranice koji ima mnogo funkcija, idealan za spa web stranice, zdravstvene ili fitnes centre, stranice za jogu ili čak frizerske salone. Odlična čitljivost fontova i nenametljiv minimalizam.
10. Bent – elegantna i efikasna odredišna stranica za web stranice koje koriste HTML5 i CSS3
Bent je odličan besplatni šablon stranica na html5 i css3. Responzivni dizajn, CSS3 animacija, paralaksno skrolovanje, prilagođena navigacija i druge dobrote. Ovo je čist predložak za web lokacije koje žele koristiti izbalansiran dizajn kako bi se osiguralo da posjetitelji uživaju u izgledu i osjećaju stranice, dok i dalje jasno vide njen osnovni sadržaj.
11. Trougao - besplatni responzivni višenamjenski HTML5 i CSS3 predložak
Triangle je ekskluzivni kreativni HTML5 i CSS3 predložak web stranice posebno za one koji žele da podese svoj cool dizajn, ali ga ne pogoršavaju. Predložak dolazi s preko 40 unaprijed dizajniranih stranica koje vam omogućavaju da prilagodite svoju web stranicu po volji.
12. Future Imperfect - sjajan predložak web stranice za kreativne ljude!
Doživite istinski osjećaj zabave uz ovaj predložak web stranice, idealan za pisce, autore, kopirajtere i druge radnike na olovci i papiru. Šablon se može koristiti i za lični blog , blog o putovanjima, kreativnosti itd. Kreativni dizajn i prilagodljivi izgled šablona će se svidjeti mnogima.
13. Bodo - odličan šablon za ličnu web stranicu
Bodo- prelep šablon sajt na HTML5 i CSS3, što je idealno za ličnu stranicu. Posebno za organizovanje portfolia. Čista i oštra tipografija, klizač vrtuljka, iskačući prozori popup prozori za prikaz 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, impresivno i što je najvažnije - veliko! Rijetki predložak web stranice ispunjava ove zahtjeve. Objektiv je jedan od takvih šablona web stranice za fotografe.
15. Spectral - jedinstveni ručno rađeni šablon za web stranicu koristeći HTML5 i CSS3
Ako tražite besplatni predlošci web stranica o auto temama , tada će Spectral biti idealno rešenje . Apsolutno ovdje jedinstven dizajn ručno rađeni predložak web stranice na jednoj stranici. Dizajn se može mijenjati po vlastitom nahođenju. Pomoću ovog predloška možete napraviti zadivljujuću web stranicu na apsolutno bilo koju temu, bilo da je to impresivan blog o putovanjima ili galerija fotografija, automobilska web stranica ili hosting provajder.
16. Oxygen - HTML5 i CSS3 web šablon na jednoj stranici
Oxygen je zgodan i jedinstven predložak za poslovnu web stranicu. Moderan ravan dizajn, prilagodljiv raspored. Na primjer, ovaj predložak je idealan za web stranicu o mobilne aplikacije ili mobilnu tehnologiju.
17. Mobirise Bootstrap - savršen besplatni predložak web stranice na HTML5 i CSS3
Ako tražite besplatni predložak za web stranicu, Mobirise Bootstrap je savršen za početak. Ovo je multifunkcionalni predložak s puno dodataka. Tri gotova izgleda početna stranica a blog će vam pomoći u tome. Mobirise Bootstrap je također 100% SEO optimiziran i prilagođava se bilo kojoj veličini 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. Odaziv i veoma Predivan dizajn Svidjet će se ne samo vlasniku stranice, već i posjetiteljima.
19. Drifolio - moderan HTML5 web šablon za portfolio
Moderan i animirani HTML5 i CSS3 predložak web stranice za organiziranje portfelja. Čist dizajn, odlična tipografija, prekrasne ikone i još mnogo toga.
20. Pluton - svijetao i moderan predložak za web stranicu na jednoj stranici
Pluton je svijetao i efektivan predložak web stranice baziran na Bootstrapu. 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 predložak web stranice na jednoj stranici na HTML5
Predložak SquadFree savršen je za kreiranje komercijalne web stranice na jednoj stranici. Šablon ne samo da izgleda profesionalno, već je i prilagođen svim vrstama ekrana. Šablon je baziran na Bootstrapu.
22. Sublime - fascinantan predložak web stranice na HTML5 i CSS3
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 je glavna karakteristika dizajna ovog šablona. Šablon je savršen za poslovnu web stranicu ili portfolio. Ugrađena je galerija, mapa i kontakt informacije koje možete lako prilagoditi svojim potrebama.
24. E-Shopper - najbolji predložak web stranice za e-trgovinu
E-Shopper je odličan predložak web stranice za ecommerce . Izgrađen na baziran na bootstrapu sa neverovatnim skupom funkcija za kompletnu i efektivnu internet prodavnicu.
25. Magnetic - besplatni HTML5 i CSS3 šablon za foto sajt
Apsolutno zadivljujući HTML5 i CSS3 predložak za kreiranje web stranice za fotografije ili portfelja 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 predložak web stranice u minimalističkom stilu koristeći HTML5 i CSS3
Ravni dizajn ovog minimalističkog predloška web stranice savršen je za kreiranje portfelja. U šablonu su svi detalji savršeno provjereni!
27. Modern Bootstrap HTML5 - besplatni jednostrani predložak web stranice
Ovaj besplatni jedan pejdžer baziran na Bootstrap okviru savršen je za korporativne web stranice, kako za male tako i za velike kompanije. Ravni dizajn, prilagodljiv raspored, svi elementi visokog kvaliteta. Šablon dolazi u 4 različite boje.
28. Infusion - moderan predložak web stranice na jednoj stranici koristeći HTML5 i CSS3
Infusion je sjajan primjer HTML5 i CSS3 web šablona koji je posebno dizajniran za kreiranje poslovnog portfelja. Bogata funkcionalnost ovog šablona omogućava vam da efikasno radite sa klijentima i privučete nove.
29. Yebo - šablon korporativnog sajta na HTML5 i CSS3
Ovaj visokokvalitetni predložak web stranice ravnog stila savršen je za bilo koju korporativnu web stranicu. Prilagodljiv dizajn, mnoštvo postavki i opcija za uređivanje.
30. Dvadeset - spektakularan HTML5 i CSS3 predložak web stranice sa paralaksom
Ovaj jedinstveni i vrlo lijepi predložak web stranice sa efektom paralakse nikoga neće ostaviti ravnodušnim. One Page Template izgrađen na čistom HTML5 i CSS3 sa adaptivni raspored , impresivne pozadine, podrška društvenim medijima itd.
31. Urbanic – odličan HTML5 i CSS3 šablon web stranice na Bootstrapu
Urbanic je svjež i cool HTML5 i CSS3 predložak web stranice izgrađen na Bootstrap engine-u. Savršeno za početak kreiranja vaše web stranice odmah bez ikakvih problema. Šablon je savršeno prilagođen bilo kojoj veličini ekrana.
32. Design Showcase - HTML5 portfolio web predložak
Vizuelno harmoničan i efikasan HTML5 predložak web stranice za organiziranje vašeg portfolia. Predložak je savršeno prilagođen mobilnim uređajima, što je vrlo teško učiniti za stranice ovog formata.
33. Mamba One - jednostavan i moderan predložak web stranice koji koristi HTML5 i CSS3
Mamba One je primjer jednostavnog, ali modernog predloška web stranice za kreiranje jednog stranica. Kompatibilan sa svima moderni pretraživači i svuda će biti adekvatno prikazana.
34. KreativePixel - besplatni šablon web stranice za fotografe
Još jedan sjajan predložak web stranice za fotografe. Responsibilan dizajn i vrlo zgodno sortiranje fotografija u portfeljima i galerijama 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 predložak odredišne stranice koji koristi HTML5 i CSS3
Kao što samo ime govori, ovaj prekrasan predložak web stranice nije samo savršeno prilagođen odredišne stranice , ali se također susreće s novim mobilnim trendovima, posebno u pogledu jasnoće prikaza na uređajima s Retina ekranima.
36. Brushed - responzivni HTML5 i CSS3 predložak web stranice baziran na Bootstrap engine-u
Brushed je brzi, besplatni HTML5 i CSS3 predložak web stranice baziran na Bootstrap motoru. Također optimiziran za Retina ekrane (iPhone, iPad, iPod Touch i MacBook Pro Retina).
37. Big Picture HTML5 i CSS3 predložak web stranice
Dobrodošli u Big Picture! Ovaj responzivni HTML5 predložak web stranice savršen je za sve kreativne ljude koji imaju nešto za pokazati, i to pokazati veliko i impresivno na svojoj web stranici. Osim toga, predložak koristi odličnu animaciju.
38. Tesselatte - besplatni responzivni HTML5 i CSS3 predložak
Jednostavan šablon na jednoj stranici koji uzima u obzir sve potrebne alate za uspješnu izradu web stranice. Idealno za lični blog pisca, copywritera ili samo ljubitelja pisane riječi.
39. Overflow - jedinstveni predložak web stranice koji koristi HTML5 i CSS3
Ovaj jedinstveni čisti HTML5 i CSS3 predložak web stranice 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 web stranicu bilo koje tematike. Briljantan stil i jasni fontovi, adaptivni dizajn i impresivnih detalja uzoraka. Sve radi za vas!
41. Pinball Responsive Grid Style - Sjajan šablon web stranice zasnovan na mreži
Ovaj nevjerovatni profesionalni mrežni predložak web stranice savršen je za korporativnu web stranicu. Moderan ravni dizajn i prilagodljiva struktura šablona savršeno se prikazuju na oba ekrana veliki monitori , i mobilnih uređaja.
42. Prolog - čisti predložak web stranice na jednoj stranici koristeći HTML5 i CSS3
Ovaj čist, jednostavan i jasan HTML5 i CSS3 predložak web stranice savršen je za izradu odredišne stranice. Minimalistički dizajn ne odvlači pažnju od glavne stvari. Bočna navigacijska traka koja privlači poglede i čisti redovi stranice su savršena kombinacija!
43. Helios - moderan šablon web stranice koji koristi čisti 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, responzivan i potpuno besplatan predložak web stranice ima jednu veliku prednost - jednostavan je i koncizan, ali to je upravo ono što mnogima nedostaje.
45. Strongly Typed - vrlo lijep šablon za web stranicu u poluretro stilu
Novi predložak web stranice s minimalističkim poluretro stilom. Samo što retro više nije u modi, ali blagi nagovještaj toga je vrlo dobrodošao. Ovaj predložak web stranice je potpuno prilagodljiv, izgrađen na čistom HTML5 i CSS3 i uključuje sve potrebne osnovne elemente stranice. Predložak Strongly Typed idealan je za kreativne web stranice. Na primjer, za web stranicu o uređenju doma.
46. Striped - čist, lijep i funkcionalan HTML5 i CSS3 predložak web stranice
Sveže i čisto, lepo i funkcionalno, novi šablon stranice na HTML5 i CSS3. Ima sve u svom arsenalu neophodni elementi stranice, uključujući dizajnirane citate, tabele i liste, kao i prilagođenu bočnu traku (desno ili lijevo - kako želite).
47. Paralelizam - neobičan i moderan predložak web stranice koji koristi HTML5 i CSS3
Paralelizam je moderan predložak web stranice za organiziranje portfelja ili fotografija. Ono što ga čini neobičnim je to što skrolovanje ovde nije okomito, kao i obično, već horizontalno. Ovo stranici daje poseban šik i nezaboravnost.
48. Miniport - potpuno responzivni HTML5 predložak web stranice u minimalističkom stilu
Odličan predložak web stranice u minimalističkom stilu na HTML5. Savršeno za ličnu web stranicu/blog, kao i malu korporativnu web stranicu na jednoj stranici ili kao web stranicu za vizit karte.
49. Verti - prostran i besplatan responzivni HTML5 predložak web stranice
Čist i prostran dizajn ovog predloška web stranice savršen je za velike korporativne web stranice ili komercijalne projekte. Odgovarajuće i pogodno i za autora i za korisnike.
50. ZeroFour - impresivan i moderan predložak web stranice koji koristi HTML5 i CSS3
I posljednji na listi, ali ne i najmanje važan u pogledu kvaliteta i vizuelne efektivnosti, je šablon za web stranicu - ZeroFour. Moderan dizajn , Vrlo prelep meni , savršeno usklađeni oblici i dugmad, prekrasne ikone i još mnogo toga. I sve ovo je potpuno besplatno!
Nadam se da ste među ovim nevjerovatnim HTML5 i CSS3 predlošcima web stranica pronašli nešto prikladno za sebe. Sretno!
Označite ga tako da ga možete brzo pronaći.
PS: Ako ne možete da se odlučite, pročitajte članak „Ne znam šta želim“. Biće korisno.
Gdje obično počinje proces izgleda? Počinje proučavanjem izgleda ili izgleda buduće stranice. Najčešće se ovi izgledi kreiraju u programu Adobe Photoshop , dakle, vi kao layout dizajner morate biti u mogućnosti koristiti ovaj program, odnosno moći izrezati slike iz izgleda, izmjeriti udubljenja između elemenata, izračunati veličine i parametre raznih komponenti buduće web stranice itd. . Prije svega, podesimo radni prostor u Adobe Photoshopu radi lakšeg rada.
Svi primjeri će biti prikazani u programu Adobe Photoshop CS5 , sa interfejsom na engleskom.
Kada otvorite Adobe Photoshop, vidjet ćete nešto poput ovoga:
Traka glavnog menija;
Options panel;
Toolbar;
Dodatni paneli.
Moramo da konfigurišemo set dodatnih panela. Za početak idite na meni Prozor – Novi radni prostor :
Unesite naziv za novi radni prostor, na primjer, moj radni prostor i pritisnite Sačuvaj . Sada moramo odabrati potrebne panele za rad. Idite na Prozor i označite kućice pored istorija , Info , Slojevi , Navigator , Opcije , Alati . Možete poništiti oznaku preostalih panela ako su označeni.
Sada moramo osigurati ove ploče. Da biste to učinili, kliknite na vrh panela i prevucite ga na željenu lokaciju tako da na kraju bude vaš radni prostor izgledao ovako:
Kada se pojavi plava prozirna traka, pustite kursor da pričvrstite ploču na tu lokaciju:
Da biste zatvorili nepotrebne kartice, kliknite na ikonu s desne strane gornji ugao kartice i izaberite stavku iz padajućeg menija Zatvori :
Prvi raspored koji ćemo kreirati zove se simple_text.psd , nalazi se u folderu šabloni . Otvorite ga u Adobe Photoshopu držeći pritisnute tipke Ctrl+O (ili preko menija File – Otvori ), i odaberite datoteku.
Uključite ravnalo koristeći prečice Ctrl+R ili preko menija Pogled – Vladari :
Sada dvaput kliknite na ravnalo i otvorite karticu Jedinice i vladari za postavljanje mjernih jedinica. Odaberite u bloku Jedinice Za Vladari I Tip mjerne jedinice piksela:
Sada je sve spremno, možete početi sa izmišljanjem izgleda.
Kreiranje strukture web stranice
Kreirajte folder na radnoj površini i nazovite ga jednostavan tekst . U ovom folderu kreirajte dva fajla index.html I style.css .
Kao što se sjećate, mi kreiramo strukturu web stranice na HTML jezik . Dakle, prvo otvaramo fajl index.html , i napišite originalni kod u njemu:
Jednostavan tekst
Sada između oznaka
kreirajte blok pomoću oznake
:
Jednostavan tekst
Tag
je univerzalni blok element i definira blok na web stranici.
Napišimo u ovaj blok elemente koji su prisutni na izgledu, odnosno naslov i pasuse:
Jednostavan tekst
Sami dodajte tekst između ovih oznaka.
Sada u kontejneru
napišite putanju do datoteke sa stilovima:
Stiliranje web stranice
Ako otvorite index.html u pretraživaču ćete vidjeti web stranicu napisanu u čistom HTML-u. Veoma se razlikuje od prikazanog na modelu. Popravit ćemo ovo s kaskadnim stilovima.
Otvorite svoju datoteku style.css i resetirajte sav padding koristeći univerzalni birač zvjezdica:
* ( margina: 0; dopuna: 0; )
Sada zapišimo svojstva oznake
:
Tijelo (boja pozadine: #e35b5b; veličina fonta: 16px; visina linije: 24px; boja: bijela; porodica fontova: Arial; )
Kako pronaći boju pozadine web stranice u Adobe Photoshopu? Da biste to učinili, kliknite na jedan od dva kvadrata s bojom:
Zatim kapaljkom kliknite na pozadinu izgleda i kopirajte heksadecimalni kod prikazan u prozoru Birač boja :
Kako saznati veličinu prored , stil, familija fontova i boja teksta? Da biste to učinili, odaberite sloj s tekstom, a zatim otvorite panel karakter . Ovaj panel će prikazati sljedeće opcije:
Imajte na umu da smo za boju teksta, umjesto heksadecimalnog koda, napisali naziv nijanse: boja: bijela; . Zgodno je koristiti nazive nijansi za crnu i bijela white , jer se ime mnogo brže zapisuje od heksadecimalnog koda. Sve nazive nijansi možete pronaći u ovoj tabeli.
Svojstva za blok
Za ovaj blok ćemo odrediti širinu, kao i gornji, lijevi i desni padding:
Za mnoga svojstva vidjet ćete vrijednosti napisane u sljedećim formatima:
margina: vrijednost1 vrijednost2 vrijednost3 vrijednost4 ;margina: vrijednost1 vrijednost2 vrijednost3 ;margina: vrijednost1 vrijednost2 ;margina: vrijednost1 ;U prvom slučaju navodimo vrijednosti za svaku od četiri strane, na primjer, margina: 10px 12px 20px 15px; : 10px – gornji padding, 12px – desni padding, 20px – donji padding, 15px – lijevi padding. Ova notacija se obično koristi kada su uvlake na svakoj strani različite.
U drugom slučaju pišu se tri vrijednosti, na primjer margina: 10px 12px 20px; : 10px – gornji padding, 12px desni i lijevi padding, 20px – donji padding. Ova notacija je zgodna za korištenje kada su vrijednosti na desnoj i lijevoj strani jednake, ali su vrijednosti na vrhu i na dnu različite. Automatska vrijednost koristi se kada želite da pretraživač automatski izračuna lijevi i desni padding.
U trećem slučaju koriste se dvije vrijednosti, na primjer, margina: 10px 12px; : gornja i donja margina 10px, desna i lijeva margina 12px. Ako su uvlake iznad i ispod jednake, a uvlake desno i lijevo jedna drugoj, onda je zgodno zapisati samo dvije vrijednosti, kao u našem primjeru.
U četvrtom slučaju upisuje se jedna vrijednost, na primjer margina: 10px; : padding sa svake strane je 10px. Kada su parametri jednaki sa svih strana, zgodno je koristiti upravo takvu notaciju.
Kako izmjeriti širinu ili visinu elementa u Adobe Photoshopu? Razmotrimo jedan način: uzmite alat Alat za pravokutni okvir (prečica M) :
Zatim odabiremo područje, na primjer, moramo saznati uvlačenje od gornjeg ruba izgleda do početka sadržaja, odaberite ga:
U panelu Info pogledajte vrijednosti visine H , ili vrijednost širine W ako trebate znati širinu elementa:
Idemo na naslov
Ovdje trebamo odrediti veličinu, razmak između redova, sjenu i donji padding. Već znate kako da registrujete prva dva svojstva.
Za specificiranje sjene potrebno nam je svojstvo text-shadow :
Evo 0
– uvlačenje duž X ose;
1px – pomak duž Y ose;0
– radijus zamućenja senke;rgba(0,0,0,0.3) – boja senke. U ovom slučaju koristimo RGBA format , uključujući alfa kanal koji postavlja transparentnost elementa. U zagradama, prve tri vrijednosti su odgovorne za boju u formatu rgb , a zadnja vrijednost je odgovorna za transparentnost. Ova vrijednost je upisana u rasponu od 0 do 1, gdje 0 predstavlja punu transparentnost, a 1 predstavlja neprozirnost.Kako saznati parametre sjene u Adobe Photoshopu? Izaberi željeni sloj u panelu slojeva i kliknite na ikonu ƒx :
Otvara se prozor Layer Style . Morate odabrati karticu Drop Shadow :
Evo parametra Opacity odgovoran za transparentnost, parametar Razdaljina je odgovoran za uvlačenje duž Y ose, parametar Veličina je odgovoran za zamućenje i parametar Ugao je odgovorno za uvlačenje duž ose X. Pošto naša senka pada pod pravim uglom, udubljenje duž ose X će biti jednak nuli . Boja senke se može naći u okviru nasuprot parametra Blend Mode :
Vrijednost boje u RGB formatu i sa alfa kanalom u ovom slučaju će izgledati ovako:
Sjena teksta: 0 1px 0 rgba(0,0,0,0.3);
Ostaje da zapišemo uvlačenje ispod.
Ako trebate napisati vrijednost za jednu od četiri strane, koristite ovu notaciju:
margin-top – gornja uvlaka;margin-desno – desno uvlačenje;margin-bottom – donja uvlaka;margin-left – lijevo uvlačenje.Pošto moramo da navedemo donju marginu, napisaćemo margin-bottom: 30px;
Kao rezultat, dobijamo ovaj kod u datoteci style.css :
* ( margina: 0; padding: 0; ) body (boja pozadine: #e35b5b; veličina fonta: 16px; visina linije: 24px; boja: bijela; porodica fontova: Arial; ) div (širina: 724px; margina: margina: 0; : 43px auto 0; ) h1 (veličina fonta: 60px; visina linije: 62px; sjena teksta: 0 1px 0 rgba(0,0,0,0.3); margin-bottom: 30px; )
Prvi paragraf. Susedni selektori
Zapišimo svojstva za prvi paragraf:
P (veličina fonta: 24px; visina linije: 30px; boja: #a42727; sjena teksta: 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 42px; )
Sada ako sačuvate promjene i otvorite datoteku index.html u pretraživaču, videćete da se ova svojstva primenjuju na sve pasuse na stranici. Pošto ove osobine treba da zapišemo samo za prvi pasus, u ovom slučaju možemo koristiti susjedni selektori . Šta je to? U html šablonu, oznake
I (uzimamo tačno prvi pasus) idu jedan za drugim, što znači da su susedne oznake, u css susjedni selektori se pišu ovako:
H1+p (veličina fonta: 24px; visina linije: 30px; boja: #a42727; sjena teksta: 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 42px; )
Sada će se ova svojstva primjenjivati samo na prvi paragraf.
Poslednji pasus. Nastava u CSS-u
Pređimo sada na posljednji pasus. Pošto se i on razlikuje od glavnog teksta, dodijelit ćemo mu klasu. U html šablonu napišite atribut klase za posljednji pasus sa vrijednošću last-p . Ime klase, kao i identifikator, moraju početi slovima latinice:
U CSS-u se klase pišu ovako:
P.last-p (boja: #ffbfbf; text-align: desno; text-shadow: 0 1px 0 rgba(0,0,0,0.3); )
Ova svojstva će raditi samo za zadnji paragraf u našem predlošku.
Za razliku od identifikatora, možete koristiti klasu sa određenom vrijednošću na stranici koliko god puta želite.
svojstvo poravnanja teksta sa vrijednošću desno se koristi kada trebate poravnati tekst udesno. Možete koristiti i druge vrijednosti, na primjer, text-align: center; u ovom slučaju tekst će biti poravnat sa središtem bloka.
Ostali paragrafi
Za preostale pasuse pišemo sljedeće svojstvo:
P (margin-bottom: 30px; )
Ostala svojstva: boja, porodica fontova, veličina, razmak između redova, ova oznaka će naslijediti roditeljski element , tj. tag
.
Ako smanjimo prozor pretraživača, možemo vidjeti da je sadržaj pričvršćen sa strane prozora. Da to popravite, dodajte padding u selektor div:
Selektori grupisanja
Ako nekoliko elemenata web stranice sadrži ista svojstva sa iste vrijednosti , na primjer, kao u našem primjeru, naslov i zadnji pasus imaju zajedničko svojstvo - ovo je sjena, tada možete grupisati ove selektore tako da ih napišete odvojene zarezima:
H1,p.last-p (sjena teksta: 0 1px 0 rgba(0,0,0,0.3); )
Ne zaboravite ukloniti svojstva iz pojedinačnih elemenata; u našem slučaju morate ukloniti sjenu sa h1 i p.last-p selektora.
Video za lekciju
Dio 1
Posljednje ažuriranje: 24.04.2016
Obično se web stranica sastoji od mnogih razni elementi , koji može imati složenu strukturu. Stoga, kada kreirate web stranicu, postoji potreba na pravi način pozicionirajte te elemente, stilizirajte ih tako da se nalaze na stranici na željeni način. Odnosno, postavlja se pitanje kreiranja izgleda stranice i njenog izgleda.
Postoji razne načine , strategije i vrste rasporeda. U početku je raspored zasnovan na tabeli bio uobičajen. Budući da tabele omogućavaju da se po potrebi vrlo jednostavno i jednostavno podijeli cijeli prostor web stranice na redove i stupce. Redovima i kolonama je prilično lako upravljati i lako je pozicionirati bilo koji sadržaj u njima. To je ono što je odredilo popularnost rasporeda stolova.
Međutim, tabelarni raspored ne stvara najfleksibilnije stranice u dizajnu, što je posebno relevantan aspekt u svijetu u kojem ne postoji jedinstvena rezolucija ekrana, tj. veliki ekrani na televizorima, malim ekranima na tabletima i phabletima, vrlo malim ekranima na pametnim telefonima itd. Raspored stola nije bio u stanju da zadovolji svu ovu raznolikost ekrana. Stoga je postepeno zamijenjen blokovnim rasporedom. Blok raspored je relativno konvencionalno ime za metode i tehnike rasporeda, kada većina web stranica koristi CSS float svojstvo , a glavni građevinski element web stranica je element
, odnosno u suštini blok. Korištenje svojstva float i
div elementi ili drugih elemenata, možete kreirati strukturu stranice od nekoliko kolona, kao kod izgleda tabele, koja će biti mnogo fleksibilnija.
Prethodno, u jednoj od prethodnih tema, raspravljalo se o efektu svojstva float. Sada ga iskoristimo za kreiranje web stranice sa dvije kolone. Recimo da imamo standardno zaglavlje i podnožje na vrhu i dnu, te dvije kolone u sredini: kolonu sa menijem ili bočnom trakom i kolonu sa glavnim sadržajem.
Prvo, definirajmo sve blokove. Kada radite sa elementima koji koriste float i svojstvo float, njihov redosled je važan. Dakle, kod za plutajući element koji ima postavljeno svojstvo float mora doći prije elementa koji se obavija oko plutajućeg elementa. To jest, blok bočne trake će ići prije glavnog bloka sadržaja:
Blok raspored u HTML5
Glavni sadržaj
Odnosno, do sada je rezultat otprilike sljedeća stranica:
Visina, ivica i ispun blokova u ovom slučaju se dodaju samo radi ljepote, da bi se identificirao prostor bloka i odvojio od ostalih.
Zatim, da bismo pomaknuli blok bočne trake lijevo od glavnog bloka sadržaja i dobili efekat premotavanja, moramo navesti svojstvo float: left bloka bočne trake i željenu širinu. Širina može biti fiksna, na primjer 150 px ili 8 em. Ili možete koristiti i procente, na primjer 30% - 30% širine spremnika za tijelo. S jedne strane, blokovima fiksne širine je lakše upravljati, ali s druge strane, procentualne širine vam omogućavaju da kreirate fleksibilnije, fluidnije blokove koji mijenjaju veličinu kako se mijenja veličina prozora pretraživača.
Posljednji korak je postavljanje uvlačenja bloka s glavnim sadržajem iz bloka bočne trake. Budući da pri strujanju oko plutajućeg bloka može teći oko plutajućeg elementa i s desne i s donje strane, ako plutajući element ima manju visinu, onda moramo podesiti pomak najmanje jednak širini plivajućeg elementa. Na primjer, ako je širina bočne trake 150px, tada se glavni blok sadržaja može postaviti na 170px, što će stvoriti prazan prostor između dva bloka.
Međutim, ne biste trebali eksplicitno specificirati širinu glavnog bloka sadržaja, jer ga pretraživači automatski proširuju tako da zauzima sav raspoloživi prostor.
Dakle, uzimajući u obzir sve gore navedeno, promijenimo stilove bočne trake i blokova glavnog sadržaja na sljedeći način:
#sidebar( background-color: #ddd; float: lijevo; širina: 150px; ) #main( background-color: #eee; visina: 200px; margin-left: 170px; /* 150px (širina bočne trake) + 10px + 10px (2 alineje) */ )
Kao rezultat toga, imat ćemo bočnu traku od lijeva strana iz glavnog bloka:
Visina blokova u ovom slučaju je naznačena uslovno radi veće jasnoće; u stvarnosti, u pravilu, visinu će automatski postaviti pretraživač.
Kreiranje desne bočne trake će biti slično, samo što sada trebamo postaviti bočnu traku na float: desno, a glavni blok sadržaja na desno padding:
#sidebar( background-color: #ddd; float: desno; širina: 150px; ) #main( background-color: #eee; visina: 200px; margin-right: 170px; )
Gde html markup ostaje isti, blok bočne trake mora i dalje prethoditi bloku glavnog sadržaja.
Najbolji članci na ovu temu
Rice. 1. Glavni dijelovi stranice