Pogwiritsa ntchito makina a CSS omwe amapezeka pa Web Design Layout
CSS ndi katundu wofunika kwambiri pazomwe mukukonzekera. Zimakupatsani inu kukhazikitsa tsamba lanu la webusaiti zolinga chimodzimodzi momwe mukufuna kuti awawonetse-koma kuti mugwiritse ntchito muyenera kumvetsa mmene zimagwirira ntchito.
Mu pepala la kalembedwe, CSS ikuyandama katundu ikuwoneka ngati:
.momwe {kusambira: kulondola; }}
Izi zimauza msakatuli kuti chilichonse chomwe chili ndi "chabwino" chiyenera kuyendetsedwa kumanja.
Mungapereke izi monga izi:
gulu = "kulondola" />
Kodi Mungathe Kutha Kutani ndi Nyumba Yoyendetsa CSS?
Simungathe kuyandama chinthu chilichonse pa tsamba la intaneti. Mukhoza kuyandama zokhazokha. Izi ndizo zomwe zimatenga malo ambiri pa tsamba, monga zithunzi (), ndime (), magawo (), ndi mndandanda ().
Zosintha zina zomwe zimakhudza malemba, koma osapanga bokosi patsambali amatchedwa zinthu zapakati ndipo sangathe kuyandama. Izi ndizofanana ngati nthawi (), kupuma kwa mzere (), kutsindika kwakukulu (), kapena zamatsenga ().
Kodi Zimayenda Kuti?
Mukhoza kuyandama zinthu kumanja kapena kumanzere. Chilichonse chomwe chimatsatira choyandamacho chidzayenda kuzungulira choyandama chakuzungulira mbali inayo.
Mwachitsanzo, ngati ndikuyandama fano kumanzere, malemba kapena zinthu zina zotsatirazi zidzathamangira kuzungulira. Ndipo ngati ine ndikuyandama fano kumanja, mawu alionse kapena zinthu zina zotsatirazi zidzathamangira kuzungulira kumanzere. Chithunzi chomwe chimayikidwa mu chigawo chopanda mawonekedwe osagwedezeka chikugwiritsidwa ntchito kwa izo chiwonetseratu kuti osatsegulayo wasankhidwa kuti asonyeze zithunzi.
Izi kawirikawiri ndi mzere woyamba wa malemba omwe akuwonetsedwa pansi pa fano.
Kodi Adzasunthira Pang'ono Pati?
Chidutswa chimene chayandama chidzapita kumanzere kapena kumanja kwa chidebe momwe angathere. Izi zimabweretsa zosiyana zosiyanasiyana malinga ndi momwe mzere wanu walembedwera.
Kwa zitsanzo izi, ndikhala ndikuyandama kanthu kakang'ono ka DIV kumanzere:
- Ngati chinthu choyandama sichikhala ndi chiwerengero choyambirira, chidzatenga malo osakanikirana monga momwe akufunira ndi kupezeka, mosasamala kanthu kuti akuyandama. Zindikirani: ma browser ena amayesa kuika zinthu pambali pazitsulo zomwe zimayandikana pamene m'lifupi silingatanthauzidwe-nthawi zambiri amapereka chinthu chosasunthika pang'ono. Kotero inu muyenera nthawizonse kufotokozera m'lifupi pa zinthu zomwe zimayandama.
- Ngati chidutswa cha chidebe ndi HTML element, DIV yoyandikana idzakhala kumbali yakumzere ya tsamba.
- Ngati chidutswa cha chidebecho chili ndi chinthu china, DIV yoyendetsedwayo idzakhala kumbali yakumzere ya chidebecho.
- Mutha kukhala ndi chisa choyandama, ndipo izi zimatha kuyendetsa kumapeto kwa malo odabwitsa. Mwachitsanzo, kuyandama uku ndi DIV yosakanizidwa kumanzere mkati mwa DIV yoyendetsedwa bwino.
- Zinthu zowonongeka zidzakhala pafupi ndi wina ndi mzake ngati pali malo mu chidebe. Mwachitsanzo, chidebechi chili ndi zinthu 100Px za DIV zomwe zimayendetsedwa mu chipinda cha 400px.
Mukhoza kugwiritsa ntchito kuyandama kuti mupange chithunzi chojambula chithunzi. Muyika chithunzi chilichonse (chimagwira ntchito bwino ngati zili kukula) mu DIV ndi ndemanga ndikuyandama zinthu za DIV mu chidebecho.
Ziribe kanthu momwe mawindo osatsegulira aliri ambiri, zizindikiro zidzasintha mogwirizana.
Kutsegula Chigumula
Mukadziwa momwe mungapangire chinthu choyandama, ndizofunika kudziwa momwe mungatsekere float. Mukutsegula choyandama ndi katundu woonekera wa CSS. Mukhoza kuchotsa kumanzere, kumanja komweko kapena onse awiri:
kumveka: kumanzere;
kumveka: kulondola;
momveka; zonse;
Chilichonse chomwe mumayika malo omveka bwino chidzawoneka pansi pa chinthu chomwe chikuyandikana ndizolowera. Mwachitsanzo, mu chitsanzo ichi ndime ziwiri zoyambirira zalemba sizichotsedwa, koma lachitatu ndilo.
Sewani ndi chidziwitso choyera cha zinthu zosiyana m'malemba anu kuti mupeze zotsatira zosiyana.
Mmodzi wa mapangidwe ochititsa chidwi kwambiri ndi zithunzi zambiri pansi pazanja lamanja kapena lamanzere pafupi ndi ndime zalemba. Ngakhale ngati malemba sali okwanira kupukusa chithunzicho, mukhoza kugwiritsa ntchito momveka bwino pazithunzi zonse kuti muwonetsetse kuti akuwonekera pamtunduwu osati pafupi ndi fano lapitalo.
HTML (kubwereza ndimeyi):
Dzakudalitsanso dera lanu kuti mukhale ndi nthawi yambiri yobwereza. Komatu sizomwe mukuchita.
CSS (kusuntha zithunzizo kumanzere):
img.float {float: kumanzere;
kumveka: kumanzere;
malire: 5px;
}}
Ndipo kumanja:
img.float {float: kulondola;
kumveka: kulondola;
malire: 5px;
}}
Kugwiritsira ntchito Zopangira Kuti Zidzakhalepo
Mukamvetsa momwe nyumbayo ikugwirira ntchito, mukhoza kuyamba kugwiritsa ntchito kukhazikitsa masamba anu. Izi ndizo ndondomeko zomwe ndimatenga kuti ndipange tsamba lapafupi la webusaiti:
- Pangani mapangidwe (pamapepala kapena pa chida chojambula kapena mutu wanga).
- Dziwani kumene magawano a tsamba adzakhalire.
- Ganizirani zozama zazitsulo zosiyanasiyana ndi zinthu mkati mwake.
- Sungani chirichonse. Ngakhalenso chipangizo chamkati chimayandikana kumanzere kuti ndidziwe komwe zidzakhala zogwirizana ndi sewero lawonekera.
Malingana ngati mutadziwa kuti m'lifupi mwake (kuchuluka kwa magawo) mwazigawo zanu, mungagwiritse ntchito malo oyandama kuti muwaike pomwe ali patsamba. Ndipo chinthu chabwino ndichoti, simukusowa kudandaula zambiri zokhudza bokosilo losiyana ndi Internet Explorer kapena Firefox.