Mmene Mungagwiritsire Ntchito Zapangidwe Zake za Span ndi Div

Gwiritsani ntchito magawo ndi div ndi CSS kuti mukhale ndi machitidwe ambiri.

Anthu ambiri omwe ali atsopano ku mapangidwe a intaneti ndi HTML / CSS amagwiritsira ntchito ndi

zinthu mwachindunji pamene akupanga mawebusayiti. Chowonadi, komabe, ndi chakuti chimodzi mwa zinthu izi HTML zimagwiritsa ntchito zosiyana. Kuphunzira kugwiritsira ntchito aliyense pa cholinga chake kudzakuthandizani kukhala ndi masamba omwe ali oyeretsa omwe amalemba mosavuta.

Mukugwiritsa ntchito
Element

Gawo la div likulongosola magawano olondola pa tsamba lanu la intaneti.

Ndilobokosi momwe mungathe kukhazikitsa zinthu zina za HTML zomwe zimagwirizana pamodzi. Kusiyanitsa kumatha kukhala ndi zinthu zina zambiri, monga ndime, mitu, ndandanda, ziyanjano, zithunzi, ndi zina. Zingakhale ndi magawo ena mkati mwake kuti apereke dongosolo ndi bungwe lina ku HTML yanu.

Kuti mugwiritse ntchito div element, tulani tsamba la

patsogolo pa tsamba la tsamba lanu limene mukulifuna kuti likhale logawikana, ndi chizindikiro cha pambuyo pake:

Zamkatimu za div

Ngati malo a tsamba lanu akusowa zina zambiri zomwe mungagwiritse ntchito kalembedwe ndi CSS pamapeto pake, mukhoza kuwonjezera wosankha (monga mwachitsanzo,

id = "myDiv">), kapena kalasi yosankha (mwachitsanzo, class = "bigDiv">). Zonsezi zimatha kusankhidwa pogwiritsa ntchito CSS kapena kusintha kwa JavaScript. Zochitika zamakono zatsopano zimadalira kugwiritsa ntchito osankhidwa a sukulu mmalo mwa ma ID, mbali imodzi chifukwa cha momwe osankhidwa a ID alili. Zoona, komabe, mungagwiritse ntchito chimodzi ndipo mutha kupatsanso chigawenga chidziwitso komanso gulu la osankha.

Nthawi yogwiritsira ntchito

Versus

Gawo la div ndilosiyana ndi chigawo cha HTML5 chifukwa sichipereka tanthauzo lophiphiritsa. Ngati simukudziwa ngati gawo la magawo liyenera kukhala div kapena gawo, ganizirani za cholinga cha chinthucho ndi zomwe zilipo ndikuthandizani kusankha chomwe mungagwiritse ntchito:

  • Ngati mukufuna chofunikiracho kuti muwonjezere mafashoni kuderalo la tsamba, muyenera kugwiritsa ntchito div element.
  • Ngati zomwe zilipo zili ndi cholinga chokhazikika ndipo mukhoza kuyima payekha, mungafune kugwiritsa ntchito chigawochi m'malo mwake.

Potsirizira pake, magulu ndi magawo amachita mofananamo ndipo mungapereke aliyense wa iwo kuti azikhala ndi makhalidwe ake ndi kuyika maonekedwe awo ndi CSS kuti awoneke pa tsamba lanu lomwe mukufuna. Zonsezi ndizomwe zimapangidwira.

Pogwiritsa ntchito Element

Mphindi yazitali ndi chinthu chokhazikika mwasintha. Izi zimasiyanitsa ndi div ndi magawo a magawo. Mbali yamphongo imagwiritsidwa ntchito kukulitsa chidutswa china cha zinthu, kawirikawiri malemba, kuti apereke "hook" yowonjezera yomwe ingathe kulembedwa patapita nthawi. Zogwiritsidwa ntchito ndi CSS, zingasinthe kayendedwe ka malembawo; Komabe, popanda zilembo za kalembedwe, chida chokhachokha sichitha kulemberatu malemba.

Ichi ndi kusiyana kwakukulu pakati pa nthawi ndi div elements. Monga tanenera pamwambapa, div elementyi ikuphatikizapo kupuma kwa ndime, pamene gawo lamasewera limangouza msakatuli kuti agwiritse ntchito malamulo a machitidwe a CSS omwe ali ndi ma tags :


Malembo olemekezeka ndi malemba osalongosoka.

Onjezerani kalasi = "kuwonetsa" kapena gulu lina ku gawo lamasewera kuti muyambe kuwerenga ndi CSS (mwachitsanzo, class = "highlight">).

Mphindi yamphongo ilibe zikhumbo zofunikira, koma zitatu zomwe ziri zothandiza kwambiri ziri zofanana ndi za div element:

  • kalembedwe
  • kalasi
  • id

Gwiritsani ntchito nthawi ngati mukufuna kusintha kalembedwe kokha popanda kufotokozera zomwe zili ngati chinthu chatsopano cha chigawocho .

Mwachitsanzo, ngati mukufuna mawu achiwiri a h3 akukhala ofiira, mungathe kuzungulira mawuwo ndi chiganizo chophatikizira chomwe chingatanthawuze mawu ngati ofiira. Mawuwo adakali mbali ya h3 element, koma tsopano akuwonanso ofiira:

Ichi ndi Mutu Wanga Wodabwitsa

Yosinthidwa ndi Jeremy Girard pa 2/2/17