Sisu
- 01. Alustage
- 02. Kontrollige CSS-i võrku
- 03. Määrake ruudustiku asukohad
- 04. Kasutage ruudustiku malli
- 05. Määrake mall
- 06. Linkige mall klassiga
- 07. Muutke see reageerivaks
- 08. Töötage tegeliku kujunduse kallal
- 09. Lingi mall
- 10. Lisage järgmised alad
- 11. Lõpeta esimene võre
- 12. Lisage valge taust
- 13. Tehke teine võre
- 14. Lisage veerud
- 15. Parandage lehe jalaosa
- 16. Reguleerige keskmise ekraani kujunduse jaoks
- 17. Pange esimene ruudustik uuesti üles
- 18. Testige oma paigutust
- 19. Mobiilide näpunäide
- 20. Kontrollige ühe veeru ruudustikku
- 21. Lõpeta paigutus
Veebipaigutus on alati olnud piiratud, tõepoolest pole kunagi olnud midagi tõeliselt pühendatud sisu hõlpsaks kuvamiseks mõistlikus vormingus.
Veel 90-ndatel aastatel, kui veeb esimest korda võimust võttis, leidsid disainerid, kes olid harjunud võrku sisu paigutama, ainus viis brauseris sama tulemuse saamiseks kasutada tabelit. Lahtrite ühendamine viis keerukate veebisaitide paigutusteni, kuid see tegi ligipääsetavuse ja SEO-ga kaose. Kiirelt edasi ja täna on igasuguseid viise sisu paigutamiseks ujukite, painduvate kastide jms abil.
CSS3 on veebi võimalusi tõesti edasi viinud ja alates 2014. aastast on seal CSS Grid Layout. Sellel on praegu 75-protsendiline brauseritugi, nii et jõuab hetkeni, kui on aeg seda tõsiselt kaaluda. Zurb's Foundation 6 raamistik on pardal olnud ja kasutab seda oma võrgu toiteks.
Selles õpetuses keskendutakse ajakirjastiilis funktsiooni loomisele, mis näitab teile, kuidas keskmise ja väikese ekraanisuuruse jaoks kohandada tundlikku veebikujundust. Muude veebikujundusallikate kohta vaadake meie juhendit parimate veebisaitide loojate ja veebimajutusteenuste kohta.
Laadige siit alla õpetusfailid (ja salvestage need turvalisse pilvemällu).
01. Alustage
Avage projektifailide algkaustast fail ‘grid1.html’. Selle HTML-paigutusel on viis div-silti, lihtsalt nimega element1–5 CSS-klassidena. See on võrku paigutatud sisu. Sellega ümbritsev konteiner määrab ruudustiku, millel on neli veergu.
div> div> punkt 1 / div> div> punkt 2 / div> div> punkt 3 / div> div> kirje 4 / div> div> kirje 5 / div> / div>
02. Kontrollige CSS-i võrku
Pealkirja vaadates näete, et "konteiner" on öeldud ruudustikuna koos ridade automaatse kõrgusega, samas kui veergudeks tuleb määrata neli, kusjuures igaüks on 25% brauserist . Kontrollige seda brauseris ja näete, et igale üksusele määratakse automaatselt järgmine saadaolev ruudustiku asukoht.
.konteiner {kuva: ruudustik; ruudustik-mall-read: auto; ruudustiku-malli-veerud: kordus (4, 25%); }
03. Määrake ruudustiku asukohad
Vaadake nüüd faili ’grid2.html’. See on sama mis esimeses failis, välja arvatud punktidele1 ja '22 antakse kindlad positsioonid. Esimene on paigutatud 1. ritta ja lõpeb enne 2. rida. Veerg algab 1-st ja lõpeb 3-ga, nii et see ulatub kahte veergu. Teine algab 3. veerust ja võtab kaks järgmist veergu. Ülejäänud üksused täidavad järgmised saadaolevad ruudustiku pesad.
.etem1 {ruudustik-rida-algus: 1; ruudustik-rida-ots: 2; ruudustik-veerg-algus: 1; ruudustiku-veeru ots: 3; }. kirje2 {ruudustik-rida-algus: 1; ruudustik-rida-ots: 2; ruudustik-veerg-algus: 3; ruudustiku-veeru ots: 5; }
04. Kasutage ruudustiku malli
Avage ’grid3.html’ ja vaadake HTML-i sisu. Näete, et on paigutus koos päise, külgriba, põhisisu jaotise ja jalusega. Saate lisada sisusse rohkem teksti, et näha, mis juhtub, kui see asetatakse. Võrk kasutab mallifunktsiooni, et muuta need jaotised paigutuseks.
div> div> Päis / div> div> Külgriba / div> div> Sisu / div> div> jalus / div> / div>
05. Määrake mall
Vaadake konteineri CSS-i. See on jälle määratletud kui ruudustik. Ülemine rida on 200 pikslit kõrge, keskmine on automaatne ja viimane rida 100 pikslit. Veergude laius on 33 protsenti ja ülejäänud osa täidetakse automaatselt. Mallis öeldakse, et päis täidab mõlemad veerud. Järgmine rida on esimese veeru külgriba ja järgmise veeru sisu. Jalus liigub üle mõlema.
.konteiner {kuva: ruudustik; ruudustik-mall-read: 200 pikslit 100 pikslit; ruudustiku-malli-veerud: 33% automaatne; grid-template-areas: "päise päis" "külgriba sisu" "jalusjalus"; }
06. Linkige mall klassiga
Klassi sidumiseks malliga määratleb siin näidatud kood selle. Iga võrgupiirkond nimetatakse ja link luuakse. Sisu siin ei kuvata, kuid see on dokumendis ’grid3.html’. Vaadake seda brauseris, et näha ruudustiku paigutust. Kuna kaks veergu on määratletud, vajab mall mõlemas tagurpidi komas kahte ala.
.header {grid-area: päis; } .riba {grid-area: sidebar; } .jalg {võrguala: jalus; }
07. Muutke see reageerivaks
Võrgu „grid3.html” muutmiseks reageerivaks lisatakse meediumipäring ja ülemist rida hoitakse 200 protsendi juures, ülejäänud read muudetakse automaatselt suuruseks. Veergu on ainult üks, täislaius, nii et mallil on paigutuse määratlemiseks igas käänatud komas üks sõna. Neid saab hõlpsasti ümber korraldada ilma HTML-i teisaldamata.
@meediaekraan ja (max-width: 699px) {.container {display: grid; ruudustik-mall-read: 200px auto; ruudustiku-malli-veerud: 100%; grid-template-areas: "päis" "külgriba" "sisu" "jalus"; }}
08. Töötage tegeliku kujunduse kallal
Nüüd avage ’index.html’ - kogu sisu HTML on juba loodud, nagu ka osa kujunduselementide CSS-ist. Lisage see ruudustik peatüki stiilimärgenditele. Nii luuakse kolmes veerus ruudustik iga sektsiooni malliga. Pange tähele tühjade võrgusektsioonide punkt.
.konteiner1 {laius: 80%; veeris: 0 automaatne; kuva: ruudustik; ruudustik-mall-read: auto; ruudustiku-malli-veerud: 33,3% 33,3% automaatne; grid-template-areas: "päise päise päis" ". standfirst standfirst" ".. article1" "focus pullquote pullquote" "Article2 Article2."; }
09. Lingi mall
Nagu eelmises etapis, seob see ka päise malliga. Päisel öeldakse, et see ulatub ruudustiku kõigist kolmest veerust, seejärel seatakse standfirst võtma kaks veergu ja vasakul tühi veerg. Kui kontrollite brauserit, on see veerg täidetud, kuna ülejäänud sisu täidab järgmise vaba ruumi automaatselt - seda ei tehta aga siis, kui see on kõik seadistatud.
.header {grid-area: päis; } .standfirst {ruudustikuala: standfirst; }
10. Lisage järgmised alad
Nüüd paigutatakse kujundusse esimene artikkel, tõmbe tsitaat ja fookuspilt. Tõmba tsitaat ja pilt on kõrvuti samal real. Selles etapis pole artiklit 2 paigutatud, nii et see võtab võrgul esimese vaba ruumi, mis asub ooteseisundi kõrval.
.artikkel1 {ruudustikuala: artikkel1; } .pullquote {grid-area: pullquote; } .fookus {ruudustikuala: fookus; teksti joondamine: keskel; }
11. Lõpeta esimene võre
Teise artikli CSS-i lisamine võimaldab kogu esimese ruudustiku õigesti paigutada. Seda brauseris vaadates selgub, et küljendus töötab taustpildiga ja loob ajakirjades nähtud paigutuse, kus disainer töötab suure taustpildi ümber.
.artikkel2 {ruudustikuala: artikkel2; veergude vahe: 65 pikslit; veergude arv: 2; }
12. Lisage valge taust
Enne teise ruudustiku käivitamist võite mõelda, miks on vaja kahte ruudustikku. Põhjuseks on see, et sellel ruudustikul on valge täislaiusega taust, nii et see CSS ümbritseb teist ruudustikku. See annab sellele jaotisele kujunduses teise lehe tunde.
.whitebg {polster: 100px 0; taustavärv: #ddd; }
13. Tehke teine võre
Teine ruudustik on lihtsam kui esimene. Seal on kolm veergu, ridadel on automaatne kõrgus. Sisu täidab iga veeru, nii et mallialasid pole vaja määratleda. Kui aga tahvelarvuti kujundus lisatakse, tuleb see üle minna kahele veerule, seega on vajalik tagasivool ja nimed on olulised.
.konteiner2 {laius: 80%; veeris: 0 automaatne; kuva: ruudustik; ruudustik-mall-read: auto; ruudustiku-malli-veerud: 33,3% 33,3% automaatne; grid-template-areas: "img1 img2 artikkel3"; }
14. Lisage veerud
Kõigil teise ruudustiku CSS-klassidel kästakse ühenduda vastava veeruga, nagu on määratletud ruudustiku mallis. Artikli teksti värvi muudetakse lihtsalt selle eristamiseks selle jaotise heledamal taustal. Kui täita on ainult jalus, on ajakirjastiilis kujundus peaaegu paigas.
.img1 {ruudustikuala: img1; } .img2 {ruudustikuala: img2; } .artikkel3 {ruudustikuala: artikkel3; värv: # 333; }
15. Parandage lehe jalaosa
Lehe lõpetamisel paigutatakse kogu ekraani täislaiusega div, mis täidetakse musta värviga ja tekst on lihtsalt keskel. See lõpetab disaini töölauaversiooni, kuid viige ekraan alla 1200 piksli laiuse ala ja sait hakkab purunema.
.jalg {taustavärv: # 000; värv: # 999; teksti joondamine: keskel; polster: 50px20px100px; }
16. Reguleerige keskmise ekraani kujunduse jaoks
Siia lisatakse meediumipäring, et vaadata disaini, kui brauseri laius on väiksem kui 1200 pikslit. Sammude 17 ja 18 kood paigutatakse sulgudesse, kus kommentaar asub. Nii saab muuta mõlema ruudustiku paigutusstruktuuri.
@media ekraan ja (maksimaalne laius: 1200 pikslit) {/ * kood siin * /}
17. Pange esimene ruudustik uuesti üles
Esimene ruudustik on määratud täitma brauseri täislaiuses kolme veeru asemel vaid kaks veergu. Jaotiste järjestus asetatakse malli, kus artiklid vahetuvad, sest see sobib selle ekraanisuuruse taustpildiga paremini.
.konteiner1 {laius: 100%; ruudustik-mall-read: auto; ruudustiku-malli-veerud: 50% 50%; grid-template-areas: "päise päis" "standfirst standfirst" "artikkel1." "pullquote pullquote" "artikli2 fookus"; } .artikkel2 {veergude arv: 1; }
18. Testige oma paigutust
Teise ruudustiku suurust muudetakse ka kogu brauseri laiuseks ja lisatakse kaks veergu. Kujutised asetatakse kõrvuti reale teksti kohal, nii et see mahuks kenasti ekraanile. Saate seda paigutust brauseris testida, muutes oma brauseri suurust väiksemaks kui 1200 pikslit.
.konteiner2 {laius: 100%; veeris: 0 automaatne; ruudustik-mall-read: auto; ruudustiku-malli-veerud: 50% 50%; grid-template-areas: "img1 img2" "artikkel3 artikkel3"; }
19. Mobiilide näpunäide
Iga brauser, mille laius on väiksem kui 769 pikslit, saab koodi, mis lisatakse viimastes toimingutes. Siin peame vaid tagama, et igal ruudustikul oleks üks veeru paigutus, et sisu saaks väiksemas ruumis korralikult vaadata.
@media ekraan ja (max-width: 768px) {/ * siin on viimaste sammude kood * /}
20. Kontrollige ühe veeru ruudustikku
Nüüd on esimeseks ruudustikuks seatud üks veerg, mis moodustab 100% brauseri laiusest ja mallialadele lisatakse jaotiste järjekord. Kontrollige, kuidas lehe esimene osa töötab mobiiliekraanidel.
.konteiner1 {laius: 100%; ruudustik-mall-read: auto; ruudustiku-malli-veerud: 100%; grid-template-areas: "header" "standfirst" "article1" "pullquote" "focus" "article2"; }
21. Lõpeta paigutus
Siin tehakse ka teine ruudustik ühe veeru täitmiseks ja määratletakse sektsioonide paigutus. Nüüd salvestage valmis kujundus ja vaadake seda erineva suurusega ekraanidel, et näha CSS Gridi täielikku paigutusvõimalust ja seda, kui lihtne oli lihtsalt sisu järjestamine erineva laiusega.
.konteiner2 {laius: 100%; veeris: 0 automaatne; ruudustik-mall-read: auto; ruudustiku-malli-veerud: 100%; grid-template-areas: "img1" "img2" "artikkel3"; }
See artikkel ilmus algselt loomingulises veebidisaini ajakirjas Web Designer. Ostaväljaanne 271võitelli.
