Kaip naudoti CSS stulpelius kelių stulpelių svetainių maketams
TurinysIšskleisti- CSS stulpelių pagrindai
- Išdėstymas su CSS stulpeliais
- Naudojant stulpelio plotį
- Kitos stulpelio savybės
- Laikas Eksperimentuoti
Daugelį metų, CSS plūduriuoja buvo sudėtingas, tačiau būtinas komponentas kuriant svetainių maketus. Jei jūsų dizainas reikalavo kelių stulpelių, pasirinkote plūdes. Šio metodo problema yra ta, kad nepaisant neįtikėtino išradingumo, kurį parodė interneto dizaineriai / kūrėjai kurdami sudėtingą svetainę maketai , CSS plūdės niekada nebuvo skirtos naudoti tokiu būdu.
Nors plūdės ir CSS padėties nustatymas neabejotinai turės vietą interneto dizaine daugelį metų, naujesni išdėstymo būdai, įskaitant CSS Grid ir Flexbox, dabar suteikia žiniatinklio dizaineriams naujų būdų kurti savo svetainių maketus. Kitas naujas išdėstymo metodas, parodantis daug potencialo, yra CSS keli stulpeliai.
CSS stulpeliai egzistuoja jau keletą metų, tačiau dėl senesnių naršyklių (daugiausia senesnių „Internet Explorer“ versijų) palaikymo daugelis žiniatinklio profesionalų negalėjo naudoti šių stilių savo gamybiniame darbe.
Pasibaigus tų senesnių IE versijų palaikymui, kai kurie žiniatinklio dizaineriai dabar eksperimentuoja su naujomis CSS išdėstymo parinktimis, įskaitant CSS stulpelius, ir nustato, kad jie gali daug geriau valdyti šiuos naujus metodus nei naudojant plūdes.
CSS stulpelių pagrindai
Kaip rodo jo pavadinimas, CSS keli stulpeliai (taip pat žinomi kaip CSS3 kelių stulpelių išdėstymas) leidžia padalyti turinį į nustatytą skaičių stulpelių. Pagrindinės CSS ypatybės, kurias naudotumėte:
- stulpelių skaičius
- stulpelis-tarpelis
Stulpelių skaičiui nurodykite norimą stulpelių skaičių. Stulpelių tarpas būtų latakai arba tarpai tarp tų kolonų. Naršyklė paims šias reikšmes ir tolygiai padalins turinį į nurodytą stulpelių skaičių.
Dažnas CSS kelių stulpelių pavyzdys būtų teksto turinio bloko padalijimas į kelis stulpelius, panašiai kaip laikraščio straipsnyje. Tarkime, kad turite šį HTML žymėjimą (atminkite, kad, pavyzdžiui, įdėjome tik vienos pastraipos pradžią, o praktiškai šiame žymėjime tikriausiai būtų kelios turinio pastraipos):
|_+_|Jūsų straipsnio antraštė
Įsivaizduokite čia daugybę teksto pastraipų...
Jei tada parašėte šiuos CSS stilius:
|_+_|
Ši CSS taisyklė padalitų turinio padalijimą į 3 vienodus stulpelius, tarp kurių būtų 30 pikselių tarpas. Jei norėtumėte dviejų stulpelių, o ne 3, tiesiog pakeiskite šią reikšmę ir naršyklė apskaičiuos naujus tų stulpelių pločius, kad turinys būtų padalintas tolygiai. Atkreipkite dėmesį, kad pirmiausia naudojame ypatybes su pardavėju, o po to - deklaracijas be prefikso.
Kad ir kaip tai būtų paprasta, jo naudojimas tokiu būdu yra abejotinas naudojant svetainę. Taip, galite padalyti daug turinio į kelis stulpelius, bet tai gali būti ne pati geriausia žiniatinklio skaitymo patirtis, ypač jei šių stulpelių aukštis nukrenta žemiau ekrano ribos.
Tada skaitytojai turėtų slinkti aukštyn ir žemyn, kad perskaitytų visą turinį. Vis dėlto CSS stulpelių principas yra toks pat paprastas, kaip matote čia, ir jį galima naudoti kur kas daugiau, nei tik padalyti kai kurių pastraipų turinį – jis iš tikrųjų gali būti naudojamas maketavimui.
Išdėstymas su CSS stulpeliais
Tarkime, kad turite tinklalapį su turinio sritimi, kurioje yra 3 turinio stulpeliai. Tai labai paplitęs svetainės išdėstymas, o norėdami pasiekti tuos 3 stulpelius, paprastai plūduriuotumėte esančius skyrius. Naudojant CSS kelis stulpelius, tai daug lengviau.
Štai keletas HTML pavyzdžių:
|_+_|Iš mūsų tinklaraščio
Turinys čia patektų…
Artimiausi renginiai
Turinys čia patektų…
CSS, norint sukurti šiuos kelis stulpelius, prasideda tuo, ką matėte anksčiau:
|_+_|Dabar iššūkis yra tas, kad naršyklė nori padalyti šį turinį tolygiai, taigi, jei šių skyrių turinio ilgis skiriasi, ta naršyklė iš tikrųjų padalins atskiro skyriaus turinį, pridėdama jo pradžią į vieną stulpelį ir tęsdama. į kitą (tai galite pamatyti naudodami šį kodą, kad vykdytumėte eksperimentą ir į kiekvieną skyrių įtrauktumėte skirtingo ilgio turinį).
Jūs to nenorite. Norite, kad kiekvienas iš šių skyrių sukurtų atskirą stulpelį ir, nesvarbu, koks didelis ar mažas būtų atskiro skyriaus turinys, niekada nenorite, kad jis būtų padalintas. Tai galite pasiekti pridėję šią papildomą CSS eilutę:
|_+_|Tai privers tuos turinio skyrius, esančius viduje, išlikti nepažeisti, net jei naršyklė padalija jį į kelis stulpelius. Dar geriau, kadangi čia nieko nenurodėme fiksuoto pločio, šių stulpelių dydis bus automatiškai keičiamas, kai keičiasi naršyklės dydis, todėl jie bus ideali programa reaguojančios svetainės . Turint šį įterpto bloko stilių, kiekvienas iš 3 skyrių bus atskiras turinio stulpelis.
Naudojant stulpelio plotį
Be stulpelių skaičiaus, galite naudoti dar vieną ypatybę ir, atsižvelgiant į jūsų išdėstymo poreikius, tai gali būti geresnis pasirinkimas jūsų svetainei. Tai yra stulpelio plotis. Naudodami tą patį HTML žymėjimą, kaip parodyta anksčiau, galime tai padaryti naudodami CSS:
|_+_|Tai veikia taip, kad naršyklė naudoja šį stulpelio plotį kaip didžiausią to stulpelio reikšmę. Taigi, jei naršyklės langas yra mažesnis nei 500 pikselių, šie 3 skyriai bus rodomi viename stulpelyje, vienas ant kito. Tai yra įprastas išdėstymas, naudojamas mobiliesiems / mažiems ekranams.
Naršyklės plotis didėja, kad būtų pakankamai didelis, kad tilptų 2 stulpeliai kartu su nurodytais stulpelių tarpais, naršyklė automatiškai pereis nuo vieno stulpelio išdėstymo prie dviejų stulpelių. Nuolat didinkite ekrano plotį ir galiausiai gausite 3 stulpelių dizainą, o kiekvienas iš 3 skirsnių bus rodomas savo stulpelyje. Vėlgi, tai puikus būdas reaguoti, draugiškas keliems įrenginiams maketus, ir jums net nereikia naudoti žiniasklaidos užklausos pakeisti išdėstymo stilius!
Kitos stulpelio savybės
Be čia aptartų ypatybių, taip pat yra stulpelių taisyklės ypatybių, įskaitant spalvos, stiliaus ir pločio reikšmes, kurios leidžia kurti taisykles tarp stulpelių. Jie būtų naudojami vietoj kraštinių, jei norite, kad stulpelius atskirtų kelios eilutės.
Laikas Eksperimentuoti
Šiuo metu CSS kelių stulpelių išdėstymas yra labai gerai palaikomas. Naudojant priešdėlius, daugiau nei 94 % žiniatinklio naudotojų galėtų matyti šiuos stilius, o ta nepalaikoma grupė iš tikrųjų būtų tik daug senesnės „Internet Explorer“ versijos, kurios vis tiek nebepalaikomos.
Kadangi dabar teikiamas tokio lygio palaikymas, nėra jokios priežasties nepradėti eksperimentuoti su CSS stulpeliais ir nediegti šių stilių gamybai paruoštose svetainėse. Galite pradėti eksperimentus naudodami šiame straipsnyje pateiktą HTML ir CSS ir žaisti su skirtingomis reikšmėmis, kad sužinotumėte, kas geriausiai tiktų jūsų svetainės išdėstymo poreikiams.