Kas ir izkārtojums bloku? Kā uzlikt vienu jūsu vietnes lapu, par to pašu?

Ir vēlme mācīties, lai padarītu savu lapas vietnes? Tad pieņemsim apguvuši kāda bloka izkārtojums. Layout iesācējs izpildīt virkni grūtību, tie ir daudz jautājumu. Apsveriet, kas ir bloks kodēšanu.

Svarīgs tip

Izmantojiet WYSIWYG redaktoru, tāpēc viss bija skaidrāks. Tiem, kuri zina HTML labi, darbu notebook, jo viņi visu saprotu. Un iesācējiem var izmantot programmu, piemēram, FrontPage, vai, piemēram, Dreamweaver.

Veidi izkārtojuma vietnes

Ir vairāki veidi izkārtojums:

1. Plakans.
2. Block.
3. Mixed.

Mēs esam ieinteresēti bloka izkārtojumu. Kas atšķir to no galda? Pie bloka izkārtojums izmantojot DIV tagu, ir zināmas priekšrocības:

1. Load ar dizainu blokiem ātrāk.
2. Saturs parādās bloki (atšķirībā no tabulas), kā tas notiek lejupielāde. Kā zināms, šīs tabulas parādīsies tikai pēc visu tabulu.
3. Kods ar div-s vieglāk lasīt.

Tas ir ne visi priekšrocības, kas ir slavens ar bloka izkārtojumu.

Kā mainīt atrašanās DIV blokiem?

Tas palīdzēs mums peldēt - šo īpašumu, kas spēj šādi:

1. Izlīdzināt pa kreisi - pa kreisi.
2. Lai saskaņotu tiesības - tiesības.
3. Element paliek kur viņš bija, viņš nevar pārvietoties, ja, ņemot vērā neviens. Šī vērtība būs noklusējuma.

Vēl viena svarīga iezīme, kas mums ir nepieciešams, - skaidrs. Viņš var būt 4 vērtībām:

1. Par uzstādīšanu saskaņā ar iepriekšējo posteni, pārejiet uz labo, bloku - labi.
2. Kreisās komplekti zem iepriekšējā elementa, kas tiek pārvietots pa kreisi.
3. Abi - uzstādīšana iepriekšējā izspiestā bloku.
4. Nav norādīts, ka nav ierobežojumu attiecībā uz nostāju bloka attiecībā uz šiem elementiem, kas tiek pārvietotas.

piemērs

Apsveriet, kā tas izskatās bloka izkārtojums div. Mēs rakstīt mūsu kodu:

Saskaņā ar kodu redzat rezultātu. Tādējādi, pamatojoties uz vairākiem īpašībām var kontrolēt bloķēt vienošanos par vēlamo. Doties uz nākamo brīdi. Mēs esam izmantojuši text-align: centru, lai saskaņotu katru bloku par jebkuru pārlūku.

Kā jūs varat redzēt, tas ir diezgan vienkārši bloka izkārtojums vietā. Ir svarīgi, lai izpētītu un praksē vairāk īpašības, kas radīs elastīgāku struktūru lapām.

Kaut kas vēl svarīgāk

Ir viens populārs līdzeklis, kas tiek izmantots izkārtojumu - amats, tas tiek izmantots, lai pozicionēšana.

Šo daļu vērtības īpašībām stāvoklī:

1. Relatīvais - nosaka pozīciju elementu relatīvo to sākotnējās vietās. Pieteikums kreisi, augšā, righ grunts elementu pārvietojas noteiktā virzienā.
2. Static - normāls displejs punkts. Nav jēgas izmantot labi / pa kreisi, augšu / apakšu - tas var novest pie nekas.
3. Absolute - absolūtā pozicionēšana elements.
4. Fixed - līdzīgs absolūts. Tas ir saistīts ar noteiktu punktu uz ekrāna, bet tas nemaina savu stāvokli, pat ja lapa flipping.

Daudzi izkārtojums pamanīju, ka, izmantojot fiksētu, absolūto un relatīvo novietojumu klucīšiem virsū. Un tad interesanti zināt, kurš no zemāk blokiem, kas iepriekš. Lai atbildētu uz šo jautājumu, Jums ir nepieciešams z-index īpašumu. Tā celta izkārtojuma blokus, lai jaunā līmenī. Tas ļauj ne tikai veikt pozicionēšanas plaknes, bet arī, izmantojot trešās ass Z. Šādas īpašuma vērtība var būt pozitīva vai negatīva.

Izveidot 3 bloki. Tālāk eksperiments ar absolūtu pozicionēšanu.

Kā jūs varat redzēt, tas ir viegli mainīt pozīciju bloku. Pamatojoties uz to, ka jūs tagad var, veikt jebkādas elementāras bloka izkārtojums lapu. Piemērojot citus īpašumus, jums būs uzlabot savas prasmes.