CSS izkārtojums prasa domāt par jūsu vietnes izkārtojumu kopumā, pēc tam ņemt gabalus un tos salikt kopā. Uzziniet, kā izveidot vienkāršu 3 kolonnu izkārtojumu ar CSS.
01 no 09
Zīmējiet savu izkārtojumu
Jūs varat izdarīt izkārtojumu uz papīra vai grafikas programmā . Ja jums jau ir plāns rāmis vai vēl plašāks dizains, vienkāršojiet to pamata lodziņos, kas veido vietni. Šim rakstam pievienotajam dizainam ir trīs kolonnas galvenajā satura apgabalā, kā arī virsraksts un kājene. Ja paskatās uzmanīgi, jūs varat redzēt, ka trīs kolonnas nav vienādas ar platumu.
Pēc tam, kad ir izvilkts izkārtojums, varat sākt domāt par izmēriem. Šajā piemērā dizainam ir šādi pamata dimensijas:
- Ne vairāk kā 900 pikseļi platumā
- Kreisajā pusē ir 20 pikseļu notekas
- 10 pikseļi starp kolonnām un rindām
- Kolonnas, kas ir 250 pikseļi, 300 pikseļi un 300 pikseļi platumā
- Augšējā rinda ir 150 pikseļi garš
- Apakšējā rinda ir 100 pikseļu garš
02 no 09
Uzrakstiet pamata HTML / CSS un izveidojiet konteinera elementu
Tā kā šī lapa būs derīgs HTML dokuments, sāciet ar tukšu HTML konteineru
Pievienojiet pamata CSS stilos, lai nulles no lapas malas, robežas un spilventiņi . Lai gan ir pieejami arī citi standarta CSS stili jauniem dokumentiem, šie stili ir minimālais, kas nepieciešams, lai iegūtu tīru izkārtojumu. Pievienojiet tos dokumenta galvai: