Nzira Yokuputira Nayo Pasi Pamufananidzo

Tarisa pane chero peji yebhundaneti uye uchaona kusanganiswa kwezvinyorwa zvinyorwa uye mifananidzo. Zvose zviri zviviri izvi zvinoshandiswa zvakakosha mukubudirira kwewebsite. Zvinyorwa zvinyorwa ndezvipi vaenzi vemaiti vanozoverenga uye zvinotsvaga injini dzichashandisa sechikamu chekugadzirisa maitiro avo. Mifananidzo inowedzera chido chekuona shanditi uye rubatsiro runokurudzira zvinyorwa.

Kuwedzera mavara nemifananidzo kune mawebhusayithi zviri nyore. Mheteti inowanikwa neyema HTML tags se ndima, zvinyorwa, uye mazita, apo mifananidzo yakaiswa peji ne chinhu. Kana ukangowedzera mufananidzo webhuji rako rewebhu, zvisinei, iwe ungada kuva nemashoko akayerera pedo nechitarisiko, panzvimbo pekuenzanisa pasi payo (iyo ndiyo nzira isina kuwanikwa mufananidzo wawedzerwa ku html code ichapa mu browser). Nenzira, kune nzira mbiri dzaunokwanisa kuita nadzo kutarisa uku, zvichida nekushandisa CSS (yakakurudzirwa) kana nekuwedzera maziso ekuona zvakananga mu HTML (kwete kukurudzirwa, sezvo uchida kuchengetedza kuparadzana kwemaitiro uye chimiro chewebsite yako).

Kushandisa CSS

Nzira yakarurama yekushandura nzira iyo peji yemifananidzo uye mifananidzo maitiro uye kuti maitiro avo anoonekwa anoonekwa sei mumushanduri ane CSS . Ingoyeuka, sezvo isu tichitaura nezvekushanduka kwekuona pane peji (kugadzira magwaro kuzotenderera chifananidzo), izvi zvinoreva kuti ndiro nzvimbo ye Cascading Style Sheets.

1. Kutanga, wedzera mufananidzo wako kune peji rako rewebhu. Yeuka kusabvisa chero maitiro anooneka (kufanana nehupamhi uye hurefu hwehutano) kubva pane iyo HTML. Izvi zvakakosha, kunyanya kune webhusaiti yekubvuma apo hukuru hwemufananidzo huchasiyana maererano neshanduro. Dzimwe shanduro, seAdobe Dreamweaver, ichawedzera hupamhi uye kukwirira kwemashoko kune zvidhori zvinowanikwa nechocho chigadziro, saka iva nechokwadi chokuti wabvisa ruzivo urwu kubva pane imwe code ye HTML! Iva nechokwadi, zvisinei, kuti ubatanidze zvakakodzera alt text . Heano muenzaniso wekuti HTML code yako inogona kutarisa sei:
2. Nokuda kwekunyorera, iwe unogonawo kuwedzera kirasi kune mufananidzo. Iyi kirasi inokosha kukosha kwatingazoshandisa muCSS yedu file. Cherechedza kuti kukosha kwatinoshandisa apa kunongoratidzira, kunyange zvazvo, nenzira iyi chaiyo, tinowanzoshandisa maitiro e "kuruboshwe" kana "kurudyi", zvichienderana nenzira iyo tinoda kuti chifananidzo chedu chienderane. Tinowana sarudzo yakajeka kuti tishande zvakanaka uye tive nyore kune vamwe vangave vachifanira kutarisira nzvimbo inotevera mune ramangwana kuti vanzwisise, asi iwe unogona kupa izvi chero boka rekukosha iwe raunoda.
   2. Nayo pachayo, iri kirasi rinokosha harifaniri kuita chero chinhu. Chifananidzo hachizoongororwa zvakananga kuruboshwe rwemashoko. Nokuda kweizvi, isu zvino tinoda kutendeukira kuCSS yedu file.

1. Muchidimbu chako, iwe unogona kuwedzera chirevo chinotevera:
   1. .ruboshwe {
   2. float: left;
   3. padding: 0 20px 20px 0;
   4. }
   5. Zvawakaita apa zvinoshandisa CSS "float" pfuma , iyo inogona kukwevera chifananidzo kubva pamutauro unowanzobuda (iyo iyo iyo mufananidzo inogona kuratidza, pamwe nemashoko akabatanidzwa pasi payo) uye ichaiendesa kuruboshwe rwomukombe wayo . Nyaya inouya mushure mayo mu HTML markup uye zvino isaikupoteredza. Takawedzerawo zvimwe zvepadding zvakakosha kuitira kuti rugwaro urwu rurege kunyatsopikisana nemufananidzo. Pane kudaro, ichange iine nzvimbo yakanaka iyo ichave yakatarisa kutarisa mukugadzira peji. MuCSS shorthand ye padding, takawedzera maitiro 0 kusvika kumusoro uye kuruboshwe rwechifananidzo, uye 20 pixels kuruboshwe uye pasi. Yeuka, iwe unoda kuwedzera pane padding kurutivi rworudyi rwemufananidzo wakatarisana wakasimwa. Mufananidzo wakakodzana (uyo watinozotarisa mune imwe nguva) ungadai uine padding yakashandiswa kuruboshwe rwaro.
2. Kana iwe ukaona peji rako rewebhu mukati mekushandura, unofanira kuona iye zvino kuti chimiro chako chakakonzerana nechokuruboshwe chepeji uye zvinyorwa zvinyatsozvikomberedza. Imwe nzira yekureva izvi ndeyokuti mufananidzo "unotenderera kuruboshwe".

1. Kana iwe uchida kuchinja chifananidzo ichi kuti chienderane nezvakarurama (semuenzaniso wemufananidzo unoenderera munyaya ino), zvingava nyore. Chokutanga, unofanira kuve nechokwadi chokuti, kuwedzera kune chimiro chatinenge tangowedzera kuCSS yedu yeklasi yevadzidzi ve "kuruboshwe", tinewo imwe yekugadzirisa kwakarurama. Zvingaita sezvizvi:
   1. .rudyi {
   2. float: right;
   3. padding: 0 0 20px 20px;
   4. }
   5. Iwe unogona kuona kuti izvi zvakafanana zvakafanana neCSS yekutanga yatakanyora. Misiyano chete ndiyo kukosha kwatinoshandisa kwe "float" pfuma uye padding mararamiro atinoshandisa (kuwedzera zvimwe kuruboshwe rwechifananidzo chedu panzvimbo yekurudyi).
2. Pakupedzisira, iwe unogona kuchinja kukosha kwekirasi yemufananidzo kubva "kuruboshwe" kusvika "kurudyi" mune yako HTML:
3. Tarisa pajiji yako mumusikana iye zvino uye chimiro chako chinofanira kuenzaniswa nekodzero yekunyora zvinyorwa zvakapoteredza. Tinowedzera kuwedzera zvose izvi, "kuruboshwe" uye "kurudyi" kumatsetseti edu ose kuitira kuti tigone kushandisa maitiro aya anoonekwa sezvatinoda patinenge tichigadzira mapeji ewebhu. Iyi miviri miviri inova yakanaka, inogadziriswa zvinhu zvatinokwanisa kutendeukira kune chero nguva patinoda kutora mifananidzo nekunyorwa kwemavara kutenderera.

Kushandisa HTML panzvimbo yeCSS (uye Nei Usingaiti &

Kunyange zvazvo zvichikwanisika kuvhara rugwaro rwakapoteredza chifananidzo ne HTML, webhutta yemitemo inotarisa kuti CSS (uye matanho ari pamusoro apa) ndiyo nzira yekuenda kuitira kuti tikwanise kuchengetedza kuparadzana kwechimiro (HTML) uye chimiro (CSS). Izvi zvinonyanya kukosha kana iwe uchifunga izvozvo, pane mamwe madivayiri uye mararamiro, zvinyorwa izvi zvingasafanira kutenderera zvakapoteredza chifananidzo. Kana pane zviduku zviduku, shanduko yewebsite inogamuchirwa inogona kuda kuti zvinyorwa zvinonyatsoenderana pasi pechifananidzo uye kuti mufananidzo unotambanudza huwandu hwakazara hwehwindo. Izvi zviri nyore kuitwa nemavhidhiyo mibvunzo kana maitiro ako akaparadzana kubva ku HTML yako markup. Munyika ino yakawanda-siyana, iyo mifananidzo uye zvinyorwa zvicharatidzika zvakasiyana kune vashanyi vakasiyana uye pazvikasi zvakasiyana, kupatsanurwa uku kunokosha kuti kubudirira kwenguva refu nekugadzirisa peji yewebhu.