Ir vēlme mācīties, kā to izdarīt patsvietnes lapas? Tad uzzināsim, kāds ir bloku izkārtojums. Jaunatnācējiem-novices saskaras ar vairākām grūtībām, viņiem ir daudz jautājumu. Apsveriet, kāds ir bloka izkārtojums.

Svarīgs padoms

Izmantojiet vizuālo redaktoru, lai viss darbotos.skaidrāk. Tie, kas labi zina HTML, strādā piezīmjdatorā, jo viņi visu saprot. Un jaunpienācēji var izmantot tādas programmas kā FrontPage vai, piemēram, Dreamweaver.

Vietnes izkārtojuma veidi

Ir vairāki izkārtojuma veidi:

  1. Tabulā
  2. Bloķēt
  3. Jaukti

Mēs esam ieinteresēti bloķēt izkārtojumu. Kāda ir tā atšķirība no tabulas? Bloku izkārtojums, izmantojot DIV tagu, ir dažas priekšrocības:

  1. Iekraušana ar dizaina blokiem ir ātrāka.
  2. Kad notiek lejupielāde, bloku saturs tiek parādīts (atšķirībā no tabulām). Kā jūs zināt, tabulu dati parādīsies tikai pēc visas tabulas parādīšanas.
  3. Kods ar divs ir vieglāk lasāms.

Tie nav visi tikumi, kas slavē izkārtojumu.

Kā es varu mainīt div bloku atrašanās vietu?

Šajā mēs izmantosim peldošu - īpašumu, kas var sasniegt šādas vērtības:

  1. Kreisais izlīdzinājums palicis.
  2. Pareizai izlīdzināšanai, labi.
  3. Vienums paliek tur, kur tas bija, tas nekustas, ja neviens nav norādīts. Šī vērtība būs noklusējuma vērtība.

Vēl viens svarīgs īpašums, kas mums ir vajadzīgs, ir skaidrs. Tam var būt 4 vērtības:

  1. Lai iestatītu vienumu zem iepriekšējā, pārvietots pa labi, bloks ir labais.
  2. Pa kreisi tiek iestatīts elements zem iepriekšējā, kas tiek pārvietots pa kreisi.
  3. Abi - uzstādīšana zem iepriekšējā pārvietotā bloka.
  4. Neviens nenorāda, ka bloka pozīcija nav ierobežota attiecībā uz tiem elementiem, kas tiek pārvietoti.

Piemērs:

Apsveriet, kā izskatās divu bloku izkārtojums. Uzrakstiet mūsu kodu:

Bloķēt izkārtojumu
Zem koda jūs redzat rezultātu. Tādējādi, pamatojoties uz vairākām īpašībām, jūs varat kontrolēt atrašanās vietu blokus pēc vēlēšanās. Mēs pārietam uz nākamo brīdi. Mēs izmantojām teksta izlīdzināšanu: centrā, lai centrētu katru bloku jebkuram pārlūkam.

Kā redzat, bloķēt vietnes izkārtojumu tiek darīts vienkārši. Praktiski ir svarīgi apgūt un piemērot vairāk funkciju, kas ļaus jums izveidot elastīgāku lapas struktūru.

Vēl viena svarīga lieta

Ir viens populārs īpašums, kas tiek izmantots izkārtojumā - pozīcijā, to izmanto pozicionēšanai.

Poziciona īpašības vērtības:

  1. Relatīvs - nosaka elementu atrašanās vietu attiecībā pret to sākotnējām atrašanās vietām. Piespiežot pa kreisi, augšā, pa labi, apakšā kustina elementu noteiktā virzienā.
  2. Statisks - parasta elementa parādīšana. Nav jēgas izmantot labo / kreiso, augšējo / ​​apakšējo - tas nedos neko.
  3. Absolūtais - absolūtais elementa pozicionēšana.
  4. Fiksētie ir tāds pats kā absolūts. Elements ir saistīts ar noteiktu punktu ekrānā, taču tas nemaina savu pozīciju pat tad, ja lapa ir pagriezta.

Daudzi grima mākslinieki pamanīju, ka, piesakotiesfiksēta, absolūta vai relatīva pozicionēšana, notiek bloķēšana. Un tad ir interesanti uzzināt, kura no blokiem ir zemāka, kas ir augstāka. Lai atbildētu uz šo jautājumu, jums nepieciešams z-indeksa īpašums. Tas noveda bloku izkārtojumu uz kvalitatīvi jaunu līmeni. Tas ļauj veikt pozicionēšanu ne tikai lidmašīnā, bet arī ar trešās Z ass palīdzību. Šāda īpašuma vērtība var būt pozitīva un negatīva.

Bloķēt izkārtojumu div

Izveidojiet 3 blokus. Tālāk mēs eksperimentējam ar absolūto pozicionēšanu.

Vietnes bloka izkārtojums

Kā redzams piemērā, pozīcijas ir viegli maināmasbloki. Pamatojoties uz to, ko jūs tagad zināt, ikviens izveidos vietnes lapas elementāru bloku izkārtojumu. Izmantojot vairāk īpašumu, jūs uzlabosiet savas prasmes.

</ p>