May tatlong larawan ng paglalaro ng mga baraha sa web page (Figure 3.51). Hangga't magkatabi sila, hindi mahalaga ang kanilang pagkakasunud-sunod, ngunit kung ilalapat mo ang pagpoposisyon sa kanila at ililipat ang mga imahe upang sila ay magkakapatong sa isa't isa, ang isang card ay magiging mas mataas kaysa sa isa (Figure 3.52).

kanin. 3.51. Mga card sa tabi ng bawat isa

kanin. 3.52. Mga card sa isa sa ibabaw ng isa

Kung iniisip mo ang isang web page sa anyo ng isang three-dimensional na espasyo (Larawan 3.53), makikita mo na ang mga card ay matatagpuan din sa kahabaan ng Z axis. Tinutukoy ng mga value sa kahabaan ng axis na ito kung aling card ang mas malapit sa sa amin, na mas malayo, sa madaling salita, ang pagkakasunud-sunod kung saan sila ay nakapatong sa isa't isa . Sa code ng dokumento (Halimbawa 3.38), awtomatikong tinutukoy ang order batay sa daloy ng dokumento. Kung mas mababa ang elemento sa code, mas mataas ito sa kahabaan ng Z axis, kaya ang imahe na may Ace, bilang nasa ibaba, ay matatagpuan sa itaas ng iba pang mga card.

kanin. 3.53. Mga haka-haka na coordinate ng isang web page

Halimbawa 3.38. Normal na order ng card

Sa CSS, ang Z-axis na posisyon ay kinokontrol ng z-index property, na tumutukoy kung ang elemento ay "mas malapit" sa amin o "mas malayo". Ang isang integer ay kinuha bilang isang halaga; kung mas malaki ito, mas mataas ang elementong matatagpuan kaugnay ng iba. Awtomatikong itinatalaga ang mga elemento ng value na 0, kaya kahit na ang z-index ng 1 ay magiging sanhi ng pag-overlap ng elemento sa lahat ng pinagbabatayan nito. Baguhin natin ang halimbawa 3.38 upang maibalik ang pagkakasunud-sunod ng mga card, at sa pamamagitan lamang ng pag-edit ng istilo, na iiwan ang HTML code na pareho.

Card IMG ( posisyon: kamag-anak; ) .tatlo ( itaas: 50px; kaliwa: 55px; z-index: 5; ) .pito ( kaliwa: -120px; tuktok: 25px; z-index: 2; ) .ace ( kaliwa: -295px; z-index: 1; )

Ang katangian ng z-index para sa tatlong klase ay partikular na nakatakda sa 5 upang ipakita na ang pagkakasunud-sunod ng mga halaga ng z-index ay hindi mahalaga. Ang pangunahing bagay ay ang isang numero ay mas malaki kaysa sa isa.

Gumagana lang ang z-index property para sa mga elemento na ang value ng posisyon ay absolute , fixed o relative .

Kapag gusto mong iposisyon ang isang elemento sa ibabaw ng lahat ng iba pa sa page, binibigyan ito ng napakataas na z-index na halaga, gaya ng 9999. Tinitiyak nito na kahit na gumamit ng z-index ang mga istilo, mas mababa ito sa tinukoy ang isa. Sa halimbawa 3.39, kapag nag-hover ka sa mga mapa, ang z-index ay nagbabago sa 10. Walang mga script na kailangan dito, lahat ay ginagawa sa pamamagitan ng :hover pseudo-class.

Halimbawa 3.39. Pagbabago ng z-index kapag nagho-hover sa isang mapa

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Madalas kong nakikita sa mga komento sa mga aralin o sa mga forum kapag nagtatanong ang mga nagsisimula: “Gusto kong mag-post teksto sa ibabaw ng larawan, at lumalabas na nasa ilalim o nasa itaas ng larawan. Tulong." Tingnan natin ang isang partikular na halimbawa kung paano magsulat teksto sa larawan kahit saan.

Kailangan nating lagdaan ang pangalan nito sa tabi ng bawat gulay sa ilustrasyon sa ibaba. Ang gawain ay tila simple, ngunit maniwala ka sa akin, maaari itong magpabaliw sa sinumang baguhan na webmaster.

Sinadya kong kumuha ng isang malaking 1280x733 na imahe bilang isang halimbawa upang ipakita din kung paano ito iakma sa iba't ibang mga resolution ng screen. Lumipas ang mga araw kung kailan sapat na upang matutunan kung paano mag-layout para lang sa mga desktop resolution. Kapag gumagawa ng layout, dapat mong alagaan kaagad ang kakayahang umangkop.

HTML markup

Una sa lahat, lumikha kami ng isang lalagyan para sa larawan ng gulay at para sa mga inskripsiyon. Pakitandaan na inilalagay namin ang bawat inskripsiyon sa isang hiwalay na bloke na may iba't ibang klase. At ito ay lohikal, dahil ang lahat ng mga inskripsiyon ay magkakaroon ng kanilang sariling mga coordinate sa pahina, at pamamahalaan namin ang mga ito sa pamamagitan ng pagsulat ng mga katangian sa mga div.

Pagkatapos gawin HTML- markup, nakikita lang namin ang isang fragment ng larawan at ang teksto na lumilitaw sa ilalim ng larawan. Isang pamilyar na larawan, hindi ba?

Lumawak ang larawan sa lahat ng medyo malalaking pixel nito at lumitaw ang isang pahalang na scroll bar, ngunit sa kabutihang palad ito ay madaling ayusin sa pamamagitan ng pagtatakda ng lapad ng larawan sa 100%, sa gayon ginagawa itong adaptive. Hindi bababa sa isang problema ang nalutas.

Img (
lapad: 100%;
}

Ngayon ay lumipat tayo sa teksto.

Mga istilo ng CSS

Sa mga istilo ng lalagyan, ang pangunahing pag-aari ay posisyon: kamag-anak. Sa pamamagitan nito binabago namin ang mga patakaran at hinihiling na ang mga coordinate ay mabibilang hindi mula sa kaliwang sulok sa itaas ng window ng browser, ngunit mula sa sulok ng lalagyan, na siyang magulang ng lahat ng mga elemento na naka-nest dito at sumasakop sa 90% ng window.

Lalagyan (
lapad: 90%;
posisyon: kamag-anak;
text-align: center;
kulay: #000;
font-family: arial black;
laki ng font: 250%;
}

Kaliwa(
posisyon: ganap;
tuktok: 26%;
kaliwa: 6%;
}

Gitna (
posisyon: ganap;
tuktok: 17%;
kaliwa: 42%;
}

tama(
posisyon: ganap;
tuktok: 1%;
kanan: 27%;
}

Itinakda namin ang mga coordinate hindi sa mga pixel, ngunit sa %, hindi nagkataon; kapag nabawasan ang laki ng screen, mananatili ang teksto sa parehong lugar kung saan namin ito inayos. Magandang balita ito, ngunit ang masamang balita ay ang laki ng teksto ay hindi lumiliit kasama ng larawan. Ang larawan mismo ay nabawasan, ngunit ang teksto ay dapat na puwersahang bawasan.

Mga query sa media

Sa isang resolution na katumbas ng o mas mababa sa 768 pixels, bawasan ang laki ng font sa 150%. Paano natin nalaman na kailangan nating mag-downsize sa 768 pixels? Sa pamamagitan ng code inspector, nakita namin kung saan tumalon ang teksto sa mga katabing elemento.

Mga HTML tag na tumutukoy sa pagkakahanay ng teksto at indentation

Makatuwirang teksto na ginamit sa palalimbagan

Ang halimbawa sa ibaba ay nagpapakita kung paano ihanay teksto sa lapad mga pahina:

align="left"	align="right"
	Ang bilang ng mga manggagawang nagtatrabaho sa sektor ng serbisyo at pagpapakalat ng impormasyon ay lumalaki araw-araw. Kung ang mga simbolo ng mga nakaraang siglo ay ang sakahan at ang pabrika, kung gayon ang simbolo ng kasalukuyang ika-21 siglo ay isang opisina na nilagyan ng mga computer na may access sa daloy ng impormasyon.
align="justify"	align="center"
Ang bilang ng mga manggagawang nagtatrabaho sa sektor ng serbisyo at pagpapakalat ng impormasyon ay lumalaki araw-araw. Kung ang mga simbolo ng mga nakaraang siglo ay ang sakahan at ang pabrika, kung gayon ang simbolo ng kasalukuyang ika-21 siglo ay isang opisina na nilagyan ng mga computer na may access sa daloy ng impormasyon.	Ang bilang ng mga manggagawang nagtatrabaho sa sektor ng serbisyo at pagpapakalat ng impormasyon ay lumalaki araw-araw. Kung ang mga simbolo ng mga nakaraang siglo ay ang sakahan at ang pabrika, kung gayon ang simbolo ng kasalukuyang ika-21 siglo ay isang opisina na nilagyan ng mga computer na may access sa daloy ng impormasyon.

Tinitiyak ng justify na halaga ang pare-pareho ihanay ang teksto sa kanan at kaliwa, yan ay sa lapad. Ang pamamaraang ito ay malawakang ginagamit sa pag-print.

Pag-align ng teksto sa HTML sa gitna at lapad

I-align ang text sa HTML centered, text sa kanan:

Resulta:

Mga katangian at halaga

• align="left" - tumutukoy kaliwang pagkakahanay ng teksto(default).
• align="center" - inaayos ang teksto sa gitna.
• align="right" - inaayos ang teksto sa kanan.

I-align | HTML text indentation

HTML text at ang indentation nito sa kaliwang bahagi ng page

Magpo-produce kami indentasyon ng teksto sa kaliwa sa dalawang paraan:

Resulta:

Tingnan sa bagong window.

Ang ilang mga tao ay nakakahanap ng maling paraan: gumuhit sila ng teksto sa isang larawan sa mga graphic editor, at pagkatapos ay inilalagay ang larawan kasama ang teksto sa mga html na dokumento. Ngunit paano kung ang teksto ay kailangang palitan? Muling iguhit ang larawan? May mga mas simpleng solusyon.

Bilang resulta, nakukuha namin ang:

Ang lahat ay natatakpan ng puting niyebe: parehong mga puno at bahay, isang mahinang pakpak na hangin ang sumipol: "Kumusta, taglamig-taglamig!"

Ang kakanyahan ng ipinakita na pamamaraan ay ang paggawa namin ng isang div na lalagyan na naglalaman ng isang imahe at teksto. Sa kasong ito, ipoposisyon namin ang teksto na may kaugnayan sa ibabang kaliwang sulok ng lalagyan.

HTML code:

css code:

.container ( display:inline-block; position:relative; ) .container div ( display: inline-block; position: absolute; ibaba: 10px; kaliwa: 0px; background-color: rgba(0,0,0,.4 ); padding: 5px 5px 5px 10px; kulay: puti )

• display: inline-block - kailangan namin ang lalagyan upang hindi maabot ang lapad ng buong page.
• posisyon: kamag-anak - pinipilit ang lahat ng nested block na may posisyon: ganap na bilangin ang mga coordinate ng kanilang posisyon hindi mula sa window ng browser, ngunit mula sa block.container

• display: inline-block - upang mailapat sa aming teksto ang mga istilong nauugnay sa mga elemento ng block.
• posisyon: ganap - upang maglagay ng isang bloke gamit ang mga partikular na coordinate: ibaba, kaliwa - ibaba at kaliwang indent (coordinate) posible na gamitin ang itaas at kanan sa halip na ang mga ito

Ipakita ang paglalarawan kapag nag-hover ka sa larawan

Ang pamamaraang ipinakita sa itaas ay maaaring gamitin upang magpakita ng teksto kapag nag-hover ka sa isang imahe gamit ang mouse (maaaring maging kapaki-pakinabang para sa paglalarawan ng mga produkto sa isang online na tindahan).