Bootstrap okvir: brzi prilagodljivi izgled
Videotečaj korak po korak o osnovama prilagodljivog izgleda u okviru Bootstrap.
Naučite slagati jednostavno, brzo i učinkovito pomoću moćnog i praktičnog alata.
Izgled po narudžbi i plaća.
Besplatan tečaj "Site na WordPressu"
Želite li savladati WordPress CMS?
Dobijte lekcije o dizajnu web stranice i izgledu na WordPressu.
Naučite raditi s temama i rezati izglede.
Besplatan video tečaj o crtanju dizajna web stranice, izgleda i instalacije na CMS WordPress!
*Pređite mišem da biste pauzirali pomicanje.
Natrag naprijed
Savladavanje CSS-a: Izgled stranice
Jedna od glavnih prednosti CSS-a je mogućnost kontrole izgleda stranice bez korištenja oznaka. HTML dizajn . Međutim, stvaranje CSS predložaka ima nepravednu reputaciju kao teško, posebno među programerima koji su tek počeli. ovu tehnologiju . To je dijelom zbog činjenice da svi preglednici ne tumače CSS na isti način, ali još više zbog činjenice da sada postoji jednostavno veliki iznos različite tehnike za stvaranje izgleda pomoću stilskih listova.
Čini se da svaki web programer ima vlastite tehnike CSS rasporeda, a početnici webmasteri često koriste tehniku čak i ne razumiju kako funkcionira. Ovaj pristup crnoj kutiji koristeći CSS To, naravno, pomaže brzom postizanju rezultata, ali u konačnici ometa razvoj razumijevanja jezika programera.
Međutim, sve ove različite tehnike temelje se na tri osnovna koncepta: pozicioniranje, omatanje i manipulacija podstavom. Razne tehnike pomnije promatrajući se i ne razlikuju, a ako svladate osnovne koncepte i koncepte, bit će vam relativno lako izraditi vlastiti predložak CSS stranice.
Centriranje dizajna
Dugi redovi teksta vrlo su nezgodni ili čak teški za čitanje. Kako monitori i njihove rezolucije nastavljaju rasti, problem čitljivosti zaslona postaje sve veći problem. Jedan od načina rješavanja ovog problema je centriranje sadržaja stranice. Umjesto rastezanja sadržaja preko cijele širine zaslona, centrirani dizajni zauzimaju samo dio zaslona, dajući linijama čitljivu duljinu.
Stranice s centriranjem sadržaja sada su uobičajene, stoga naučite kako stvoriti dizajn s centriranjem koristeći CSS jedna je od prvih stvari koje novi web programeri žele naučiti. Dva su glavna načina za centriranje dizajna: jedan koristi automatski margine , u drugom - pozicioniranje i negativno punjenje.
Centriranje pomoću automatskog ispuna
Pretpostavimo da ste suočeni s tipičnim zadatkom horizontalnog centriranja diva s ID-om omot ("omot").
Da biste to učinili u praksi, samo trebate postaviti širinu diva omot i postavite vodoravne margine na auto .
U ovom primjeru, širina je postavljena u pikselima. No, naravno, možete ga jednostavno odrediti kao postotak širine tijela tijela dokumenta ili koristiti veličinu u "em" u odnosu na veličinu teksta.
Ovo radi u svim modernim preglednicima, ali ne i u IE 6. Srećom, IE netočno tumači svojstvo poravnanje teksta: središte , centriranje svega, ne samo teksta. To možete iskoristiti u svoju korist centriranjem svega u oznaci tijelo , uključujući div omot , zatim ponovno dodjeljivanje poravnanja na lijevo za blok sadržaj omot .
Tijelo ( poravnanje teksta: središte; ) #omotač ( širina: 720 px; margina: 0 automatski; poravnanje teksta: lijevo; )
Korištenje imovine poravnanje teksta Na sličan način je u biti hack, ali je potpuno bezopasan i neće negativno utjecati na vaš kod. Sada naš blok omot centriran u IE 6, baš kao iu drugim preglednicima koji su usklađeniji sa specifikacijom.
Centriranje dizajna pomoću pozicioniranja i negativnog ispuna
Metoda automatskog postavljanja je najpopularniji pristup, ali zahtijeva hack. Također zahtijeva oblikovanje dva elementa umjesto jednog. Iz tog razloga mnogi ljudi radije koriste pozicioniranje i negativne margine.
Počinjemo, kao u prethodnom primjeru, postavljanjem širine omot . Zatim postavljamo svojstvo položaj Za omot u smislu relativna i imovine lijevo u smislu 50%
. To nam omogućuje postavljanje lijevog ruba bloka omot u središtu stranice.
#wrapper (širina: 720px; pozicija: relativna; lijevo: 50%; )
Mi, međutim, trebamo nešto malo drugačije - želimo vidjeti središte bloka u središtu stranice omot . To možete postići primjenom negativnog ispuna na lijevoj strani bloka. omot jednaka polovici širine ovog bloka. Ovo će pomaknuti blok omot pola svoje širine ulijevo, pomičući ga u središte zaslona:
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 što vam može biti od koristi.
Uzorci na bazi omota
Postoji nekoliko načina za izradu predložaka koristeći CSS , uključujući apsolutno pozicioniranje i negativnu ispunu. Mislim da je najlakša metoda za korištenje temelji se na omatanju nekih elemenata oko drugih. Kao što naziv sugerira, u ovoj vrsti predloška jednostavno postavljate širinu pozicioniranih elemenata, a zatim ih prelomite lijevo ili desno.
Budući da ti plutajući elementi više ne zauzimaju nikakav prostor u tijeku dokumenta, nemaju utjecaja na blok elemente koji ih okružuju. Da biste izbjegli ovo ponašanje, morat ćete se odmotati na različitim sidrišnim točkama u svom predlošku. Umjesto uzastopne primjene prelamanja i poništavanja, prikladnije je primijeniti malo drugačiji pristup: primijeniti prelamanje na gotovo sve i zatim ga poništiti jednom ili dvaput na "strateškim" točkama u dokumentu, poput podnožja.
Predložak s dva stupca s prelamanjem
Za izradu jednostavnog predloška s dva stupca pomoću prelamanja, počnite s osnovna struktura (X)HTML. U našem primjeru (X)HTML framework sastoji se od zona: brendiranje, sadržaj, navigacijska zona i podnožje. svi ovu strukturu zatvoreno u "omot" - omot , koji će se vodoravno poravnati pomoću jedne od gore opisanih metoda.
Početna navigacija bit će s lijeve strane, a sadržaj s desne strane. Međutim, u strukturi stranice, područje sadržaja postavio sam iznad navigacijskog područja. Glavni razlog za to je što je sadržaj stranice najvažniji i treba ga postaviti što je moguće više u dokumentu, bliže početku.
Obično kada ljudi stvaraju predloške i koriste omotanje, oni daju svojstvo plutati značenje lijevo za oba stupca, a zatim stvorite "marginu" između stupaca koristeći svojstva margine ili padding. Kod ovog pristupa zvučnici su čvrsto pritisnuti u prostor koji im je dostupan – tako da nema mjesta za disanje. To obično ne uzrokuje probleme, ali neki preglednici prekidaju ovaj "uski" dizajn, sa stupcima naslaganim jedan ispod drugog.
To se može dogoditi u IE-u jer se IE temelji na "veličini" sadržaja, a ne na elementu koji sadrži sadržaj. U preglednicima koji se temelje na standardima, ako sadržaj ne stane u blok, jednostavno odlazi izvan bloka. Međutim, u IE-u, ako sadržaj ne stane u sadržajni element, on "rasteže" element, čineći ga većim. Ako se tako nešto dogodi u tijesnom, skučenom dizajnu, tada elementi više nemaju mjesta da ostanu jedan uz drugi, i jedan od njih kao da "propada", tone niže od drugog.
Kako biste izbjegli ovaj scenarij, pokušajte ne pretrpavati blok koji sadrži vaš dizajn omota. Umjesto korištenja horizontalnih margina, padding, možete stvoriti "virtualne margine" davanjem jednog bloka float:lijevo , a drugom - float:desno .
Sada, ako se jedan od elemenata malo poveća (unutar nekoliko piksela) u veličini, umjesto uništavanja cijelog dizajna, pomicanjem jednog od blokova ispod drugog, blok će "odlebdjeti" na teritorij "virtualnog polja".
CSS kod za postizanje ovog cilja je sam po sebi razumljiv. Jednostavno postavimo željenu širinu za svaki od stupaca, a zatim odredimo za navigaciju float:lijevo , a za sadržaj - float:desno .
#sadržaj (širina: 520px; float: desno;) #mainNav (širina: 180px; float: lijevo;)
Zatim, kako biste ispravno pozicionirali podnožje ispod navigacije i sadržaja, morate ga razmotati.
#footer ( jasno: oboje; )
Osnovna verzija je spremna. Dodajmo još par detalja. Gornje i donje ispune za cijeli navigacijski blok te lijeve i desne ispune za popis stavki u navigacijskom izborniku.
#mainNav ( padding-top: 20px; padding-bottom: 20px; ) #mainNav li (padding-left: 20px; padding-desno: 20px; )
Uvucimo i desnu stranu područja sadržaja:
#sadržaj h1, h2, p ( padding-desno: 20px; )
To je to, sada imamo spreman jednostavan CSS raspored u dva stupca.
Predložak s tri stupca pomoću omota
HTML okvir za izradu predloška s tri stupca vrlo je sličan onom koji smo koristili s predloškom s dva stupca, s jedinom razlikom što ima dva dodatna div blok : jedan za glavni sadržaj i još jedan za dodatni sadržaj.
Korištenje istog CSS pravila , kao i u slučaju predloška s dva stupca, možemo dati blok glavnog sadržaja float:lijevo , a dodatni blok - float:desno . Sve će se to dogoditi unutar već ispravno postavljenog bloka glavnog sadržaja. Na ovaj način dijelimo drugi stupac sadržaja na dva, stvarajući izgled s tri stupca.
Kao i prije, CSS kod je vrlo jednostavan. Vi samo trebate odrediti željenu širinu za svaki od blokova i dati svakom vlastito omatanje.
#mainContent (širina: 320px; float: lijevo;) #secondaryContent (širina: 180px; float: desno;)
Predložak možete malo očistiti uklanjanjem podloge s bloka sadržaj primjenom izravno na sadržaj bloka sekundarniSadržaj :
#secondaryContent h1, h2, p ( padding-lijevo: 20px; padding-desno: 20px; )
Tako smo dobili ovaj lijepi raspored u tri stupca.
Andy Budd, Cameron Moll i Simon Collison: "CSS Mastery: Advanced Web Standards Solutions"
p.s. Želite više materijala o primijenjenom izgledu? U nastavku pogledajte besplatne tečajeve. Ovo je serija videozapisa o fleksibilnom izgledu web stranice i besplatni tečaj o osnovama prilagodljivog izgleda. Oni će vam pomoći da brzo steknete potrebne vještine:
Svidio vam se materijal i želite mi se zahvaliti?
Izgled stranica je proces razvijanja strukture HTML dokumenta čiji je rezultat web stranica. Struktura web stranice određena je odgovarajućim HTML oznakama. Oznake - pravokutni blokovi spremnika za sadržaj - ne pojavljuju se u prozoru preglednika. Oni pregledniku govore o vrsti sadržaja, a preglednik na temelju tih informacija prikazuje njihov sadržaj – tekstualne ili medijske datoteke.
Kako stvoriti strukturu stranice pomoću blokova (blokovni izgled)
1. Kako rasporediti stranicu na dijelove
Da biste stvorili izgled stranice, morate odabrati glavne dijelove (odjeljke) dokumenta. Više o segmentnim elementima možete pročitati u članku.
Standardna web stranica sadrži sljedeće odjeljke:
Riža. 1. Glavni dijelovi stranice
Nećemo koristiti element , jer ga ne podržavaju svi preglednici.
Elementi , I
- zasnovani na blokovima, tako da će zauzeti cijelu širinu svog spremnika blok - element . Stranica s ovakvim izgledom izgledat će dobro na malim ekranima, ali na uređajima sa visoka rezolucija Tekst na takvim stranicama bit će teško čitljiv. Stoga morate dodati oznaku spremnika za sadržaj - sadržaj svakog odjeljka:
i postavite mu maksimalnu širinu, unutarnje popunjavanje, koje će odvojiti sadržaj od rubova zaslona uređaja s niskom rezolucijom, kao i vanjsko popunjavanje, koje vam omogućuje poravnavanje spremnika u sredini nadređenog bloka:
Spremnik ( širina: 100%; maks. širina: 1024 px; /*maksimalna širina može imati različitu vrijednost*/ padding: 0 15 px; margina: 0 auto; )
Tako smo dobili okvir za našu stranicu (visina odjeljaka je u ovom slučaju virtualni, jer bez sadržaja odjeljci imaju nultu visinu).
2. Izgled zaglavlja stranice i pozicioniranje njegovih elemenata
Počnimo označavati prvi odjeljak, takozvano zaglavlje web stranice. Element dizajniran za grupiranje uvodnih informacija i navigacijskih pomagala na stranici/mjestu. Dodajmo ga unutar oznake logo stranice i navigacijski linkovi:
Logo ( float: lijevo; ) nav ( float: desno; ) nav ul ( margina: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /*jedan način za postavljanje elemenata u crta */ )
Postoji nekoliko načina postavljanja blok elemenata u nizu. Svi su oni dati u lekciji.
Primijetite da je zaglavlje nestalo nakon što smo primijenili omot. To se dogodilo jer su plutajući elementi (oni koji imaju postavljeno svojstvo float) uklonjeni iz normalnog toka i nadređeni spremnik više ne vidi njihovu visinu, pa element a element unutar njega s klasom.spremnik kolabirao. Da popravimo ovu situaciju, upotrijebimo čišćenje toka za element s klasom .container:
Spremnik:nakon ( sadržaj: ""; prikaz: tablica; brisanje: oboje; )
Dodat ćemo mu i mi okomite margine , odvajajući elemente unutar njega od rubova zaglavlja. Kao rezultat toga, stilovi će izgledati ovako:
Spremnik (širina: 100%; maks. širina: 1024 px; ispuna: 15 px; margina: 0 automatski; )
Razmotrimo situaciju u kojoj slika služi kao logotip. Može se dodati izravno unutar oznake ili kao pozadinska slika. Slika će imati svoju visinu, koja se može jako razlikovati od visine navigacijskog izbornika, pa ćemo se suočiti s problemom okomito poravnanje elementi zaglavlja.
U našem primjeru, visina logotipa je 38px, tako da poravnate veze izbornika sa sredinom zaglavlja, morate ih postaviti na odgovarajuću visinu retka:
Nav a (dekoracija teksta: nema; visina linije: 38px; ) sl. 7. Usklađivanje veza izbornika zaglavlja
3. Napravite rešetku za glavni dio stranice
Glavni dio stranice najčešće je mreža blokova različitih širina. Pozicioniranje takvih blokova također se vrši pomoću svojstva float. Svaki red blokova omotat ćemo dodatnim blokom s klasom .row:
Za element s klasom .row također primjenjujemo čišćenje toka:
Container:after, .row:after ( content: ""; display: table; clear: both; )
Da biste odvojili retke jedan od drugog, možete dodati donju marginu:
Red ( margin-bottom: 15px; )
Visina blokova mreže određena je visinom njihovog sadržaja, pa može biti različita:
Visina blokova može se odrediti eksplicitnim određivanjem, na primjer, .row div (visina: 100px) . Ali u ovom slučaju, morate biti sigurni da prilikom dodavanja prilagodljivosti izgledu, sadržaj blokova neće izlaziti izvan ruba bloka.
Ako trebate postaviti boju pozadine za blokove retka, to možete učiniti na sljedeći način: za element s klasom .row dodajte novu klasu koja će vam omogućiti stiliziranje samo ovog retka (ispada . red red-jedan), odredite mu 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 odjeljak stranice sadrži samo dva bloka, tada se dodatni omotni red ne može dodati:
4. Izgled podnožja stranice
Podnožje stranice, ili podnožje, obično sadrži informacije o autorskim pravima, dodatne poveznice itd. Svi ti podaci također su smješteni u stupce, koji mogu biti iste ili različite širine.
Svi predstavljeni predlošci za vašu web stranicu izgrađeni su na njima moderne verzije HTML5 i CSS3. Osim toga, autori koriste takve modne značajke kao ravni dizajn , responzivni dizajn, prilagodljivi izgled, jQuery klizači, CSS3 animacija itd. Odnosno, ako tražite predložak za mobilnu web stranicu, možete odabrati bilo koji od predstavljenih. Prekrasni html5 predlošci 2017 , iako besplatni, izgledaju premium.
Ovdje ćete pronaći više od 50 besplatnih responzivnih predložaka 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 je ono što vam treba!
Ažurirano 3.12.2019 : Otkako je članak napisan prije 2 godine, mnoge veze su pokvarene. Ili su se vlasnici predložaka spojili, ili promijenili status predložaka iz besplatnih u plaćene, ili su vanzemaljci sve pokvarili. Molimo vas, dragi čitatelji, ako pronađete takav link, ostavite ga u komentarima, ispravit ću ga.
1. Snijeg - besplatni predložak odredišne stranice koji koristi HTML5 i CSS3
Predložak html5 css3 snježne odredišne stranice izgrađen je na okviru Bootstrap. Predložak je vrlo moderan i cool! Fiksna pozadina i ogromni Jumbotron - stvar koja prikazuje glavni sadržaj stranice. Što je najvažnije na landing stranici? Tako je, poziv na akciju. Naravno, predložak je u potpunosti prilagođen Mobilni uredaji . Možete ga čak koristiti kao osnovu za vlastite predloške.
2. Sima - šik predložak komercijalne web stranice
Ovaj html5 css3 predložak također je izgrađen na okviru Bootstrap. Na ovom predlošku možete izraditi jedinstvenu web stranicu s portfeljem, svojim timom, cijenama, recenzijama i svim ostalim što će biti potrebno. Na primjer, ovaj je predložak savršen za web mjesto za usluge čišćenja. Animacija u ovom predlošku je glatka i impresivna, čista i dobra čitljivi fontovi . Upravo savršen predložak!
3. Bijelo - prekrasan predložak od jedne stranice!
Posebnost predloška web stranice White dvije su opcije pozadine na vrhu. Vaš izbor je ili klizač sa slikama ili video pozadina. Vrlo kvalitetan i učinkovit predložak za stranicu!
4. Platz - besplatni predložak web stranice temeljen na HTML5 mreži
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ška za blog ili web stranicu.
5. Mart eCommerce - prekrasan HTML5 i CSS3 predložak web stranice za e-trgovinu
Svjež i moderan dizajn predloška 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 datoteka koju možete prilagoditi svojim potrebama.
6. Nava - spektakularni HTML5 i 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. Mnoge varijacije postavki predloška omogućuju vam da svoju web stranicu učinite jedinstvenom. Lagan, lijep i responzivan 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 učinkovito prikazati svoj rad na internetu. Kao što naziv sugerira, predložak web stranice idealan je za portfelj.
8. Mountain King - popularan i funkcionalan HTML5 i CSS3 predložak web stranice
Planinska tema u dizajnu web stranica u posljednje je vrijeme vrlo popularna. Predložak web stranice Mountain King nije iznimka. Uključuje 336 vektorskih ikona iz Typiconsa. Plus izvrsna animacija pomoću CSS3. Predložak je savršen za web stranice za putovanja i portfelje.
9. Beauty Spa - cool HTML5 i CSS3 predložak web stranice za spa salone
Beauty Spa responzivni je predložak web stranice koji ima mnogo značajki, idealan za spa stranice, zdravstvene ili fitness centre, stranice za jogu ili čak frizerske salone. Izvrsna čitljivost fontova i nenametljiv minimalizam.
10. Bent – elegantna i učinkovita odredišna stranica za web stranice koje koriste HTML5 i CSS3
Bent je super besplatni predložak stranica na html5 i css3. Responzivni dizajn, CSS3 animacija, paralaksno pomicanje, prilagođena navigacija i druge stvari. Ovo je čist dizajn predloška za web-mjesta koja žele koristiti uravnotežen dizajn kako bi posjetitelji uživali u izgledu i dojmu web-mjesta dok još uvijek jasno vide njezin temeljni sadržaj.
11. Trokut - 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 dotjerati svoj cool dizajn, ali ga ne pogoršati. Predložak dolazi s više od 40 unaprijed dizajniranih stranica koje vam omogućuju da prilagodite svoje web mjesto prema želji.
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, copywritere i druge radnike koji se bave olovkom i papirom. Predložak se također može koristiti za osobni blog , blog o putovanjima, kreativnosti itd. Kreativni dizajn i prilagodljivi izgled predloška svidjet će se mnogima.
13. Bodo - odličan predložak za osobnu web stranicu
Bodo- lijep predložak stranica na HTML5 i CSS3, što je idealno za osobnu stranicu. Posebno za organiziranje portfelja. Čista i jasna tipografija, klizač vrtuljka, skočni prozori skočni prozori za izlaganje radova i još mnogo toga.
14. Objektiv - savršen HTML5 predložak web stranice za fotografe
Fotografi uvijek traže savršen predložak za svoju web stranicu kako bi svoj rad prikazali u punom sjaju, dojmljivo i što je najvažnije - veliko! Rijetki predložak web stranice ispunjava ove zahtjeve. Objektiv je jedan takav predložak web stranice za fotografe.
15. Spectral - jedinstveni ručno rađeni predložak web stranice koji koristi HTML5 i CSS3
Ako tražite besplatni predlošci web stranica o auto temama , onda će Spectral biti idealno rješenje . Apsolutno ovdje jedinstven dizajn ručno rađen 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 o apsolutno bilo kojoj temi, bilo da se radi o impresivnom blogu o putovanjima ili galeriji fotografija, web stranici o automobilima ili davatelju usluga hostinga.
16. Oxygen - jednostrani HTML5 i CSS3 predložak web stranice
Oxygen je praktičan i jedinstven predložak za poslovnu web stranicu. Moderan dizajn stana, prilagodljiv raspored. Na primjer, ovaj je predložak idealan za web stranicu o mobilne aplikacije ili mobilne tehnologije.
17. Mobirise Bootstrap - savršen besplatni predložak web stranice na HTML5 i CSS3
Ako tražite besplatni predložak web stranice, onda je Mobirise Bootstrap savršen za početak. Ovo je multifunkcionalni predložak s mnogo uključenih dodataka. Tri unaprijed napravljena izgleda početna stranica a blog će vam pomoći u tome. Mobirise Bootstrap također je 100% SEO optimiziran i prilagođava se bilo kojoj veličini zaslona.
18. La Casa - lijep 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 vrlo Prekrasan dizajn Svidjet će se ne samo vlasniku stranice, već i posjetiteljima.
19. Drifolio - moderan HTML5 predložak web stranice za portfelj
Moderan i animirani HTML5 i CSS3 predložak web stranice za organiziranje portfelja. Čist dizajn, izvrsna tipografija, prekrasne ikone i još mnogo toga.
20. Pluton - svijetao i moderan predložak za web stranicu na jednoj stranici
Pluton je svijetao i učinkovit predložak web stranice temeljen na Bootstrapu. Moderan predložak web stranice s 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 izradu komercijalne web stranice na jednoj stranici. Predložak ne samo da izgleda profesionalno, već je i prilagođen svim vrstama ekrana. Predložak se temelji na Bootstrapu.
22. Sublime - fascinantan predložak web stranice na HTML5 i CSS3
Sublime je čist i nevjerojatno lijep HTML5 i CSS3 predložak web stranice savršen za startup, kreativnu agenciju ili portfelj web stranicu. Responzivni dizajn i dvije opcije stranice na izbor.
23. Drvo - neobičan i lijep HTML5 i CSS3 predložak web stranice
Drvo je svježa, elegantna i neobična tema predloška web stranice na jednoj stranici. Dijagonala je glavna značajka dizajna ovog predloška. Predložak je savršen za poslovnu web stranicu ili portfelj. Ugrađena je galerija, karta i kontakt podaci koje možete jednostavno prilagoditi svojim potrebama.
24. E-Shopper - najbolji predložak web stranice za e-trgovinu
E-Shopper izvrstan je predložak web stranice za e-trgovina . Izgrađen na temeljen na bootstrapu s nevjerojatnim skupom značajki za potpunu i učinkovitu internetsku trgovinu.
25. Magnetic - besplatni HTML5 i CSS3 predložak za foto stranicu
Apsolutno zadivljujući HTML5 i CSS3 predložak za izradu foto web stranice ili portfelja za dizajnera, ilustratora ili umjetnika. Ovaj predložak podiže ljestvicu profesionalnih predložaka za nova razina ! Responzivan dizajn, izvrsna podrška za sve vrste uređaja za prikaz, jednostavna i praktična navigacija i još mnogo toga.
26. Mabur Portfolio - prekrasan predložak web stranice u minimalističkom stilu koji koristi HTML5 i CSS3
Ravni dizajn ovog minimalističkog predloška web stranice savršen je za stvaranje portfelja. U predlošku su svi detalji savršeno provjereni!
27. Moderni Bootstrap HTML5 - besplatni predložak web stranice na jednoj stranici
Ovaj besplatni one-pager temeljen na Bootstrap okviru savršen je za korporativne web stranice, kako za male tako i za velike tvrtke. Flat dizajn, prilagodljiv raspored, svi elementi dizajna visoke kvalitete. Predložak dolazi u 4 različite boje.
28. Infusion - moderan predložak web stranice na jednoj stranici koji koristi HTML5 i CSS3
Infusion je izvrstan primjer HTML5 i CSS3 predloška web stranice koji je posebno dizajniran za stvaranje poslovnog portfelja. Bogata funkcionalnost ovog predloška omogućuje vam učinkovit rad s klijentima i privlačenje novih.
29. Yebo - predložak korporativne web stranice 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 uređivanja.
30. Twenty - spektakularan HTML5 i CSS3 predložak web stranice s paralaksom
Ovaj jedinstveni i vrlo lijep predložak web stranice s efektom paralakse nikoga neće ostaviti ravnodušnim. Predložak jedne stranice izgrađen na čistom HTML5 i CSS3 sa prilagodljivi raspored , impresivne pozadine, podrška društveni mediji itd.
31. Urbanic – odličan HTML5 i CSS3 predložak web stranice na Bootstrapu
Urbanic je svjež i cool HTML5 i CSS3 predložak web stranice izgrađen na Bootstrap motoru. Savršeno za početak izrade vaše web stranice odmah bez ikakvih muka. Predložak je savršeno prilagođen svakoj veličini zaslona.
32. Design Showcase - HTML5 portfolio predložak web stranice
Vizualno skladan i učinkovit HTML5 predložak web stranice za organiziranje vašeg portfelja. 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 elegantnog predloška web stranice za izradu jednostranika. Kompatibilan sa svima moderni preglednici i bit će adekvatno prikazan svugdje.
34. KreativePixel - besplatni predložak web stranice za fotografe
Još jedan izvrstan predložak web stranice za fotografe. Responzivan dizajn i vrlo zgodno razvrstavanje fotografija u portfelje i galerije svidjet će se mnogim ljubiteljima fotografije. Predložak također koristi efekt paralakse, što također impresionira gledatelje prilikom pregledavanja fotografija.
35. Retina Ready Responsive App - besplatni predložak odredišne stranice koji koristi HTML5 i CSS3
Kao što naziv sugerira, ovaj prekrasan predložak web stranice nije samo savršeno prilagođen odredišne stranice , ali i zadovoljava nove mobilne trendove, posebice u pogledu jasnoće prikaza na uređajima s Retina zaslonima.
36. Brushed - responzivni HTML5 i CSS3 predložak web stranice temeljen na Bootstrap motoru
Brushed je odgovarajući, besplatni HTML5 i CSS3 predložak web stranice temeljen na Bootstrap motoru. Također optimizirano za Retina zaslone (iPhone, iPad, iPod Touch i MacBook Pro Mrežnica).
37. Big Picture HTML5 i CSS3 predložak web stranice
Dobrodošli u Big Picture! Ovaj responzivni HTML5 predložak web-mjesta savršen je za sve kreativne ljude koji imaju što pokazati, i to veliko i impresivno na svojoj web-lokaciji. Osim toga, predložak koristi izvrsnu animaciju.
38. Tesselatte - besplatni responzivni HTML5 i CSS3 predložak
Jednostavan predložak na jednoj stranici koji uzima u obzir sve potrebne alate za uspješnu izradu web stranice. Idealno za osobni blog pisca, copywritera ili samo ljubitelja pisane riječi.
39. Overflow - jedinstveni predložak web stranice na HTML5 i CSS3
Ovaj jedinstveni čisti HTML5 i CSS3 predložak web stranice savršen je za svaku kreativnu osobu. Potpuno je responzivan i potpuno besplatan.
40. Runkeeper - responzivan i vrlo lijep predložak web stranice
Runkeeper je besplatan, responzivan i vrlo lijep predložak web stranice. Može se koristiti za web stranice bilo koje teme. Briljantan stil i jasni fontovi, adaptivni dizajn i impresivne detalje uzorka. Sve radi za vas!
41. Pinball Responsive Grid Style - odličan predložak web stranice temeljen na mreži
Ovaj nevjerojatni profesionalni predložak web stranice temeljen na mreži savršen je za korporativnu web stranicu. Moderan ravni dizajn i responzivna struktura predloška savršeno se prikazuju na oba zaslona veliki monitori , i mobilnih uređaja.
42. Prologue - čist 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. Privlačna pomična bočna navigacijska traka i čisti redovi stranice jednostavno su savršena kombinacija!
43. Helios - moderan predložak web stranice koji koristi čisti HTML5 i CSS3
Još jedan predložak web stranice u stilu minimalizma i čistih oblika. Posebno dizajniran za iskorištavanje prednosti velikih zaslona, ali i savršeno prilagođen malim zaslonima 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, no to je upravo ono što mnogima nedostaje.
45. Strongly Typed - vrlo lijep predložak web stranice u polu-retro stilu
Novi predložak web stranice s minimalističkim polu-retro stilom. Samo što retro više nije u modi, ali njegov lagani dašak je dobrodošao. Ovaj predložak web stranice u potpunosti je responzivan, izgrađen na čistom HTML5 i CSS3 i uključuje sve potrebne osnovne elemente stranice. Strongly Typed predložak idealan je za kreativne web stranice. Na primjer, za stranicu o uređenju doma.
46. Prugasti - čist, lijep i funkcionalan HTML5 i CSS3 predložak web stranice
Svježe i čisto, lijepo i funkcionalno, novi predložak stranica na HTML5 i CSS3. Ima sve u svom arsenalu potrebni elementi stranice, uključujući dizajnirane citate, tablice i popise, kao i prilagođenu bočnu traku (desnu ili lijevu - kako želite).
47. Paralelizam - neobičan i moderan predložak web stranice koji koristi HTML5 i CSS3
Parallelism je moderan predložak web stranice za organiziranje portfelja ili fotografija. Ono što ga čini neobičnim je to što skrolanje ovdje nije okomito, kao inače, već vodoravno. Ovo web mjestu daje poseban šik i nezaboravnost.
48. Miniport - potpuno responzivni HTML5 predložak web stranice u minimalističkom stilu
Izvrstan predložak web stranice u minimalističkom stilu na HTML5. Savršeno za osobnu web stranicu/blog, kao i za malu korporativnu web stranicu na jednoj stranici ili kao web stranicu s posjetnicama.
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. Responzivan i prikladan i za autora i za korisnike.
50. ZeroFour - impresivan i moderan predložak web stranice koji koristi HTML5 i CSS3
I posljednji na popisu, ali ne i najmanje važan u smislu kvalitete i vizualne učinkovitosti, je predložak web stranice - ZeroFour. Moderan dizajn , Vrlo prekrasan jelovnik , savršeno usklađeni oblici i gumbi, prekrasne ikone i još mnogo toga. I sve je to potpuno besplatno!
Nadam se da ste pronašli nešto prikladno za sebe među ovim nevjerojatnim HTML5 i CSS3 predlošcima web stranica. Sretno!
Označite ga kako biste ga brzo pronašli.
PS: Ako ne možete napraviti izbor, pročitajte članak "Ne znam što želim". Bit će korisno.
Gdje obično počinje proces postavljanja? Započinje proučavanjem izgleda ili izgleda budućeg mjesta. Najčešće se ti izgledi izrađuju u programu Adobe Photoshop , dakle, vi kao layout dizajner morate znati koristiti ovaj program, naime znati izrezati slike iz layouta, izmjeriti uvlake između elemenata, izračunati veličine i parametre raznih komponenti buduće web stranice itd. . Prije svega, postavimo radni prostor u Adobe Photoshopu radi lakšeg rada.
Svi primjeri će biti prikazani u programu Adobe Photoshop CS5 , sa sučeljem na engleskom jeziku.
Kada otvorite Adobe Photoshop, vidjet ćete nešto poput ovoga:
Traka glavnog izbornika;
Ploča s opcijama;
Alatna traka;
Dodatne ploče.
Moramo konfigurirati skup dodatnih panela. Za početak idite na izbornik Prozor – Novi radni prostor :
Unesite naziv za novi radni prostor, na primjer, moj radni prostor , i pritisnite Uštedjeti . Sada moramo odabrati potrebne ploče za rad. Idite na prozor i potvrdite okvire pored Povijest , Info , Slojevi , Navigator , Mogućnosti , Alati . Možete poništiti odabir preostalih ploča ako su označene.
Sada moramo osigurati ove ploče. Da biste to učinili, kliknite na vrh panela i povucite ga na željeno mjesto tako da na kraju vaš radni prostor izgledao ovako:
Kada se pojavi plava prozirna traka, otpustite pokazivač kako biste usidrili ploču na tom mjestu:
Za zatvaranje nepotrebnih kartica kliknite na ikonu s desne strane gornji kut kartice i odaberite stavku s padajućeg izbornika Zatvoriti :
Prvi izgled koji ćemo izraditi zove se jednostavan_tekst.psd , nalazi se u mapi šablone . Otvorite ga u Adobe Photoshopu držeći pritisnute tipke Ctrl+O (ili putem izbornika Datoteka – Otvoren ), i odaberite datoteku.
Uključite ravnalo pomoću prečaca Ctrl+R ili kroz izbornik Pogled – Vladari :
Sada dvaput kliknite na ravnalo i otvorite karticu Jedinice i ravnala za postavljanje mjernih jedinica. Odaberite u bloku Jedinice Za Vladari I Tip mjerne jedinice pikseli:
Sada je sve spremno, možete početi sastavljati izgled.
Izrada strukture web stranice
Napravite mapu na radnoj površini i dajte joj naziv jednostavan tekst . U ovoj mapi kreirajte dvije datoteke index.html I stil.css .
Kao što se sjećate, mi stvaramo strukturu web stranice na HTML jezik . Dakle, prvo otvaramo datoteku index.html , i upišite originalni kod u njega:
Jednostavan tekst
Sada između oznaka
stvoriti blok pomoću oznake
:
Jednostavan tekst
Označiti
je univerzalni blok element i definira blok na web stranici.
Napišimo u ovaj blok elemente koji su prisutni na izgledu, naime naslov i paragrafe:
Jednostavan tekst
Sami dodajte tekst između ovih oznaka.
Sada u kontejneru
napišite put do datoteke sa stilovima:
Oblikovanje web stranice
Ako otvorite index.html u pregledniku ćete vidjeti web stranicu napisanu u čistom HTML-u. Vrlo se razlikuje od onog prikazanog na modelu. To ćemo riješiti kaskadnim listovima stilova.
Otvorite svoju datoteku style.css i poništite sve ispune pomoću univerzalnog selektora zvjezdice:
* ( margina: 0; ispuna: 0; )
Sada zapišimo svojstva oznake
:
Tijelo (boja pozadine: #e35b5b; veličina fonta: 16px; visina linije: 24px; boja: bijela; obitelj fonta: 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 razmak između redova , stil, obitelj fontova i boja teksta? Da biste to učinili, odaberite sloj s tekstom, a zatim otvorite ploču Lik . Ova ploča će prikazati sljedeće opcije:
Imajte na umu da smo za boju teksta, umjesto heksadecimalnog koda, napisali naziv nijanse: boja: bijela; . Prikladno je koristiti nazive nijansi za crnu i bijela bijelo , budući da se ime puno brže zapisuje nego heksadecimalni kod. Svi nazivi nijansi boja nalaze se u ovoj tablici.
Svojstva za blok
Za ovaj blok odredit ćemo širinu, kao i gornji, lijevi i desni ispun:
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 ispun, 12px – desni ispun, 20px – donji ispun, 15px – lijevi ispun. Ova se oznaka obično koristi kada su uvlake na svakoj strani različite.
U drugom slučaju napisane su tri vrijednosti, na primjer, margina: 10px 12px 20px; : 10px – gornji razmak, 12px desni i lijevi razmak, 20px – donji ispun. Ovaj zapis je prikladan za korištenje kada su vrijednosti s desne i lijeve strane jednake, ali su vrijednosti na vrhu i dnu različite. Automatska vrijednost koristi se kada želite da preglednik automatski izračunava lijevo i desno ispunjavanje.
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 dolje jednake, a uvlake s desne i lijeve strane su jednake, tada je zgodno zapisati samo dvije vrijednosti, kao u našem primjeru.
U četvrtom slučaju piše se jedna vrijednost, npr. margina: 10px; : ispuna sa svake strane je 10 px. Kada su parametri jednaki sa svih strana, zgodno je koristiti upravo takav zapis.
Kako izmjeriti širinu ili visinu elementa u Adobe Photoshopu? Razmotrimo jedan način: uzmite alat Alat Rectangular Marquee (prečac M) :
Zatim odaberemo područje, na primjer, moramo saznati uvlaku od gornjeg ruba izgleda do početka sadržaja, odaberite ga:
U ploči Info pogledajte vrijednosti visine H ili vrijednost širine W ako trebate znati širinu elementa:
Idemo na naslov
Ovdje moramo odrediti veličinu, prored, sjenu i ispunu na dnu. Već znate kako uknjižiti prve dvije nekretnine.
Za specificiranje sjene potrebno nam je svojstvo tekst-sjena :
Ovdje 0
– uvlaka po X osi;
1px – pomak duž Y osi;0
– radijus zamućenja sjene;rgba(0,0,0,0,3) – boja sjene. U ovom slučaju koristimo RGBA format , uključujući alfa kanal koji postavlja prozirnost elementa. U zagradama prve tri vrijednosti koje su odgovorne za boju u formatu rgb , a zadnja vrijednost je odgovorna za transparentnost. Ova vrijednost je zapisana u rasponu od 0 do 1, gdje 0 predstavlja punu prozirnost, a 1 neprozirnost.Kako saznati parametre sjene u Adobe Photoshopu? Odaberite željeni sloj na ploči slojeva i kliknite na ikonu ƒx :
Otvara se prozor Stil sloja . Morate odabrati karticu Drop Shadow :
Evo parametra Neprozirnost odgovoran za transparentnost, parametar Udaljenost je odgovoran za uvlačenje duž Y osi, parametar Veličina je odgovoran za zamućenje, a parametar Kut je odgovoran za udubljenje duž osi X. Budući da naša sjena pada pod pravim kutom, udubljenje duž osi X bit će jednaka nuli . Boja sjene može se pronaći u okviru nasuprot parametra Način miješanja :
Vrijednost boje u RGB formatu i s alfa kanalom u ovom će slučaju izgledati ovako:
Tekst-sjena: 0 1px 0 rgba(0,0,0,0.3);
Ostalo je zapisati donju uvlaku.
Ako trebate napisati vrijednost za jednu od četiri strane, koristite ovaj zapis:
margin-top – gornja uvlaka;margin-desno – desno udubljenje;margina-dno – donja uvlaka;margin-lijevo – lijevo uvlačenje.Budući da trebamo odrediti donju marginu, napisat ćemo margin-bottom: 30px;
Kao rezultat, dobivamo ovaj kod u datoteci stil.css :
* ( margina: 0; padding: 0; ) body ( background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; ) div ( width: 724px; margina : 43px auto 0; ) h1 (veličina fonta: 60px; visina linije: 62px; sjena teksta: 0 1px 0 rgba(0,0,0,0.3); margina-dno: 30px; )
Prvi paragraf. Susjedni 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); margina-dno: 42px; )
Ako sada spremite promjene i otvorite datoteku index.html u pregledniku, vidjet ćete da su ova svojstva primijenjena na sve odlomke na stranici. Budući da ova svojstva trebamo zapisati samo za prvi odlomak, u ovom slučaju možemo koristiti susjedni selektori . Što je? U html predlošku, oznake
I (uzimamo točno prvi odlomak) idu jedan za drugim, što znači da su susjedne 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); margina-dno: 42px; )
Sada će se ova svojstva primijeniti samo na prvi odlomak.
Zadnji paragraf. Nastava u CSS-u
Sada prijeđimo na zadnji paragraf. Budući da se također razlikuje od glavnog teksta, dodijelit ćemo mu klasu. U html predložak napišite atribut klase za zadnji odlomak s vrijednošću last-p. Naziv klase, kao i identifikator, moraju počinjati slovima latinične abecede:
U CSS-u se klase pišu ovako:
P.last-p (boja: #ffbfbf; poravnanje teksta: desno; sjena teksta: 0 1px 0 rgba(0,0,0,0.3); )
Ova svojstva će funkcionirati samo za posljednji odlomak u našem predlošku.
Za razliku od identifikatora, možete koristiti klasu s određenom vrijednošću na stranici koliko god puta želite.
svojstvo poravnanja teksta s vrijednošću desno koristi se kada trebate poravnati tekst udesno. Također možete koristiti druge vrijednosti, na primjer, text-align: center; u ovom slučaju tekst će biti poravnat prema sredini bloka.
Ostali paragrafi
Za preostale paragrafe pišemo sljedeće svojstvo:
P (margina-dno: 30px; )
Ostala svojstva: boja, obitelj fontova, veličina, prored, ova će oznaka naslijediti nadređeni element , tj. označiti
.
Ako smanjimo prozor preglednika, možemo vidjeti da je sadržaj pričvršćen na strane prozora. Da biste to popravili, dodajte ispunu div selektoru:
Selektori grupiranja
Ako nekoliko elemenata web stranice sadrži ista svojstva sa iste vrijednosti , na primjer, kao u našem primjeru, naslov i zadnji odlomak imaju zajedničko svojstvo - ovo je sjena, tada možete grupirati te selektore tako da ih napišete odvojene zarezima:
H1,p.last-p (text-shadow: 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 selektora h1 i p.last-p.
Video za lekciju
1. dio
Zadnja izmjena: 24.04.2016
Obično se web stranica sastoji od mnogo raznih elemenata , koji može imati složenu strukturu. Stoga se kod izrade web stranice javlja potreba na pravi način pozicionirajte ove elemente, stilizirajte ih tako da budu smješteni na stranici na željeni način. Odnosno, postavlja se pitanje izrade izgleda stranice i njenog izgleda.
postojati razne načine , strategije i vrste rasporeda. U početku je raspored temeljen na tablici bio uobičajen. Budući da tablice omogućuju, po potrebi, vrlo lako i jednostavno podijeliti cijeli prostor web stranice na retke i stupce. Redovima i stupcima je vrlo jednostavno upravljati i lako je pozicionirati bilo koji sadržaj u njima. To je ono što je odredilo popularnost rasporeda tablica.
Međutim, tablični izgled ne stvara najfleksibilnije stranice u dizajnu, što je posebno relevantan aspekt u svijetu u kojem ne postoji jedinstvena razlučivost zaslona, tj. veliki ekrani na televizorima, malim ekranima na tabletima i phabletima, vrlo malim ekranima na pametnim telefonima itd. Izgled stola nije mogao zadovoljiti svu tu raznolikost zaslona. Stoga je postupno zamijenjen blokovskim izgledom. Blok raspored je relativno konvencionalni naziv za metode i tehnike izgleda, kada većina web stranica koristi CSS svojstvo float , a glavni građevni element web stranica je element
, odnosno u biti blok. Koristeći svojstvo float i
div elementi ili drugih elemenata, možete stvoriti strukturu stranice od nekoliko stupaca, kao kod izgleda tablice, što će biti mnogo fleksibilnije.
Prethodno se u jednoj od prethodnih tema raspravljalo o učinku svojstva float. Iskoristimo ga sada za izradu web stranice s dva stupca. Recimo da imamo standardno zaglavlje i podnožje na vrhu i dnu, te dva stupca u sredini: stupac s izbornikom ili bočnom trakom i stupac s glavnim sadržajem.
Prvo, definirajmo sve blokove. Kada radite s elementima koji koriste float i svojstvo float, njihov redoslijed je važan. Dakle, kôd za plutajući element koji ima postavljeno svojstvo float mora doći prije elementa koji se okreće oko plutajućeg elementa. To jest, blok bočne trake ići će prije bloka glavnog sadržaja:
Izgled bloka u HTML5
Glavni sadržaj
Odnosno, do sada je rezultat otprilike sljedeća stranica:
Visina, obrub i podstava blokova u ovom slučaju dodani su samo radi ljepote, kako bi se identificirao prostor bloka i odvojio ga od ostalih.
Dalje, da bismo pomaknuli blok bočne trake lijevo od glavnog bloka sadržaja i dobili učinak omatanja, 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 također možete koristiti postotke, na primjer 30% - 30% širine spremnika tijela. S jedne strane, blokovima fiksne širine lakše je upravljati, ali s druge strane, postotne širine vam omogućuju stvaranje fleksibilnijih, fluidnijih blokova čija se veličina mijenja kako se mijenja veličina prozora preglednika.
Zadnji korak je postavljanje uvlake bloka s glavnim sadržajem iz bloka bočne trake. Budući da kod strujanja oko pokretnog bloka može teći oko plutajućeg elementa i s desne i s donje strane, ako plutajući element ima manju visinu, tada moramo postaviti pomak najmanje jednak širini plutajućeg elementa. Na primjer, ako je širina bočne trake 150 piksela, tada se blok glavnog sadržaja može postaviti na 170 piksela, što će stvoriti prazan prostor između dva bloka.
Međutim, ne biste trebali eksplicitno odrediti širinu bloka glavnog sadržaja, jer ga preglednici 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( boja pozadine: #ddd; float: lijevo; širina: 150px; ) #main(boja pozadine: #eee; visina: 200px; margina-lijevo: 170px; /* 150px (širina bočne trake) + 10px + 10px (2 alineje) */ )
Kao rezultat toga, imat ćemo bočnu traku lijeva strana iz glavnog bloka:
Visina blokova u ovom je slučaju naznačena uvjetno radi veće jasnoće; u stvarnosti, u pravilu, visinu će automatski postaviti preglednik.
Stvaranje desne bočne trake bit će slično, samo što sada trebamo postaviti bočnu traku na lebdenje: desno, a blok glavnog sadržaja na desno ispunjavanje:
#sidebar( boja pozadine: #ddd; float: desno; širina: 150px; ) #main(boja pozadine: #eee; visina: 200px; margina-desno: 170px; )
pri čemu html markup ostaje isti, blok bočne trake i dalje mora prethoditi bloku glavnog sadržaja.
Najbolji članci na temu
Riža. 1. Glavni dijelovi stranice