Ano ang layout ng block? Paano upang magpataw ng isang solong pahina ng iyong site sa kanilang sarili?

May ay isang pagnanais upang malaman upang gawin ang iyong sariling mga pahina ng site? Pagkatapos sabihin ay may mastered kung ano ang layout block. Layout baguhan matugunan ang isang bilang ng mga problema, mayroon sila ng isang pulutong ng mga katanungan. Isaalang-alang kung ano ang block coding.

Isang mahalagang tip

Gamitin ang WYSIWYG editor, kaya ang lahat ng bagay ay mas malinaw. Mga taong alam HTML well, trabaho sa notebook, dahil naiintindihan nila ang lahat. At sa mga nagsisimula ay maaaring samantalahin ng mga programa tulad ng FrontPage o, halimbawa, Dreamweaver.

Mga uri ng mga layout sites

Mayroong ilang mga uri ng layout:

1. Hugis ng mga talaan.
2. Block.
3. Mixed.

Kami ay interesado sa ang layout block. Ano Tinutukoy ang mga ito mula sa talahanayan? Sa block layout gamit DIV tag may ilang mga pakinabang:

1. Mag-load na may ang disenyo ng mga bloke nang mas mabilis.
2. Ang content na ipinapakita bloke (hindi tulad ng mga talahanayan) pati na ang pag-download ay nangyayari. Bilang ay kilala, ang mga talahanayan ay magpapakita lamang matapos ang buong table.
3. Code na may div-s mas madaling basahin.

Ito ay hindi lahat ng mga pakinabang, na kung saan ay sikat sa ang layout block.

Paano upang baguhin ang lokasyon div-bloke?

Ito ay makakatulong sa amin upang lumutang - ito ari-arian, na kung saan ay may kakayahang sa mga sumusunod:

1. Align kaliwa - kaliwa.
2. Upang pantay mula kanan - tama.
3. Element ay nananatiling kung saan siya ay, hindi siya ay malilipat kung bibigyan wala. Ang halagang ito ay ang default.

Ang isa pang mahalagang tampok na kailangan namin - malinaw. Siya ay maaaring magkaroon ng 4 mga halaga:

1. Para sa pag-install sa ilalim ng nakaraang item, ilipat sa kanan, block - tama.
2. Kaliwang hanay sa ibaba ang nakaraang elemento, na kung saan ay inilipat sa kaliwa.
3. Ang parehong - Paglalagay ng dating mga displaced block.
4. Wala ay nagpapahiwatig ng kawalan ng mga paghihigpit sa ang posisyon ng block na may kaugnayan sa mga elemento na ay inilipat.

halimbawa

Isaalang-alang kung paano ito hitsura ng isang bloke layout div. isulat namin ang aming code:

Sa ilalim ng code na nakikita mo ang resulta. Kaya, sa batayan ng ilang mga ari-arian ay maaaring maging kontrolado bloke arrangement tulad ng ninanais. Pumunta sa susunod na sandali. Kami ay ginagamit ng text-align: center, upang ihanay ang bawat bloke para sa anumang browser.

Tulad ng iyong nakikita, ito ay medyo simple block layout ng site. Ito ay mahalaga sa pag-aaral at pagsasanay ang higit pang mga ari-arian na ay lumikha ng isang mas nababaluktot istraktura ng mga pahina.

Isang bagay na mas mahalaga

May isang popular na tampok na ginagamit sa ang layout - posisyon, ito ay ginagamit para sa pagpoposisyon.

Ang mga halaga para sa mga katangian ng posisyon:

1. Kamag-anak - set ang posisyon ng mga elemento na kamag-anak sa kanilang orihinal na lokasyon. Application kaliwa, itaas, righ, ibaba elemento gumagalaw sa isang tiyak na direksyon.
2. Static - normal na display item. Ito ay hindi gumagawa ng kahulugan upang gamitin ang kanan / kaliwa, itaas / ibaba - ito ay maaaring humantong sa wala.
3. Absolute - absolute positioning elemento.
4. Fixed - katulad absolute. Ito ay nakasalalay sa isang tiyak na punto sa screen, ngunit hindi ito baguhin ang posisyon nito, kahit na pahina flipping.

Maraming mga layout napansin na kapag gumagamit ng isang nakapirming, absolute at kamag-anak pagpoposisyon ng mga bloke ay superimposed. At pagkatapos ay kagiliw-giliw na malaman kung alin sa mga bloke sa ibaba, na kung saan sa itaas. Upang sagutin ang tanong, kailangan mo z-index ari-arian. Ito ay nagdala ng mga bloke layout sa isang bagong antas. Ginagawa nitong posible hindi lamang upang gawin ang pagpoposisyon ng eroplano, ngunit din sa pamamagitan ng ikatlong axis Z. Ang halaga ng mga naturang isang ari-arian ay maaaring maging positibo o negatibo.

Lumikha 3 bloke. Susunod, eksperimento na may absolute positioning.

Tulad ng iyong nakikita, ito ay madali upang baguhin ang posisyon ng mga bloke. Sa batayan ng ang katunayan na magagawa mo na ngayong upang gumawa ng anumang mga elementary pahinang block layout. Paglalapat ng higit pang katangian ay mong pagbutihin ang iyong mga kasanayan.