Kā izveidot sarežģītus izkārtojumus, izmantojot CSS

Veidojiet sarežģītus CSS izkārtojumus

Tīmekļa izkārtojums vienmēr ir bijis ierobežots, patiesībā nekad nav bijis kaut kas patiešām veltīts tam, lai saturu būtu viegli parādīt tādā formātā, kas ir jēgpilns.

Pagājušā gadsimta 90. gados, kad tīmeklis pirmo reizi nostiprinājās, dizaineri, kuri bija pieraduši izvietot saturu tīklā, vienīgo veidu, kā pārlūkprogrammā iegūt tādu pašu rezultātu, bija izmantot tabulu. Šūnu apvienošana izraisīja kompleksu vietņu izkārtojumi , taču tas izraisīja postījumus ar pieejamību un SEO. Ātri uz priekšu, un šodien ir visdažādākie veidi, kā ievietot saturu ar pludiņiem, elastīgām kastēm un tā tālāk.



CSS3 patiešām ir virzījis tīmekļa iespējas uz priekšu, un kopš 2014. gada tas ir bijis CSS režģa izkārtojums . Šobrīd tam ir 75% pārlūkprogrammas atbalsts, tāpēc ir pienācis brīdis, kad ir pienācis laiks tam nopietni pievērsties. Zurb's Foundation 6 ietvars ir nokļuvis uz kuģa un to izmanto, lai darbinātu savu tīklu.



Šajā apmācībā galvenā uzmanība tiks pievērsta žurnāla stila funkcijas izveidošanai, kas parādīs, kā pilnveidoties atsaucīgs tīmekļa dizains vidēja un maza izmēra ekrāniem.

Lejupielādējiet apmācības failus šeit



01. Sāciet

Atveriet failu “grid1.html” no sākuma mapes mapē projekta faili . Šim HTML izkārtojumam ir pieci div tagi, vienkārši CS1 klases nosaukumi item1–5. Tas būs režģī ievietotais saturs. Konteiners, kas to iesaiņo, noteiks režģi, kurā būs četras kolonnas.

item 1 item 2 item 3 item 4 item 5

02. Pārbaudiet CSS režģi

Ieskatoties galvas sadaļā, jūs varat redzēt, ka 'konteiners' ir teicis izvietots kā režģis ar rindu automātisko augstumu, savukārt kolonnām jābūt iestatītām uz četrām, katrai iestatot 25 procentus no pārlūkprogrammas . Pārbaudiet to pārlūkprogrammā un redzēsiet, ka katram vienumam tiek automātiski piešķirta nākamā pieejamā režģa pozīcija.

.container { display: grid; grid-template-rows: auto; grid-template-columns: repeat(4, 25%); }

03. Definējiet režģa pozīcijas

Tagad ieskatieties failā 'grid2.html'. Tas ir tāds pats kā pirmajam failam, izņemot “item1” un “item2” ir noteiktas pozīcijas. Pirmais atrodas 1. rindā un beidzas pirms 2. rindas. Kolonna sākas ar 1 un beidzas ar 3, tāpēc tā aptver divas kolonnas. Otrais sākas ar 3. sleju un aizņem nākamās divas kolonnas. Atlikušie vienumi aizpilda nākamās pieejamās režģa vietas.



.item1 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; } .item2 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 5; }

04. Izmantojiet režģa veidni

Atveriet 'grid3.html' un apskatiet HTML pamattekstu. Jūs redzēsiet, ka ir izkārtojums ar galveni, sānjoslu, galvenā satura sadaļu un kājeni. Varat pievienot saturam vairāk teksta, lai redzētu, kas notiek, kad tas tiek ievietots. Režģis izmantos veidnes funkciju, lai šīs sadaļas padarītu par izkārtojumu.

Header Sidebar Content Footer

05. Definējiet veidni

Skatiet konteinera CSS. Tas atkal tiek definēts kā režģis. Augšējā rinda būs 200 pikseļu augsta, vidējā - automātiska un pēdējā - 100 pikseļu. Kolonnas ir iestatītas par 33 procentiem platas, un pārējās tiek automātiski aizpildītas. Veidne norāda, ka galvene aizpildīs abas kolonnas. Nākamā rinda būs sānjosla pirmajā kolonnā un saturs nākamajā. Kājene iet pāri abiem.

.container { display: grid; grid-template-rows: 200px auto 100px; grid-template-columns: 33% auto; grid-template-areas: 'header header' 'sidebar content' 'footer footer'; }

Veidojiet sarežģītus CSS izkārtojumus

Izmantojot režģa-veidnes apgabalus, tiek izveidots vienkāršs tīmekļa lapas izkārtojums, lai noteiktu, ka galvene un kājene aptver divas kolonnas, savukārt sānjosla un tīmekļa lapas saturs katrā aizņem vienu kolonnu

Lai klasi sasaistītu ar veidni, šeit parādītais kods to definē. Katrs režģa apgabals tiek nosaukts un izveidota saite. Saturs šeit netiek rādīts, bet tas ir dokumentā “grid3.html”. Apskatiet to pārlūkprogrammā, lai redzētu režģa izkārtojumu. Tā kā ir noteiktas divas kolonnas, veidnei katrā apgrieztajā komatā ir nepieciešami divi laukumi.

.header { grid-area: header; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; }

07. Padariet to atsaucīgu

Lai padarītu 'grid3.html' atsaucīgu, tiek ievietots multivides vaicājums un augšējā rinda tiek turēta 200 procentu apmērā, bet pārējās rindas tiks automātiski izmērītas. Kolonnā ir tikai viena pilnā platība, tāpēc veidnei ir viens vārds katrā apgrieztajā komatā, lai definētu izkārtojumu. Tos var viegli pārkārtot, nepārvietojot nevienu HTML.

kāpēc ir tik grūti iegūt grafiskā dizaina darbu
@media screen and (max-width: 699px) { .container { display: grid; grid-template-rows: 200px auto; grid-template-columns: 100%; grid-template-areas: 'header' 'sidebar' 'content' 'footer'; } }

Veidojiet sarežģītus CSS izkārtojumus

Vienkārši no jauna definējot režģa izkārtojumu multivides vaicājumā, visi elementi var mainīties, veicot tikai dažas korekcijas

08. Darbs pie reāla izkārtojuma

Tagad atveriet 'index.html' - viss satura HTML kods jau ir izveidots, tāpat kā daži CSS dizaina elementiem. Pievienojiet šo režģi stila tagiem galvas sadaļā. To darot, tiek izveidots trīs kolonnu režģis ar veidni katrai sadaļai. Ievērojiet tukšo režģa sadaļu punktu.

.container1 { width: 80%; margin: 0 auto; display: grid; grid-template-rows: auto; grid-template-columns: 33.3% 33.3% auto; grid-template-areas: 'header header header' '. standfirst standfirst''. . article1' 'focus pullquote pullquote' 'article2 article2 .'; }

Tāpat kā iepriekšējā solī, arī šī saista galveni ar veidni. Tiek teikts, ka galvenei jāaptver visas trīs režģa kolonnas, pēc tam stāvēšanas sākumā tiek iestatītas divas kolonnas un kreisajā pusē ir tukša kolonna. Ja pārbaudīsit pārlūkprogrammu, šī kolonna ir aizpildīta, jo atlikušais saturs automātiski aizpilda nākamo pieejamo vietu - tomēr tas netiks izdarīts, kad tas viss ir iestatīts.

.header { grid-area: header; } .standfirst { grid-area: standfirst; }

10. Pievienojiet nākamos apgabalus

Tagad pirmais raksts, izvilkuma citāts un fokusa attēls ir ievietoti dizainā. Vilkšanas citāts un attēls atrodas blakus vienā rindā. Šajā posmā raksts2 nav ievietots, tāpēc tas aizņem pirmo pieejamo vietu uz režģa, kas atrodas blakus stāvvietai.

.article1 { grid-area: article1; } .pullquote { grid-area: pullquote; } .focus { grid-area: focus; text-align: center; }

Veidojiet sarežģītus CSS izkārtojumus

Kad pirmais režģis ir pabeigts, dizains ir piemērots tieši darbvirsmas displejam, pat labi iekļaujas fona attēla elementos

11. Pabeidziet pirmo režģi

Otrā raksta CSS pievienošana ļauj pareizi novietot visu pirmo režģi. Aplūkojot to pārlūkprogrammā, tiks parādīts, ka izkārtojums darbojas ar fona attēlu un rada žurnālos redzamo izkārtojumu, kurā dizainers strādā ap lielu fona attēlu.

.article2 { grid-area: article2; column-gap: 65px; column-count: 2; }

12. Pievienojiet baltu fonu

Pirms otrā režģa palaišanas var rasties jautājums, kāpēc ir vajadzīgi divi režģi. Iemesls ir tāds, ka šim režģim būs balts pilna platuma fons, tāpēc šī CSS aptinās otro režģi. Tas piešķir šai sadaļai dizaina otrās lappuses sajūtu.

.whitebg { padding: 100px 0; background-color: #ddd; }

13. Izveidojiet otru režģi

Otrais režģis ir vienkāršāks nekā pirmais. Ir trīs kolonnas ar automātisku augstumu rindās. Katrs saturs aizpildīs kolonnu, tāpēc nav jādefinē veidņu apgabali. Tomēr, kad tiek pievienots planšetdatora dizains, tam ir jāpārslēdzas uz divām kolonnām, tāpēc ir nepieciešama pārplūšana un nosaukumi būs svarīgi.

.container2 { width: 80%; margin: 0 auto; display: grid; grid-template-rows: auto; grid-template-columns: 33.3% 33.3% auto; grid-template-areas: 'img1 img2 article3'; }

Veidojiet sarežģītus CSS izkārtojumus

Abus režģus novietojot uz ekrāna, dizainu var ritināt, jo viss ir pareizā secībā

14. Pievienojiet kolonnas

Katrai no CSS klasēm otrajā režģī tiek ieteikts izveidot saiti ar attiecīgo kolonnu, kā noteikts režģa veidnē. Raksta teksta krāsa tiek mainīta tikai tāpēc, lai tas izceltos uz šīs sadaļas gaišāka fona. Aizpildot tikai kājeni, žurnāla stila izkārtojuma dizains ir gandrīz izveidots.

.img1 { grid-area: img1; } .img2 { grid-area: img2; } .article3 { grid-area: article3; color: #333; }

15. Pilnveidojiet lapas pamatni

Pabeidzot lapu, ekrānā tiks ievietota pilna platuma div, kas būs piepildīta ar melnu krāsu, un teksts būs tikai centrā. Tas pabeidz dizaina darbvirsmas versiju, taču pārvietojiet ekrānu uz leju zem 1200 pikseļu platuma, un vietne sāk izlauzties.

.footer { background-color: #000; color: #999; text-align: center; padding: 50px 20px 100px; }

16. Pielāgojiet vidēja ekrāna noformējumam

Šeit tiek ievietots multivides vaicājums, lai rūpētos par dizainu, ja pārlūkprogrammas platums ir mazāks par 1200 pikseļiem. 17. un 18. soļa kods tiks ievietots iekavās, kur atrodas komentārs. Tas būs gadījums, kad mainīs abu režģu izkārtojuma struktūru.

@media screen and (max-width: 1200px) { /* code here */ }

17. Atkārtoti uzpildiet pirmo režģi

Pirmais režģis ir iestatīts tā, lai tagad pārlūka pilnā platumā aizpildītu tikai divas kolonnas, nevis trīs. Sadaļu secība tiek ievietota veidnē, rakstiem pārslēdzoties uz pusēm, jo ​​tas labāk iederas fona attēlā šajā ekrāna izmērā.

.container1 { width: 100%; grid-template-rows: auto; grid-template-columns: 50% 50%; grid-template-areas: 'header header' 'standfirst standfirst' 'article1 .' 'pullquote pullquote' 'article2 focus'; } .article2 { column-count: 1; }

Veidojiet sarežģītus CSS izkārtojumus

Planšetdatora izmēra dizains ir ievietots, tikai atstarojot abus lapas režģus. Šo režģu pielāgošana ir viens no vienkāršākajiem veidiem, kā pārveidot mazākus ekrānus

18. Pārbaudiet savu izkārtojumu

Arī otrā režģa izmērs tiek mainīts, lai ņemtu visu pārlūkprogrammas platumu un pievienotu divas kolonnas. Attēli tiek novietoti blakus rindai virs teksta tā, lai tas kārtīgi iederētos displejā. Varat pārbaudīt šo izkārtojumu pārlūkprogrammā, mainot pārlūkprogrammas izmēru zem 1200 pikseļu platuma.

.container2 { width: 100%; margin: 0 auto; grid-template-rows: auto; grid-template-columns: 50% 50%; grid-template-areas: 'img1 img2' 'article3 article3'; }

19. Kniebiena dizains mobilajām ierīcēm

Jebkurš pārlūks, kura platums ir mazāks par 769 pikseļiem, saņems kodu, kas tiek pievienots pēdējās darbībās. Šeit viss, kas mums jādara, ir nodrošināt, lai katram režģim būtu viens kolonnu izkārtojums, lai saturu varētu pareizi apskatīt mazākajā telpā.

@media screen and (max-width: 768px) { /* final steps code here */ }

20. Pārbaudiet vienas kolonnas režģi

Tagad pirmais režģis ir iestatīts uz vienu kolonnu, kas ir 100 procenti no pārlūka platuma, un veidņu apgabalos tiek pievienota sekciju secība. Pārbaudiet, vai lapas pirmā daļa darbojas mobilajos ekrānos.

.container1 { width: 100%; grid-template-rows: auto; grid-template-columns: 100%; grid-template-areas: 'header' 'standfirst' 'article1' 'pullquote' 'focus' 'article2'; }

Veidojiet sarežģītus CSS izkārtojumus

Mobilo ierīču ekrāniem praktiski viss, kas jāmaina, ir tikai tas, lai režģiem būtu viena kolonna

21. Pabeidziet izkārtojumu

Šeit tiek izveidots arī otrais režģis, lai aizpildītu vienu kolonnu, un tiek noteikts sadaļu izkārtojums. Tagad saglabājiet gatavo dizainu un skatiet to dažāda lieluma ekrānos, lai redzētu pilnu CSS režģa izkārtojuma iespējas un to, cik viegli bija vienkārši pārkārtot saturu dažādiem platumiem.

.container2 { width: 100%; margin: 0 auto; grid-template-rows: auto; grid-template-columns: 100%; grid-template-areas: 'img1' 'img2' 'article3'; }

Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnālā Web Designer. Pērciet 271. izdevums vai abonēt .

Saistītie raksti: