Šajā rakstā ir paskaidrots, kā CSS izveidot trīs kolonnu izkārtojumu. Norādījumi attiecas uz CSS3 un vecākiem.

Uzzīmējiet izkārtojumu

Izkārtojumu var uzzīmēt uz papīra vai grafikas programma. Ja jums jau ir padomā stiepļu rāmis vai pat plašāks dizains, vienkāršojiet to līdz pamata lodziņiem, kas veido vietni. Šim rakstam pievienotajam dizainam ir trīs kolonnas galvenajā satura apgabalā, kā arī galvene un kājene. Rūpīgi ieskatoties, var redzēt, ka trīs kolonnas nav vienādas ar platumu.

Pēc tam, kad esat izkārtojis izkārtojumu, varat sākt domāt par izmēriem. Šim dizaina paraugam būs šādas pamatdimensijas:

• Ne vairāk kā 900 pikseļu platumā
• 20 px notekas kreisajā pusē
• 10 kolonnas un rindas ir 10 pikseļi
• Kolonnas, kuru platums ir 250 pikseļi, 300 pikseļi un 300 pikseļi
instagram viewer
• Augšējā rinda ir 150 pikseļu gara
• Apakšējā rinda ir 100 pikseļu gara

Uzrakstiet HTML / CSS pamata tekstu un izveidojiet konteinera elementu

Tā kā šī lapa būs derīga HTML dokumentu, sāciet ar tukšu HTML konteineru.

CSS pamata stilos pievienojiet nulles lapas malas, apmales un polsterējumus. Kamēr ir citi standarta CSS stili jauniem dokumentiem šie stili ir minimums, kas nepieciešams, lai iegūtu tīru izkārtojumu. Pievienojiet tos sava dokumenta galvenei.

Lai sāktu veidot izkārtojumu, ielieciet konteinera elementu. Dažreiz gadās, ka jūs varat atbrīvoties no konteinera vēlāk, bet lielākajai daļai fiksēta platuma izkārtojumu konteinera elementa izmantošana atvieglo pārvaldību dažādos Web pārlūkprogrammas.

Stilējiet konteineru

Konteiners nosaka, cik plašs būs tīmekļa lapas saturs, kā arī visas malas ap ārpusi un polsterējumu iekšpusē. Šim dokumentam konteiners ir 870 pikseļu plats ar 20 pikseļu noteku kreisajā pusē. Notekas ir izveidotas ar piemales stilu, bet konteinera polsterējums ir nulle, lai novērstu to, ka visi elementi ir tikpat plati kā konteiners.

Ja tagad saglabājat dokumentu, konteineru būs grūti redzēt, jo tajā nav nekā. Ja pievienosit viettura tekstu, varēsit skaidrāk redzēt konteinera elementu.

Galvenei izmantojiet virsraksta tagu

Tas, kā jūs nolemjat veidot galvenes rindu, ir ļoti atkarīgs no tā, kas tajā atrodas. Ja galvenes rindā būs tikai logotipa grafika un virsraksts, tad, izmantojot virsraksta tagu (

) ir vairāk jēgas nekā izmantot a

. Virsrakstu var noformēt tāpat, kā veidojat div, un izvairāties no svešiem tagiem.

Galvenes rindas HTML atrodas konteinera augšpusē un izskatās šādi:

Tad, lai iestatītu stilus, apakšā tika pievienota sarkana apmale, lai jūs varētu redzēt, kur tā beidzas, malas un polsterējums tika nulle, platums iestatīts uz 100% un augstums līdz 150 pikseļiem.

Neaizmirstiet peldēt šo elementu ar pludiņu: pa kreisi; īpašums. CSS izkārtojumu rakstīšanas atslēga ir peldēt visu, pat lietas, kas ir vienādā platumā ar konteineru. Tādā veidā jūs vienmēr zināt, kur elementi atradīsies lapā.

A CSS pēcnācēju selektors piemēroti stili tikai H1 elementiem, kas atrodas elementā #container.

Lai iegūtu trīs kolonnas, vispirms izveidojiet divas kolonnas

Veidojot trīs kolonnu izkārtojumu ar CSS, izkārtojums jāsadala divās grupās. Šim trīs kolonnu izkārtojumam vidējā un labā kolonna ir grupēta un novietota blakus kreisajai kolonnai divu kolonnu izkārtojumā. kur kreisās kolonnas platums ir 250 pikseļi, un labās kolonnas platums ir 610 pikseļu (300 katrai no divām kolonnām, plus 10 pikseļi notekcaurulei starp tos).

Kolonna kreisajā pusē tiek novietota pa kreisi, bet otra - pa labi. Tā kā abu kolonnu kopējais platums ir 860 pikseļi, starp tām ir 10 pikseļu notekas.

Pievienojiet divas kolonnas plašā otrajā kolonnā

Lai izveidotu trīs kolonnas, pievienojiet divus divus platākajā otrajā kolonnā, tāpat kā pēdējā solī konteinera kolonnā pievienojāt 2 divus.

Tā kā šīs divas 300 pikseļu platās kastes atrodas 610 pikseļu platā kastē, starp tām atkal būs 10 pikseļu notekas.

Pievienot kājenē

Tagad, kad pārējā lapa ir veidota, varat pievienot kājenē. Izmantojiet pēdējo div ar kājenes ID un pievienojiet saturu, lai jūs to varētu redzēt. Augšpusē varat pievienot arī apmali, lai jūs zinātu, kur tā sākas.

Pievienojiet savam personīgajam stilam un saturam

Tagad, kad izkārtojums ir pabeigts, varat sākt pievienot savus personīgos stilus un saturu. Atcerieties, ka galvenes un kājenes apmales tika pievienotas, lai parādītu izkārtojuma sadaļas, nevis tieši dizainam.