Razdvajanje stranica u blokove u css-u. blok model

Dakle, od jednostavnog do složenog. Da vidimo kako će se pojaviti div blokovi podrazumevano bez stilova koji utiču na njihovu poziciju. Radi jasnoće, dodaćemo stilove elementima inline, preko atributa style.

Dodajmo vrijednost širine za svaki blok:

Vidi se da se svaki blok, prema specifikaciji, nalazi na novom redu. Ovo je njihovo normalno ponašanje.

Sada se postavlja pitanje kako urediti div blokovi na jednoj liniji, jedan za drugim?

Da biste to učinili, postoji svojstvo koje određuje na kojoj će se strani blok biti prisiljen poravnati. Istovremeno, sa druge ivice se može obaviti drugim elementima.

Svojstvo float ima sljedeće vrijednosti:

• lijevo - blok je lijevo poravnat, premotavanje na desnoj strani
• desno - blok je poravnat udesno, premotavanje lijevo
• none - premotavanje nije postavljeno, blok se ponaša po defaultu, kao u prethodnim primjerima.

Dodajmo float:left našim blokovima tako da se blokovi poravnaju ulijevo:

Kao rezultat toga, blokovi su poređani u jednu liniju. U redu, recimo da želimo dodati još jedan div na dnu, a to možemo učiniti bez navođenja svojstva float:

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Jedinica 4

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Jedinica 4

Zašto se to dogodilo? Ukratko, ovo se dešava zato što elementi sa float-om ispadaju iz toka dokumenta. Međutim, ovo je tema za poseban članak. Ovdje ćemo se upoznati s novim svojstvom koje kontrolira ponašanje plutajućih elemenata:

• lijevo - onemogućuje premotavanje na lijevoj strani, svi elementi će biti prikazani u novom redu (ispod elementa)
• desno - sprečava omotavanje elementa na desnoj strani
• oba - onemogućuje premotavanje elementa s obje strane, preporučljivo je koristiti ga kada je potrebno eksplicitno prikazati element iz novog reda ili se ne zna s koje strane je moguće premotati druge elemente

Dodajmo clear:left svojstvo Bloku 4, koje će spriječiti da se ovaj element omota oko drugih plutajućih elemenata na lijevoj strani.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Jedinica 4

Blok 4 se postavlja na novu liniju, kako nam je potrebno.

IN ovaj slučaj znamo kako se drugi blokovi nalaze, pa smo u primjeru odmah naznačili clear: left. Postoje situacije kada ne znamo tačno na koju stranu će se plutajući blok sastati, pa je u takvim slučajevima vredno navesti clear:both, što poništava premotavanje na obe strane. Sada smo shvatili kako rasporediti div blokove na istoj liniji horizontalno.

Treba imati na umu da su blokovi float vrijednost nalazi se na istoj liniji, ako širina dozvoljava roditeljski element. Ako blok elementi ne stanu u red, premotat će se u novi red. Ako je to kritično, na primjer, prilikom postavljanja rasporeda, morate to uzeti u obzir, a za blokove s plutajućim obavezno postavite širinu - fiksnu (px) ili gumenu (%, rem itd.). Pogledajmo ove situacije.

Kako uticati na blokove ako želimo da te blokove postavimo u centar?

Klasično rješenje bi bilo dodavanje roditelja u blokove i korištenje margine: 0 auto svojstvo;

Zašto smo samom roditelju dali .wrapper klasu? "wrapper" u prijevodu znači "omotač". Nekako je uobičajena praksa da se definiše ime klase kada element obavija druge blokove i na taj način omogućava da se njima manipuliše/utječe promjenom samog roditelja.

Uzmimo oznaku iz prethodnih primjera i precizirajmo je.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Jedinica 4

Čini se da je ovdje sve jednostavno.

A ako nam se ne sviđa da se tekst lijepi uz rub roditeljskog bloka i želimo dodati margine bez izmjene oznaka, samo sa css. Dodajmo svojstvo padding elementima:

Blok 1. Lorem

Blok 2. Lorem ipsum

Blok 3. Lorem ipsum

Blok 4. Lorem

I vidimo da nam se raspored srušio! Blok 3 je otišao negde. Zašto se to dogodilo? Odgovor je jednostavan. Dodavanjem margina elementima povećali smo njihovu širinu. Sada su vrijednosti:

Blok 1: 10 + 200 + 10 = 220px

Blok 2: 10 + 150 + 10 = 170px

Blok 3: 10 + 100 + 10 = 120px

Blok 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510 piksela

Ukupna širina tri bloka je 510, oni se ne uklapaju u širinu roditelja (450) i stoga se prelamaju u novi red.

Kako popraviti? Možete učiniti sljedeće:

1. Poništite vrijednosti širine za svaki blok, uzimajući u obzir margine. Smanjenje veličine blokova. Sve će opet uredno stati u jedan red. Slažete se, to je neprijatno? Svaki put da se popnem na izgled i nešto uredim.
2. Koristite svojstvo box-sizing: border-box. Tako da se proračun uzima iz ukupne širine bloka. Savjetujem vam da saznate šta je css blok model.

Koristimo drugu opciju, ispada ovako:

Blok 1. Lorem

Blok 2. Lorem ipsum

Blok 3. Lorem ipsum

Blok 4. Lorem

Sada skupimo sve primljene informacije i pokušamo da napravimo jednostavan tipičan raspored sa tri kolone nametanje gume, koji će se protezati na maksimalno 900px, nakon čega će cijeli raspored biti pozicioniran u centar.

Kreirajte oznake izgleda:

Stilovi pisanja:

Telo (maksimalna širina: 900px; /* ograničenje maksimalna širina*/margina: 0 auto; ) /* za sve blokove unutar tijela, promijenite algoritam za izračunavanje širine bloka i dodajte margine od 10px svim blokovima */ body div ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header (pozadina: #CCA69E; padding: 10px; ) .left-sidebar (širina: 20%; pozadina: #8ED9B6; float: lijevo; ) .content (float : lijevo; širina : 60%; ) .desna bočna traka (širina: 20%; pozadina: #FF9282; float: lijevo; ) .podnožje (pozadina: #000; jasno: obje; /* onemogući prelamanje na obje strane, blok se prikazuje u novom redu */ boja: #ccc; )

Ako nešto nije jasno pitajte u komentarima.

Pozdrav dragi ljubitelji informatike. Danas je glavni način kreiranja prelijepih web stranica sa više stranica zasnovan na blokovnom rasporedu pomoću oznake div.

U slučaju nepoznavanja osnovnih suptilnosti rada s ovim alatom, nažalost i oh, ali atraktivno adaptivni dizajn nećeš dobiti. Stoga je ovaj članak posvećen temi "Kako napraviti blok u html-u". Detaljno ću opisati kako kreirati blok objekte na stranici od nule, kako dizajnirati pozadinu i dizajn blokova, i što je najvažnije, reći ću vam kako da uključite stilski list. Dakle, počnimo!

Karakteristike blok elemenata

Blokovi su pravokutni elementi koji zauzimaju cijelu dostupnu širinu stranice, uvijek počinju u novom redu i po defaultu automatski izračunavaju visinu na osnovu sadržaja.

Svi elementi bloka sastoje se od 4 svojstva koja okružuju sadržaj objekta poput okvira.

Glava bloka je sadržaja.

Oko njega su polja tzv padding. Margine su odgovorne za udaljenost između sadržaja objekta i njegove unutrašnje ivice ivica.

Nakon toga dolaze same granice koje se zovu engleska riječ granica.

I, konačno, posljednji okvir oko svega navedenog je margina- padding od vanjske ivice ivice do ivica stranice ili drugih elemenata. Imajte na umu da ova svojstva nisu obavezna.

Kao primjer, programirajmo 2 i popunimo kreirane elemente tekstom.

Na ovog trenutka u ovaj kod će biti prikazane kao normalne dvije rečenice. Da biste dizajnirali blokove, morate povezati stilski list i css jezik postaviti određena svojstva.

Unesimo jarke boje u svakodnevni život html

Kako bi blokovi izgledali zanimljivo i atraktivno, svakako treba uključiti kaskadni stilski list.

Da biste to učinili, u spremniku za glavu nakon oznake

Blok u css - 2.

Blok u css - 3.

Kao rezultat:

Sada ću u CSS-u pokazati nekoliko trikova u kojima se proširuju mogućnosti HTML blokova.

CSS granica bloka

Nekretnina "GRANICA»
Često koristim okvir kada kreiram web stranice. Okviri mi pomažu da vidim gdje blok počinje i gdje se završava. Ovo mi olakšava posao. Također, okvir se može koristiti za dizajn blokova.
Da biste kreirali okvire za blokove, zapišite pravilo koje već poznajete "border".

sintaksa:

Border: border_thickness border_type border_color;

Blok u css -1.

Blok u css - 2.

Blok u css - 3.

Ako ne razumijete gdje i gdje sam ušao u CSS, onda obratite pažnju na redove od 4 do 17. A ako i dalje imate takvo pitanje, šta sam uradio, onda ponovite lekciju broj 3 - “”.

rezultat:

Sada možete vidjeti granice bloka, a kada su granice vidljive onda je lakše raditi s blokovima.

CSS blok padding

Nekretnina "MARGINA»
Da biste postavili udaljenost (uvlačenje) od bloka, koristite pravilo "margina".
Obratite pažnju na dijagram. Parametri se postavljaju iz bloka:

Svojstva:

• top- gornja strana
• u pravu- Desna strana
• dnu- donja strana
• lijevo- lijeva strana

margin-top:30px; /* gornja strana */ margin-right:70px; /* desna strana */ margin-bottom:90px; /* donja strana */ margin-left:120px; /* lijeva strana */

Skraćeni oblik

Sve što sam napisao za uvlačenje možete napisati sa svakim blokom posebno u skraćenom obliku:

sintaksa:

Margina: top_side right_side bottom_side left_side;

Margina:30px 70px 90px 120px; /* stenografski zapis */

Blok u css -1.

Blok u css - 2.

Blok u css - 3.

rezultat:

Ako postavite jedan parametar na pravilo "margina" (red br. 22):

Margina:100px /* stenografski zapis */

tada će udaljenost od bloka sa svih strana biti 100 px.

Padding unutar bloka u CSS-u

Nekretnina "PADDING»
Da biste postavili udaljenost (uvlačenje) unutar bloka, koristite pravilo " padding».
Obratite pažnju na dijagram:

Svojstva:

• top- gornja strana
• u pravu- Desna strana
• dnu- donja strana
• lijevo- lijeva strana

padding-top:30px; /* gornja strana */ padding-right:70px; /* desna strana */ padding-bottom:90px; /* donja strana */ padding-left:120px; /* lijeva strana */

Skraćeni oblik

Sve što sam gore napisao možete zapisati u skraćenom obliku.

sintaksa:

Padding: top_side right_side bottom_side left_side;

Padding:30px 70px 90px 120px; /* stenografski zapis */

Napišite u HTML fajl ovako:

Blok u css -1.

Blok u css - 2.

Blok u css - 3.

rezultat:

Ako postavite jedan parametar na pravilo "padding" (red #21):

padding:50px; /* stenografski zapis */

tada će udaljenost unutar bloka sa svih strana biti 50 px.

Širina i visina bloka u CSS-u

Nekretnina "WIDTH" i "VISINA»
Možete kreirati širinu i visinu bloka. Da biste to učinili, koristite pravila "širina" - širina i "visina" - visina.

sintaksa:

• visina - visina bloka;
• širina - širina bloka;

Značenje:
Vrijednost je data u px ili %.

Širina: 600px /* širina bloka */ visina: 250px; /* visina bloka */

Mislim da nema potrebe da objašnjavam kako da ubacite pravilo u CSS, u isto vreme ću proveriti kako ste savladali lekciju #3 o tome kako da uključite CSS.

rezultat:

Blok će imati fiksnu širinu i visinu.

Ako vam je potrebno nepopravljeno, i gumeni blok(blok koji se proteže duž dužine monitora), tada umjesto px trebate navesti %. Samo zapamtite: cijeli monitor je 100%.

Širina: 90%; /* širina gumenog bloka */

Blokiraj pozadinu u CSS-u

Nekretnina "POZADINA»
Već znate pravilo „pozadine“, tako da ne vidim razloga da se ponavljam.
A ko ne zna, dobrodošli ste na stranicu sa.

Blok 1.

Red broj 7 - sa pravilom "pozadina" Pozadinu smo zamijenili zelenom

rezultat:

Pozadinu možete ispuniti ne samo bojom, već i slikom:

Pozadinska slika: url(bg.gif); /* Pozadinska slika */

Blok 1.

Red broj 7 - po pravilu "pozadinska slika" pozadinu smo zamijenili slikom pozadine.
bg.gif je pozadinska slika.

rezultat:

DODATAK

Blokirajte transparentnost u CSS-u

OPACITY svojstvo
Blok se može učiniti transparentnim korištenjem CSS pravila "opacity".

sintaksa:

Neprozirnost: vrijednost

Značenje:
vrijednosti su broj u rasponu od 0 do 1.

• Vrijednost 0 - potpuna transparentnost bloka.
• Vrijednost 1 - neprozirnost bloka (blok će ostati takav kakav jeste).
• Vrijednost u razlomcima (0,5) je translucencija bloka.

Blok 1.

rezultat:

Sakrij blok u CSS-u

Nekretnina "DISPLAY»
Pravilo "prikaži" pomoći će sakrivanju bloka web stranice. Često se ovo pravilo koristi u padajućem izborniku ili kada trebate sakriti neke blokove u mobilnoj verziji stranice.

Block1(display:none;)

Nekretnina "OPACITY»
Pravilo "prozirnosti" će također pomoći da se sakrijete blok na web stranici.

Blok1 (prozirnost: 0;)

Nekretnina "VIDLJIVOST»
"vidljivost" je još jedno pravilo koje će također pomoći da se sakrije blok web stranice. U pravilo "vidljivost" Upišite vrijednost " hidden":

Blok1(vidljivost: skriveno;)

overflow property

"PREFLOW" vlasništvo
Sa pravilom "preljeva" možete definirati šta će se učiniti ako sadržaj elementa premašuje njegovu veličinu. Na primjer, slika ili tekst su veći od samog bloka.

sintaksa:

overflow: vrijednost;

Značenje:

• vidljivo- označava da kada se element prepuni sadržajem, neće biti odsječen, već jednostavno izvan granica (podrazumevana vrijednost).
• Skriveno- označava da će sadržaj koji se ne uklapa u element biti isječen (odsječeni dio će biti nevidljiv).
• Scroll- označava da će sadržaj koji ne stane u element biti isječen, ali možete koristiti traku za pomicanje da vidite isječeni dio.
• Auto- kada se element prepuni sadržajem, trake za pomicanje se dodaju automatski.

Primjer sa "Vidljivo" (zadana vrijednost):

Blok 1.

rezultat:

Primjer sa "Skriveno»:

Blok1 (visina: 200px; /* visina */ širina: 250px; /* širina */ granica:2px točkasto #cc0000; /* granica */ prelijevanje: skriveno; )

rezultat:

Primjer sa "Scroll»:

Blok1 (visina: 200px; /* visina */ širina: 250px; /* širina */ granica:2px točkasto #cc0000; /* granica */ prelijevanje: Scroll; )

rezultat:

Primjer sa "Auto":

Blok1 (visina: 200px; /* visina */ širina: 250px; /* širina */ granica:2px točkasto #cc0000; /* granica */ overflow: auto; )

rezultat:

Sjena okvira u CSS-u

"BOX-SHADOW" posjed
Možete napraviti sjenu od bloka. Pravilo senke kutije.

sintaksa:

Blok1 (visina: 200px; /* visina */ širina: 250px; /* širina */ granica:1px solid #ccc; /* granica */ box-shadow: -19px 0 22px -19px #000,19px 0 22px -19px #000; /*blokirana sjena*/ )

rezultat:

Poravnavanje bloka prema sredini

"MARGINA" vlasništvo
Da biste poravnali blok u sredini, postavite pravilo margine na "0 auto":

Margina: 0 auto;

Blok1 (visina: 100px; /* visina */ širina: 100px; /* širina */ granica:1px čvrsta #ccc; /* granica */ margina: 0 auto; )

To je sve! Vrijeme je da završimo ovu lekciju, inače je ispala prevelika! I već čujem hrkanje ispred monitora.
Još malo i završićemo sa učenjem osnova CSS-a.

Pretplatite se na ažuriranje!

Prethodni post
Sljedeća objava

Ranije je na Internetu bio široko rasprostranjen tabelarni tip rasporeda, na koji je . Međutim, s vremenom je ovaj pristup kreiranju strukture stranice zastario i zamijenjen je blok rasporedom.

Razlike između rasporeda blokova i tabelarnog

Ako tabelarni izgled implicira da je sadržaj stranice unutar oznake

, onda je koncept blok rasporeda zasnovan na aktivnoj upotrebi univerzalnih oznaka

, unutar kojeg se nalazi sadržaj, uključujući druge oznake.

Blok raspored je lišen nedostataka tabelarnog izgleda - pretraživači ga bolje indeksiraju, njegov kod nije toliko raširen i blokovi

, koje toliko vole da zovu "slojevi", prvobitno su zamišljeni kao univerzalni, odnosno "za sve", dok

je tabela koja bi se trebala koristiti za prikaz tabelarnih podataka i ništa više.

Jedini opipljivi nedostatak rasporeda blokova je to što se stranice napravljene na njemu mogu različito prikazati u pretraživačima. Da biste to izbjegli, morate napraviti izgled "cross-browser", to jest, jednako prikazan od strane bilo kojeg pretraživača.

Suština rasporeda blokova

Izgled stranice se kreira u grafičkom uređivaču: označava se gdje će se koji dio stranice (zaglavlje, dno, bočna traka, glavni sadržaj) nalaziti i koliko će prostora zauzeti, pripremaju se slike, pozadine.

Svaki dio stranice smješten je u svoj blok

: vrh stranice - u prvom, meni - u drugom, sadržaj - u trećem itd. Svaki blok je ispunjen sadržajem pomoću HTML-a, a također je pozicioniran i stiliziran korištenjem CSS oznaka.

Konačni HTML dokument je skup blokova

sa sadržajem unutra. Stil je često u zasebnoj CSS datoteci povezanoj sa stranicom sa oznakom , ili barem u kontejneru

Svrha konkursa je otkrivanje predmeta materijalnog svijeta kolosalne vrijednosti, koji pripadaju živom biološkom organizmu, u daljem tekstu zmaj, i njihova eksproprijacija.

Rezultat ovaj primjer prikazano na sl. 2.

Rice. 2. Blok sa zaobljenim uglovima

Iako se pokazalo da je metoda prilično univerzalna, ona ima niz ograničenja. Dakle, ne možete postaviti gradijent unutar bloka, jer horizontalne linije običan. Također, da biste promijenili radijus zaokruživanja, morate urediti svojstva stila nekoliko selektora u isto vrijeme.

Evo još jednog primjera za kreiranje bloka sa radijusom zaokruživanja od tri piksela. U mnogim slučajevima ovo je najviše najbolja opcija, kako u smislu dizajna tako i kompaktnosti koda (primjer 3).

Primjer 3. Radijus zaokruživanja od tri piksela

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Na kraju prilike za razumijevanje gore navedenih informacija, imate objektivnu priliku za podnošenje službeni zahtjev glavni podređeni lokalnom virtuelnom univerzumu.

Rezultat ovog primjera prikazan je na sl. 3.

Top Related Articles

Profesija menadžer sadržaja: ko je on i čime se bavi

Kako preuzeti plaćene igre i aplikacije za besplatni Play market za preuzimanje igara

Primjer čina odmašćivanja kisikovih manometara

Kategorije:

• Programi
• Sigurnost
• Windows 10
• Iron
• Windows 8
• U kontaktu sa
• Greške

© 2022 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.