Momwe Mungayambitsire Chithunzi Kumanzere Kwa Mawu pa Tsambali

Pogwiritsa ntchito CSS kuti agwirizanitse chithunzi kumanzere kwa tsamba la Tsambali

Yang'anani pafupifupi tsamba lililonse la webusaiti lero ndipo mudzawona kuphatikiza malemba ndi zithunzi zomwe zimapanga kuchuluka kwa masambawa. Ndi kosavuta kuwonjezera malemba ndi zithunzi pa tsamba . Malembawa amalembedwa pogwiritsa ntchito malemba a HTML monga ndime, mndandanda, ndi zilembo, pomwe zithunzizo zikuphatikizidwa pogwiritsa ntchito chinthucho .

Kukwanitsa kupanga malembawo ndi zithunzizo zimagwirira ntchito pamodzi ndi zomwe zimapanga okhazikitsa webusaiti! Simukungofuna kuti malemba anu ndi zithunzi ziwonekere, ndi momwe zigawo izi zidzakhalira mwachinsinsi. Ayi, mukufuna kuti muwone momwe malemba ndi zithunzi zikuyendera mogwirizana ndi zomwe zidzasinthidwe.

Kukhala ndi chithunzi chomwe chikugwirizana ndi mbali ya kumanzere kwa tsamba pamene tsamba la tsambalo likuyenda mozungulira ndizogwiritsidwa ntchito kawirikawiri popanga makina osindikizidwa komanso pamasamba. M'mawu a intaneti, zotsatirazi zimadziwika ngati zikuyandama fano . Ndondomekoyi imapezeka ndi katundu wa CSS wa "float". Malowa amalola kuti malemba azungulire kuzungulira chithunzi cholumikizidwa kumanzere kumanja kwake. (Kapena pozungulira chithunzi chogwirizana ndi dzanja lake la kumanzere.) Tiyeni tiwone momwe tingakwaniritsire zotsatirazi.

Yambani Ndi HTML

Chinthu choyamba chimene muyenera kuchita ndili ndi HTML yogwirira ntchito. Kwa chitsanzo chathu, tilemba ndime yalemba ndi kuwonjezera chithunzi kumayambiriro kwa ndime (pamaso palemba, koma atatsegula

tag). Apa pali zomwe mazomwe a HTML akuwoneka ngati:

Mawu a ndime akupita apa. Mu chitsanzo ichi, tili ndi chithunzi cha headhot chithunzi, kotero mawuwa angakhale a munthu amene mutuhot uli.

Mwachisawawa, tsamba lathu la webusaiti liwonetsedwe ndi chithunzi pamwamba palemba. Izi ndizo chifukwa zithunzi ndizomwe zimapangidwira mu HTML. Izi zikutanthawuza kuti osatsegula akuwonetsera mzere akuphwanya asanayambe ndi pambuyo pa chinthu chojambula posintha. Tidzasintha mawonekedwe awa osasintha potembenukira ku CSS. Choyamba, komabe, ife tiwonjezera kufunika kwa kalasi ku chinthu chathu chojambula . Gululi lidzachita ngati "hook" yomwe tidzakagwiritse ntchito mu CSS yathu mtsogolo.

Mawu a ndime akupita apa. Mu chitsanzo ichi, tili ndi chithunzi cha headhot chithunzi, kotero mawuwa angakhale a munthu amene mutuhot uli.

Onani kuti gulu ili la "kumanzere" silinapange kanthu kokha! Kuti tikwaniritse mawonekedwe athu, tifunika kugwiritsa ntchito CSS patsogolo.

CSS Styles

Ndi HTML yathu m'malo, kuphatikizapo chikhalidwe chathu cha "chakumanzere", tikhoza tsopano ku CSS. Titha kuwonjezera lamulo ku mafilimu athu omwe angayandire fanolo ndikuwonjezera patching'ono pang'ono pambali pake kuti malemba omwe potsirizira pake adzalumikize fanolo sakulimbana nawo kwambiri. Pano pali CSS yomwe mungalembe:

.left {yasambira: kumanzere; padding: 0 20px 20px 0; }}

Ndondomekoyi imayendetsa fano kumanzere ndi kuwonjezera padding pang'ono (pogwiritsa ntchito CSS shorthand) kumanja ndi pansi pa fanolo.

Ngati mutasanthula tsamba lomwe liri ndi HTML mu msakatuli, chithunzichi chikanakonzedwa kumanzere ndipo ndime ya ndimeyi idzawonekera bwino ndi malo oyenera pakati pa awiriwa. Tawonani kufunika kwa gulu la "kumanzere" komwe tinagwiritsa ntchito kumasinthasintha. Titha kuitcha chilichonse chifukwa mawu oti "kumanzere" samachokera payekha. Izi ziyenera kukhala ndi chidziwitso cha m'kalasi mu HTML zomwe zimagwira ntchito ndi chikhalidwe chenicheni cha CSS chomwe chimachititsa kusintha kwa maso komwe mukuyang'ana kupanga.

Njira Zina Zowonjezera Mafilimu Awa

Njira iyi yopatsa chifaniziro cha fayilo chiyero cha m'kalasi ndikugwiritsa ntchito ndondomeko yowonjezera ya CSS yomwe ikuyandama chipangizocho ndi njira imodzi yokha yomwe mungakwaniritsire chithunzichi "choyimira zithunzi". Mungathenso kutenga phindu la kalasi kuchoka pa chithunzichi ndi kalembedwe ndi CSS mwa kulemba mwapadera kwambiri. Mwachitsanzo, tiyeni tiwone chitsanzo chomwe fano ili mkati mwa magawano ndi mtengo wapatali wa "zokhutira".

Mawu a ndime akupita apa. Mu chitsanzo ichi, tili ndi chithunzi cha headhot chithunzi, kotero mawuwa angakhale a munthu amene mutuhot uli.

Kuti muyambe chithunzichi, mukhoza kulemba CSS iyi:

.main-content img {float: kumanzere; padding: 0 20px 20px 0; }}

Mu sewu ili, fano lathu likanakhala likuphatikizidwa kumanzere, ndi mawu akuyandama mozungulira ngati kale, koma sitinayambe kuwonjezera phindu lachigwirizano pathupi lathu. Kuchita izi pazomwe zingathandize kukhazikitsa mafayilo a HTML, omwe angakhale ovuta kuwongolera komanso angathandizenso kupanga ntchito.

Potsiriza, mungathe kuwonjezera mafayilo mwachindunji ku HTML yanu, monga izi:

Mawu a ndimeyo apita apa. Mu chitsanzo ichi, tili ndi chithunzi cha headhot chithunzi, kotero mawuwa angakhale a munthu amene mutuhot uli.

Njira imeneyi imatchedwa " machitidwe apakati ". Sichikuvomerezeka chifukwa chimaphatikizapo kalembedwe ka chinthu chomwe chimapangidwanso. Webusaiti yabwino imapangitsa kuti kalembedwe ndi kapangidwe ka tsamba zikhale zosiyana. Izi ndizothandiza makamaka pamene tsamba lanu likusowa kusintha masanjidwe ake ndikuyang'ana kukula kwazithunzi ndi makina osiyanasiyana omwe ali ndi intaneti. Pokhala ndi tsamba lomwe linagwirizanitsidwa mu HTML lidzakhala zovuta kwambiri kulemba mafunso a mauthenga omwe angasinthe maonekedwe a tsamba lanu ngati zofunikira pazojambulazo zosiyana.

Nkhani yoyamba ndi Jennifer Krynin. Yosinthidwa ndi Jeremy Girard pa 4/3/17.