Ile gbigbe awọn ojula: bi o lati ṣe awọn lẹhin aworan html

Ọpọlọpọ awọn alakobere ayelujara apẹẹrẹ, nikan lati delve sinu awọn lodi ti awọn ẹda ti ojula, igba Iyanu bi o lati se html isale image. Ati ti o ba diẹ ninu awọn ti wọn le wo pẹlu isoro yi, o jẹ ṣi kan isoro ni akoko ti nínàá gbogbo iwọn ti awọn aworan lori atẹle. Ni akoko kanna Emi yoo fẹ lati ri awọn ojula ti wa ni han identically lori gbogbo awọn aṣàwákiri, ki o yẹ ki o mu awọn ibeere ti agbelebu-kiri. O le ṣeto awọn lẹhin ni ọna meji: nipa lilo HTML afi ati CSS aza. Kọọkan fun ara rẹ yàn ti o dara ju aṣayan. Dajudaju, CSS ara jẹ Elo diẹ rọrun, nitori awọn oniwe-koodu ti wa ni fipamọ ni a lọtọ faili ati ki o ko gba to afikun agbọrọsọ ni akọkọ ojula ká afi, sugbon akọkọ jẹ ki a ro kan awọn ọna fun fifi awọn aworan lori lẹhin ti awọn ojula.

Ipilẹ HTML afi lati ṣẹda awọn lẹhin

Nítorí náà, a lọ si ibeere ti bi o lati ṣe isale aworan ni html loju iboju. Ni ibere lati wo lẹwa ojula, o gbọdọ ye ọkan kuku pataki apejuwe: o jẹ to o kan lati ṣe kan igbasoke lẹhin tabi kun o kan ri awọ, ṣugbọn ti o ba nilo lati fi isale aworan, o yoo ko na isan ni kikun iwọn ti awọn atẹle. Awọn aworan wà akọkọ pataki lati gbe soke tabi ṣe ara rẹ oniru yi pẹlu itẹsiwaju, ninu eyi ti o yoo han iwe ti awọn ojula. Nikan nigbati awọn isale aworan ti šetan, fa o sinu folda kan ti a npè ni «Images». Ni o, a yoo fi gbogbo awọn ti a lo images, awọn ohun idanilaraya ati awọn miiran ti iwọn awọn faili. Eleyi folda yẹ ki o wa ni be ni root liana pẹlu gbogbo rẹ html awọn faili. Bayi o le gbe lori ati ki o si awọn koodu. Nibẹ ni o wa ni ọpọlọpọ awọn aṣayan fun kikọ koodu, nipa eyi ti lẹhin yoo yi awọn aworan.

1. Kọ tag ro.
2. Nipasẹ CSS ara ni awọn HTML koodu.
3. Kọ CSS aza ni a lọtọ faili.

Bi ninu HTML lati ṣe awọn isale aworan, ti o ba pinnu, sugbon Emi yoo fẹ lati sọ kan diẹ ọrọ nipa bi o ti yoo jẹ awọn julọ ti aipe. Ni igba akọkọ ti ọna ti o jẹ nipa kikọ nipasẹ kan tag ro ti gun ti atijo. Awọn keji aṣayan ti lo gan ṣọwọn, nitori ti o wa ni jade wipe a pupo ti kanna koodu. A kẹta aṣayan ni awọn wọpọ ati ki o munadoko. Nibi ni o wa apeere ti HTML afi:

1. Ni igba akọkọ ti gbigbasilẹ ọna nipasẹ tag ro (ara) ni index.htm faili. O ti wa ni fipamọ ni yi fọọmu: (body lẹhin = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body). Ti o ni, ti o ba ti a ni a aworan pẹlu awọn akọle «Aworan» ati itẹsiwaju JPG, ati awọn folda ti a npè ni «Images», ki o si awọn HTML-koodu titẹsi yoo wo bi yi: (body lẹhin = "Images / Picture.jpg") ... (/ body) .
2. Awọn ọna keji je gbigbasilẹ a CSS ara, sugbon o ti kọ ọ ninu kanna faili pẹlu awọn orukọ index.htm. (Ara ara = "lẹhin: url ( '../ Images / Picture.jpg')").
3. Awọn kẹta ọna ti gbigbasilẹ ti wa ni ṣe ni meji awọn faili. Awọn iwe pẹlu awọn orukọ index.htm tag (ori) ti kọ iru kan ila: (ori) (asopọ rel = "stylesheet" Iru = "ọrọ / CSS" href = "http: // ojula / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ori). A faili ti a npe ni style.css ara tẹlẹ kọ: body {lẹhin: url (Images / Picture.jpg ')}.

Bi ninu awọn HTML lati ṣe awọn isale aworan, a ye. Bayi o nilo lati ro ero bi o lati na isan awọn aworan kọja awọn iwọn ti gbogbo iboju.

Ona lati na isan isale aworan si awọn iwọn ti awọn window

A soju wa iboju ni awọn fọọmu ti a ogorun. O wa ni jade wipe gbogbo iwọn ati ki o ipari ti awọn iboju yoo jẹ 100% × 100%. A nilo lati na isan awọn aworan lati yi iwọn. Fi si image faili gbigbasilẹ style.css ila ti o si nà awọn aworan lori gbogbo iwọn ati ki o ipari ti awọn atẹle. Bi a ti kọ ninu CSS ara? O ni o rọrun!

body

{

lẹhin: url (Images / Picture.jpg ')

lẹhin-iwọn: 100%; / * Yi post ni o dara fun julọ igbalode burausa * /

}

Ki a ṣayẹwo jade bi o lati ṣe aworan kan lẹhin ni html loju iboju. Wa ti tun kan ọna ti gbigbasilẹ ni index.htm faili. Tilẹ yi ọna ati igba atijọ, ṣugbọn fun olubere o jẹ pataki lati mọ ki o si ye. Awọn tag (ori) (ara) ipin {lẹhin-iwọn: ideri; } (/ Style) (/ ori), yi gba tumo si wipe a allocate pataki kan kuro fun awọn lẹhin, eyi ti yoo wa ni ipo lori gbogbo iwọn ti awọn window. A ti kà ọna meji, bi o lati ṣe kan lẹhin aworan html sii, ki awọn aworan ti wa ni nà si gbogbo iwọn ti awọn iboju ni eyikeyi ninu awọn igbalode burausa.

Bi o lati ṣe a ti o wa titi lẹhin

Ti o ba ti o ba pinnu lati lo aworan kan bi awọn lẹhin ti ojo iwaju ayelujara awọn oluşewadi, ki o si o kan nilo lati mo bi o si ṣe awọn ti o wa titi, ki o ti wa ni ko nà ni ipari ki o si ko ikogun awọn darapupo hihan. Nìkan nipa lilo HTML koodu lati forukọsilẹ kan kekere afikun. O nilo lati faili style.css lati fi kan gbolohun lẹhin lẹhin: url (Images / Picture.jpg ') ti o wa titi; tabi dipo kun lẹhin ti awọn semicolon lọtọ ila - ipo: ti o wa titi. Bayi, rẹ ogiri yoo wa ni ti o wa titi. Nigba lọ akoonu lori ojula, o yoo ri pe ọrọ ila ti wa ni gbigbe, ṣugbọn awọn lẹhin maa wa ni ibi. Ki o kẹkọọ bi o si ṣe html isale image, ni orisirisi ona.

Nṣiṣẹ pẹlu Tables ni HTML

Ọpọlọpọ awọn inexperienced ayelujara kóòdù, dojuko pẹlu tabili ati awọn bulọọki, igba ma ko ni oye bi o lati ṣe html image lẹhin tabili. Bi gbogbo egbe HTML ati CSS aza, awọn ayelujara siseto ede jẹ iṣẹtọ o rọrun. Ati awọn ojutu si isoro yi ni lati kọ kan bata ti ila ti koodu. O yẹ ki o ti mọ tẹlẹ pe kikọ kan tabili ti ila ati awọn ọwọn, lẹsẹsẹ, bi itọkasi nipa awọn afi (tr) ati (td). Lati ṣe awọn lẹhin ti awọn tabili ni awọn fọọmu ti ẹya image, o jẹ pataki lati fi si tag (tabili), (tr) tabi (td) kan ti o rọrun gbolohun pẹlu tọka si itọkasi aworan: lẹhin = URL awọn aworan. Fun wípé, a fi kan tọkọtaya ti apeere.

Tabili pẹlu aworan kan dipo ti awọn lẹhin: HTML apeere

Fa a 2x3 tabili ati ki o ṣe ti o ni isale aworan ti o ti fipamọ ni awọn folda "Images": (tabili isale = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabili). Nítorí náà, wa tabili yoo kale ni abẹlẹ ti awọn aworan.

Bayi fa kanna awo titobi ti 2x3, ṣugbọn fi aworan kan ninu awọn ọwọn kà 1, 4, 5 ati 6. (tabili) (tr) (td lẹhin = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td lẹhin = "Images / Picture.jpg") 4 (/ td) (td lẹhin = "Images / Picture.jpg") 5 ( / td) (td lẹhin = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ tabili). Lẹhin ti wiwo a le ri pe awọn lẹhin han nikan ni awon ẹyin ni eyi ti a aami-, ati ki o ko gbogbo tabili.

Cross-kiri ibamu ojula

Nibẹ ni iru ohun kan bi a agbelebu-kiri ibamu ayelujara awọn oluşewadi. Eleyi tumo si wipe rẹ sii ti wa ni se daradara han ninu yatọ si orisi ati awọn ẹya ti burausa. O yẹ ki o wa HTML koodu ati CSS aza lati ṣe a pataki burausa. Jubẹlọ, ni igbalode akoko ti smati awọn foonu, ọpọlọpọ awọn aaye ayelujara Difelopa ti wa ni gbiyanju lati ṣẹda ojula ati fara fun mobile version ati kọmputa kan wo.