Me pehea te tuhi i te Kuputuhi Around a Image

Titiro ki tetahi whārangi tukutuku ka kite koe i te huinga o nga tuhinga kuputuhi me nga whakaahua. Ko nga mea e rua nei he mea tino nui ki te angitu o te paetukutuku. Ko nga tuhinga kuputuhi he aha nga kaituhi o te pae e tuhi, me nga aha raahi rapu ka whakamahi hei waahanga o to raatau papaarangi. Ka taapiritia e nga whakaahua nga hiahia o te tirohanga ki te pae, me te awhina i te whakahirahira i te tuhinga kuputuhi.

He ngawari te whakauru kuputuhi me nga whakaahua ki nga paetukutuku. Ka tapiritia nga kuputuhi ki nga tūtohu HTML paerewa, ano he paraka, he pane, he rarangi, ka whakanohoia nga whakaahua ki runga ki tetahi waahanga me te element. I muri i te tapiritia e koe he whakapakoko ki to whārangi tukutuku, ka hiahia pea koe kia rere te kuputuhi ki te taha o te ahua, kaore i te tika i raro iho (koinei te huarahi taunoa e kiihia ai tetahi ahua ki te waehere HTML i roto i te tirotiro). Ko te tikanga, e rua nga huarahi ka taea e koe te whakatutuki i tenei ahua, ma te whakamahi CSS (e taunakitia ana), ma te whakauru atu hoki i nga tohutohu ataata ki te HTML (kaore i te taunakitia, no te mea e hiahia ana koe ki te pupuri i te wehenga o te momo me te hanganga mo to paetukutuku).

Te whakamahi CSS

Ko te ara tika hei whakarereke i te ara o te waahanga o te tuhinga me te whakatakotoranga pikitia me te ahuatanga o o raatau whakaahua i roto i te tirotiro ki te CSS . Kia mahara noa, no te mea e korero ana matou mo tetahi huringa ataata i runga i te whaarangi (ma te hanganga o te kuputuhi huri noa i tetahi ahua), ko te tikanga tenei ko te rohe o nga Pepa Whakairo Tohu.

1. Tuatahi, tohaina to ahua ki to wharangi tukutuku. Kia mahara ki te whakakore i nga momo tirohanga (rite te whanui me te uara teitei) mai i taua HTML. He mea nui tenei, ina koa mo te paetukutuku whakautu kei reira ka rereke te rahi o te ahua i runga i te tirotiro. Ko etahi o nga rorohiko, e rite ana ki a Adobe Dreamweaver, ka whakanui i nga korero whanui me teitei ki nga whakaahua e whakauruhia ana ki taua taputapu, na kia mohio ki te tango i tenei korero mai i te waehere HTML! Engari, kia mohio koe ki te whakauru i nga korero tika . Anei he tauira o te pehea o to tohu HTML:
2. Mo nga whaainga hoahoa, ka taea hoki e koe te whakakotahi i te akomanga ki tetahi ahua. Ko te uara o te akomanga ko te aha ka whakamahia e tatou i to tatou kōnae CSS. Kia mahara ko te uara e whakamahia ana e matou i konei he mea whakawhitiwhiti, ahakoa, mo tenei ahuatanga, ka whakamahia e matou nga uara o te "maui", "tika" ranei, i runga i te huarahi e hiahia ana kia tautuhia to maatau whakapakoko. Ka kitea e mätau te mahi pai kia pai te mahi me te ngawari ki etahi atu e whakahaere ana i tetahi pae i te wa kei te heke mai ki te marama, engari ka taea e koe te homai i tenei waahanga utu nui e hiahia ana koe.
   2. Na te mea kaore tenei mahi a te kaari e mahi. Kaore te whakapakoko e tautuhi ki te taha maui o te kuputuhi. Mo tenei, me tahuri tatou ki to tatou kōnae CSS.

1. I roto i to momo tahua, ka taea e koe te whakauru ano i te kāhua e whai ake nei:
   1. .reft {
   2. rererangi: te maui;
   3. te papaha: 0 20px 20px 0;
   4. }
   5. Ko nga mea i mahia e koe i konei ka whakamahi i te taonga CSS "float" , ka pakaru i te ahua mai i te rere o te tuhinga (te ahua o te ahua e whakaatu ana, me te tuhinga e hono ana i raro iho), ka whakaekea ki te taha maui o tana ipu . Ko te kuputuhi e haere mai ana i muri mai i te tohu HTML me te awhi i tenei wa. I tapiritia ano e matou etahi o nga uara kaore e taea e tenei kuputuhi te whakatika tika ki te ahua. Engari, ka whai i etahi mokowhiti ataahua ka ātaahua ki te hoahoa o te whārangi. I roto i te CSS waitohu mo te taraiwa, i tapiritia e tatou 0 nga uara ki runga me te taha maui o te whakapakoko, me te 20 pika ki tona taha maui me raro. Kia mahara, me whakapiri etahi atu i te taha matau o te whakapakoko whakaeke maui. Ko te whakapakoko tika (e titiro ana tatou i roto i te wa poto) ka uru ki te taha maui.
2. Ki te kite koe i to paetukutuku i roto i te rorohiko, me kite koe inaianei kei te taha o te taha ki maui o te whaarangi o to ahua, me te kuputuhi pai o te tuhinga. Ko tetahi atu huarahi ki te korero i tenei ko te ahua kei te "rere ki te maui".

1. Mena e hiahia ana koe ki te huri i tenei ahua kia tautuhia ki te tika (penei i te tauira pikitia e hono ana i tenei tuhinga), he mea ngawari. Tuatahi, me tino mohio koe, i tua atu i te ahua i tohua e tatou ki to tatou CSS mo te uara o te akomanga o "maui", ka whai tetahi mo te whakaatau tika. Ka penei:
   1. .right {
   2. rererangi: tika;
   3. te papaha: 0 0 20px 20px;
   4. }
   5. Ka taea e koe te kite e tata ana tenei ki te CSS tuatahi kua tuhia e matou. Ko te rerekëtanga anake ko te uara e whakamahia ana e mätou mo te taonga "float" me nga uara e whakamahia ana e tatou (me etahi atu ki te taha maui o to tautuhi, kaua te tika).
2. Hei whakamutunga, ka hurihia te uara o te akomanga o te ahua mai i "maui" ki "te tika" i to HTML:
3. Titiro ki to whārangi i roto i te rorohiko i tenei wa, me te tika o to pikitia ki te taha tika me te kuputuhi e mau ana ki a raatau. Ka tohatohahia e matou enei momo e rua, "maui" me "tika" ki o taatau waahanga katoa kia taea ai e matou te whakamahi i enei momo ataata e hiahiatia ana ina hangaia e matou nga wharangi tukutuku. Ko enei ahua e rua e pai ana, ko nga ahuatanga ka taea te tahuri ki nga wa katoa e hiahia ana tatou ki te hanga pikitia me te kuputuhi e karapoti ana ia ratou.

Te whakamahi i te HTML Engari i te CSS (me te aha Me waiho e koe)

Ahakoa ka taea te mahi rorohiko ki tetahi whakaahua me te HTML, e whakaatu ana nga paerewa tukutuku ko CSS (me nga taahiraa i runga ake nei) ko te huarahi ki te haere kia taea ai e tatou te pupuri i te wehenga o te hanganga (HTML) me te kāhua (CSS). He mea tino nui tenei ki te whakaarohia e koe, mo etahi whakaaro me nga whakatakotoranga, kaore e hiahiatia ana e te kuputuhi te rere i te ahua. Mo te iti o nga mata, ka taea e te tautuhinga whakautu o te paetukutuku te hiahia kia tika te kuputuhi i raro i te ahua, me te whanui o te mata i te whanui o te mata. Hewari te mahi tenei me nga uiuinga mehemea ka wehe nga ritenga o to huinga HTML. I roto i te ao maha-whakaaro o tenei ra, kei te rerekē nga whakaahua me nga kuputuhi mo nga manuhiri rereke me nga mata rereke, he mea nui tenei wehewehenga ki te angitu me te whakahaere o te paetukutuku.