Mis on plokkide paigutus? Kuidas teha saidi lihtsat lehte ise?

Kas teil on soov teada saada, kuidas veebisaite ise teha? Seejärel uurime, milline on plokkide kujundus. Uutel meigikülastajal on mitmeid raskusi, neil on palju küsimusi. Mõtle, mis moodustab ploki paigutuse.

Oluline nõu

Kasutage visuaalset redaktorit, et muuta kõik selgemaks. Need, kes tunnevad HTML-i hästi, töötavad sülearvutis, sest nad mõistavad kõike. Ja uustulnukad saavad kasutada selliseid programme nagu FrontPage või näiteks Dreamweaver.

Saidi paigutuse tüübid

Siin on mitu paigutuse tüüpi:

1. Tabel.
2. Blokeeri.
3. Segatud

Oleme huvitatud ploki kujundusest. Mis vahe on sellel tabelil? DIV-i siltide abiga plokkide paigutusel on teatud eelised:

1. Disainipaketiga kiiremini alla laadimine.
2. Kui laadimine toimub, kuvatakse plokkide sisu (erinevalt tabelitest). Nagu teate, kuvatakse tabelite andmed ainult pärast kogu tabeli kuvamist.
3. Divisidega koodi on lihtsam lugeda.

See ei ole kõik voorused, mis blokeerivad kujundust, on tuntud.

Kuidas ma saan muuta div-plokke?

Selles saame kasutada ujukit - vara, mis võib võtta järgmisi väärtusi:

1. Vasak joondus vasakule.
2. Paremalt põhjendatud joondamine.
3. Üksus jääb sellesse asukohta, kus see pole, ei liiguta seda kuhugi, kui pole määratud. See väärtus on vaikimisi väärtus.

Teine oluline vara, mida me vajame, on selge. Sellel võib olla 4 väärtust:

1. Eelmise üksuse valimiseks paremale liikudes on plokk õige.
2. Vasakpool asetab eelmise üksuse, mis liigub vasakule, elemendi.
3. Mõlemad - paigaldamine eelmise liikuva ploki alla.
4. Ükski ei ütle, et plokid on piiratud nende liigutatavate elementidega.

Näide:

Mõelge, kuidas Divi väljapanek blokeerub . Kirjuta meie kood:

Koodi all näete tulemust. Seega on mitmete omaduste põhjal võimalik kontrollida plokkide paigutust soovitud viisil. Läheme järgmisele momendile. Me kasutasime teksti-align: keskendume iga brauseri iga blokeerimise keskpunkti.

Nagu näete, on saidi plokkide paigutus üsna lihtne. Praktikas on oluline õppida ja rakendada rohkem funktsioone, mis võimaldab paindlikumat lehtede struktuuri.

Teine oluline asi

On üks populaarne vara, mida kasutatakse kujunduses - positsioonis, seda kasutatakse positsioneerimiseks.

Positsiooni vara väärtused:

1. Suhteline - määrab elementide positsiooni nende algste asukohtade suhtes. Vasakule, ülemine, parem, alumine liigub elemendi teatud suunas.
2. Staatiline - elemendi tavaline kuva. Paremat / vasakut, ülemist / alt ei ole mingit kasu - see ei tee midagi.
3. Absoluutne - elemendi absoluutne positsioneerimine.
4. Fikseeritud on sama kui absoluutne. Element on seotud ekraani teatud punktiga, kuid see ei muuda oma positsiooni isegi siis, kui leht on klappitud.

Paljud paigutusdisainerid on märganud, et fikseeritud, absoluutse või suhtelise positsioneerimise rakendamisel toimub blokeerimine. Ja siis on huvitav teada, millised plokid on madalamad, mis on kõrgemad. Sellele küsimusele vastamiseks vajate z-indeksi vara. See pani kujunduse plokkideks kvalitatiivselt uuele tasemele. See võimaldab teha positsiooni mitte ainult lennukil, vaid ka kolmanda telje Z abil. Selle vara väärtus võib olla positiivne ja negatiivne.

Loo 3 plokki. Seejärel proovime absoluutse positsioneerimisega.

Näitena võib näha plokkide positsioone. Selle põhjal, mida te nüüd teate, teeb keegi lehe lehe elementaarploki kujunduse. Ja rohkemate omaduste kasutamisel parandate oma oskusi.