Ungakusebenzisa njani ukubekwa ngokugqibeleleyo kwi-HTML5 kunye ne-CSS3 Programming

NguAndy Harris

Masiqalise i-adventure yokuma ngokugqibeleleyo ngokujonga ubume bendawo emiselweyo. Apha, ungabona iphepha le-HTML5 elinemihlathi emibini kulo. Ungasebenzisa i-CSS ukunika umhlathi ngamnye umbala owahlukileyo kunye nokucwangcisa ukuphakama nobubanzi obuthile. Ukuma kushiywe kumphathi wobeko olungagqibekanga, obeka umhlathi wesibini (omnyama) ngqo ezantsi (yokuqala).



sanell isitshizi sokucoca ngesandla

umfanekiso0.jpg



Uyicwangcisa njani i-HTML

Ikhowudi ayothusi:

 boxes.html 

Ukuba awuboneleli ngesikhokelo esongezelelweyo, imihlathi (njengezinye izinto zenqanaba lebhloko) zihlala zinikezela ngembuyekezo yenqwelomoya ngaphambi nasemva kwayo, ingqokelela ngaphezulu kwenye. Iindlela zobeko ezingagqibekanga ziqinisekisa ukuba akukho nto igqithileyo



Ungazongeza njani izikhokelo zesikhundla

Jonga into entsha: Imihlathi iyagqagqana!

umfanekiso1.jpg

Oku kufezekiswa ngeendlela ezithile zeCSS:



 absPosition.html 

Ke, kutheni ukhathalele ukuba iibhokisi ziyagqagqana? Ewe awunakukhathalela, kodwa eyona nto inomdla yile: Unokuba nolawulo oluchanekileyo ngakumbi malunga nokuba zihlala phi izinto kwaye zingakanani na ubukhulu bazo. Unokudlula ngaphezulu kwesiqhelo sesikhangeli sokugcina izinto zingagqabhuki, ekunika ukhetho olunomdla.

Uyenza njani indawo yokuma ngokupheleleyo

Amalungu amatsha e-CSS avumela oku kulawulwa ngokuthe ngqo kobukhulu kunye nokuma kwezi zinto. Nantsi i-CSS yenye yeebhokisi:

 #blueBox { background-color: blue; width: 100px; height: 100px; position: absolute; left: 0px; top: 0px; margin: 0px; }
  1. Cwangcisaisikhundlauphawu kwingokupheleleyo.

    Ukubeka indawo ngokungagungqiyo kunokusetyenziselwa ukumisela ngokuchanekileyo (ngaphezulu okanye ngaphantsi) apho into iya kubekwa kwiscreen:

     position: absolute;
  2. Chazakhohloisikhundla kwi-CSS.

    Emva kokumisela ukuba into iya kuba nayongokupheleleyoisikhundla, sisuswe ekuhambeni okuqhelekileyo, ke unyanzelekile ukuba ulungise indawo yaso. Inkqubo ye-khohlouphawu limisela apho umda wasekhohlo wento uyakuya khona. Oku kungachazwa nangazo naziphi na iiyunithi zemilinganiselo, kodwa ubukhulu becala kulinganiswa ngeepikseli:

     left: 0px;
  3. ChazaNgaphezuluisikhundla neCSS.

    Uphawu lubonisa ukuba indawo ephezulu iya kuya phi. Kwakhona, oku kuhlala kuchazwa kwiiphikseli:

     top: 0px;
  4. Sebenzisa iukuphakamakwayeububanziiimpawu ukumisela ubungakanani.

    Ngokwesiqhelo, xa ucacisa indawo, uya kufuna ukumisela ubungakanani:

    I-polymyxin b sulphate kunye ne-trimethoprim
     width: 100px; height: 100px;
  5. Cwangcisa imida ibe ngu-0.

    Xa usebenzisa indawo ekumiswe kuyo ngokupheleleyo, usebenzisa ulawulo oluthile. Kuba izikhangeli aziphathi imida ngokufanayo, kungcono ukuba usete imida ukuya ku-0 kwaye ulawule isithuba phakathi kwezinto ngesandla:

     margin: 0px;

Ngokubanzi, usebenzisa ukubekwa okupheleleyo kuphela kwizinto ezinamagama, endaweni yeeklasi okanye iindidi zezinto ngokubanzi. Umzekelo, awuyi kufuna ukuba zonke iziqendu kwiphepha zibe nobukhulu obufanayo kunye nesikhundla, okanye awukwazi ukuzibona zonke. Ukubeka indawo ngokungagungqiyo kusebenza kwinto enye kuphela ngexesha.