Mmene Mungagwiritsire Ntchito Mazenera A CSS pa Zowonjezera Zowonjezera Mawebusaiti

Kwa zaka zambiri, kuyandama kwa CSS kwakhala kofunika kwambiri, komabe n'kofunikira, pokhapokha pakupanga mawebusaiti. Ngati mapangidwe anu akuyitanitsa mazati angapo, munatembenukira kuti muyandama . Vuto ndi njirayi ndikuti, ngakhale kuti zanzeru zedi zomwe opanga webusaiti / opanga mapulogalamu adziwonetsera popanga malo ovuta, malo oyandikana ndi CSS sanafunike kuti agwiritsidwe ntchito mwanjira iyi.

Pamene akuyandama ndi kuika kwa CSS ndikutsimikiza kukhala ndi malo pa webusaiti kwa zaka zambiri, njira zatsopano zowonetsera monga CSS Grid ndi Flexbox tsopano ikupereka olemba webusaiti njira zatsopano zowonjezera mawebusaiti awo. Njira yatsopano yowonetsera yomwe ikuwonetsa zambiri ndi CSS Multiple Columns.

Zilembo za CSS zakhala zikuzungulira kwa zaka zingapo tsopano, koma kusowa thandizo kwa omasulira achikulire (makamaka akale a Internet Explorer) wateteza akatswiri ambiri a webusaiti pogwiritsa ntchito mafashoniwa mu ntchito yawo yopanga.

Ndikumapeto kwa chithandizo cha mautchulidwe akale a IE, ena opanga ma webusaiti tsopano akuyesa njira zatsopano zosinthira CSS, Mazenera a CSS akuphatikizidwa, ndikupeza kuti ali ndi ulamuliro wambiri ndi njira zatsopanozi kusiyana ndi momwe amachitira ndi akuyandama.

Zowona zazitsulo za CSS

Monga momwe dzina lake limasonyezera, CSS Multiple Columns (yomwe imadziƔikanso kuti CSS3 mndandanda wamakalata ambiri) imakulolani kugawaniza muzinthu zowonjezera. Zambiri zamtundu wa CSS zomwe mungagwiritse ntchito ndi:

Kwa chiwerengero-chiwerengero, mumatchula chiwerengero cha zipilala zomwe mukufuna. Gulu lachitsulo lingakhale magalimoto kapena malo osiyana pakati pa zipilalazo. Wosatsegulayo amatenga zoyenera izi ndikugawa mndandanda molingana ndi chiwerengero cha zipilala zomwe mumanena.

Chitsanzo chodziwika cha zigawo zambiri za CSS muzochita zingakhale kupatulira chigawo cha malemba m'zinthu zambiri, zofanana ndi zomwe mungazione m'nkhani ya nyuzipepala. Nenani kuti muli ndi malemba a HTML otsatirawa (ndondomeko yomwe mwachitsanzo, ndikungoyamba ndime imodzi, pamene mukuchita mwina pangakhale ndime zingapo zomwe zilipo pamunsiwu):

Mutu wa nkhani yanu

Talingalirani ndime zambiri zalemba apa ...

Ngati inu munalemba makina a CSS awa:

.content {-mz-col-count: 3; -boma-chiwerengero chowerengera: 3; ndondomeko ya chiwerengero: 3; -mphindi-mpata: 30px; -popopotoloka: 30px; Gawo lachitsulo: 30px; }}

Ulamulilo uwu wa CSS ukanagawaniza magawano "okhutira" muzitsulo zitatu zofanana ndi kusiyana kwa pixel 30 pakati pawo. Ngati mukufuna zigawo ziwiri m'malo mwa 3, mutangosintha phindu limenelo ndipo osatsegulayo akawerengera zigawo zatsopano zazitsulozo kuti azigawanitsa zofananazo. Zindikirani kuti timagwiritsa ntchito malonda a pre-specified poyamba, titatsatiridwa ndi zizindikiro zosagwirizana ndi prefixed.

Mosavuta monga izi, ntchito yake mwanjirayi ndi yokayikira pa ntchito ya webusaitiyi. Inde, mungathe kugawaniza zinthu zambiri muzitsulo zambiri, koma izi sizingakhale zowerenga bwino pa Webusaiti, makamaka ngati kutalika kwa zipilala zikugwa pansi pa "khola" lazenera.

Owerenga amafunika kuyendetsa mmwamba ndi pansi kuti awerenge zonse. Komabe, mtsogoleri wamkulu wa CSS Columns ndi wosavuta monga momwe mukuwonera pano, ndipo angagwiritsidwe ntchito kuchita zochuluka kuposa kungopatulira zomwe zili m'ndime zina - zingathe kugwiritsidwa ntchito popanga.

Kuyika Ndi Zowonjezera CSS

Nenani kuti muli ndi tsamba lokhala ndi tsamba lokhala ndi magawo atatu okhutira. Izi ndizomwe zimakhazikitsidwa pa webusaitiyi, ndipo kuti mukwaniritse mapepala atatuwo, mutha kuyendetsa magawo omwe alimo. Ndizitsulo zambiri za CSS, ndizosavuta.

Nazi chitsanzo china HTML:

News News

Nkhani ikupita apa ...

Kuchokera mu Blog Yathu

Zinthu zikhoza kupita pano ...

Zochitika Zotsatira

Zotsatira zikhoza kupita kuno ...

CSS yopanga zipilala izi zimayamba ndi zomwe mwawona kale:

.content {-mz-col-count: 3; -boma-chiwerengero chowerengera: 3; ndondomeko ya chiwerengero: 3; -mphindi-mpata: 30px; -popopotoloka: 30px; Gawo lachitsulo: 30px; }}

Tsopano, vuto liri apa, popeza osatsegulayo akufuna kugawanika izi mofanana, kotero ngati kutalika kwa magawowa ndi osiyana, osatsegulawa adzagawaniza zokhudzana ndi magawo, ndikuwonjezera chiyambi pa khola limodzi ndi ndikupitirizabe kukhala wina (mungathe kuona izi pogwiritsa ntchito nambalayi kuti muthe kuyesa ndikuyesa kutalika kwa zinthu zomwe zili mkati mwa magawo onse).

Izi sizimene mukufuna. Mukufuna kuti magawo awa onse apange gawo losiyana, ndipo ziribe kanthu kaya zili zosiyana kapena zazing'ono zomwe zilipo, simukufuna kuti zigawanike. Mukhoza kukwaniritsa izi mwa kuwonjezera mzere umodzi umodzi wa CSS:

div div {kuwonetsera: mkati-block; }}

Izi zidzakakamiza magawo omwe ali mkati mwa "zokhutira" kuti akhalebe olondola ngakhale ngati osatsegula akugawaniza izi muzitsulo zambiri. Ngakhale zili bwino, popeza sitinapereke chilichonse apafupi, zikhozizi zidzangokhala ngati osatsegula akukhazikika, ndikuwapanga kukhala othandizira mawebusaiti . Pokhala ndi kalembedwe kameneka kameneka, gawo lililonse la magawo atatu lidzakhala gawo lapadera la zomwe zili.

Pogwiritsa ntchito Kuphindi-Kukula

Palinso katundu wina pambali pa "chiwerengero cha chiwerengero" chimene mungagwiritse ntchito, ndipo malingana ndi zosowa zanu, zikhoza kukhala zabwino pa tsamba lanu. Izi ndi "m'kati mwake". Pogwiritsira ntchito zofanana za HTML monga momwe taonera kale, tikhoza kuchita izi ndi CSS yathu:

.sentent {-mphindi-m'lifupi: 500px; -kabkit-m'lifupi-width: 500px; gawo lalitali: 500px; -mphindi-mpata: 30px; -popopotoloka: 30px; Gawo lachitsulo: 30px; } .chigawo chawonetsera {chikuwonetsani: inline-block; }}

Njira yomwe izi zimagwirira ntchito ndikuti msakatuli amagwiritsa ntchito "chigawo chokwanira" ngati mtengo wapamwamba wa ndimeyo. Kotero ngati zenera zowakanema zili zazikulu zoposa pixels 500, magulu atatuwa adzawoneka muzomwelo, chimodzi mwa nsonga za wina. Ichi ndichigawo chogwiritsidwa ntchito pazithunzi zam'manja / zazing'ono.

Pamene kukula kwa msakatuli kukuwonjezeka kukhala kwakukulu kokwanira ma columns awiri pamodzi ndi mipata yowonjezera, msakatuliyo amachokera ku gawo limodzi lokhala ndi zigawo ziwiri. Pitirizani kuwonjezera kukula kwazenera ndipo potsiriza, mutenge mapulaneti atatu, ndi magawo atatu omwe akuwonetsedwa muzomwe ali nazo. Apanso, iyi ndi njira yabwino kwambiri yopezera makonzedwe abwino , othandizira osiyanasiyana , ndipo simukusowa kugwiritsa ntchito mauthenga a mauthenga kuti asinthe maonekedwe a masanjidwe!

Zina Zamtundu

Kuphatikiza pa malo omwe ali pamwamba pano, palinso katundu wa "malamulo a chigawo", kuphatikizapo mtundu, ndondomeko, ndi zigawo zazikulu zomwe zimakulolani kupanga malamulo pakati pa zipilala zanu. Izi zingagwiritsidwe ntchito mmalo mwa malire ngati mukufuna kukhala ndi mizere yolekanitsa zipilala zanu.

Nthawi Yoyesera

Pakali pano, CSS Multiple Column Layout imathandizidwa kwambiri. Pokhala ndi maulendo otsogolera, anthu oposa makumi asanu ndi atatu (94%) omwe amagwiritsa ntchito intaneti akhoza kuwona mafashoniwa, ndipo gulu losalimbikitsidwa likhoza kukhala lotchuka kwambiri pa Internet Explorer zomwe simungathe kuthandizira.

Ndi msinkhu uwu wothandizira tsopano, palibe chifukwa choti musayambe kuyesa ndi CSS Columns ndi kuyika mafashoni awa mu mawebusaiti okonzeka kupanga. Mungayambe kuyesa kwanu pogwiritsa ntchito HTML ndi CSS yomwe ili muyiyiyi ndikusewera ndi machitidwe osiyanasiyana kuti muwone zomwe zingagwiritse ntchito bwino kuti malo a sitepe anu adziwe.