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 09Zī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š
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:
Lai sāktu veidot izkārtojumu, ielieciet konteinera elementu. Dažreiz gadās, ka jūs varat atbrīvoties no konteinera vēlāk, taču lielākajai daļai fiksēta platuma izkārtojumu konteinera elements ir vieglāk pārvaldāms dažādās tīmekļa pārlūkprogrammās. Tātad ķermenī ir šādi: Un CSS stila lapā ievietojiet: Tvertne nosaka, cik plašs ir tīmekļa lapas saturs, kā arī visas ārējās malas un polsterējums iekšpusē. Šim dokumentam konteiners ir 870 pikseļu platums, bet kreisajā pusē - 20 pikseļu teknes. Ūdens notekas ir izveidota ar margin stila, bet konteinera polsterējums ir nulēts, lai novērstu jebkādu elementu plūsmu kā konteiners. #container { platums: 870 pikseļi; starpība: 0 0 0 20 pikseļi; / * augšējais labais apakšējais kreisais * / polsterējums: 0; } Ja jūs tagad saglabājat dokumentu, tas būs grūti redzēt konteineru, jo tajā nav nekas. Ja pievienosit vietturu tekstu, jūs varat redzēt konteinera elementu skaidrāk. Kā jūs nolemjat veidot galvenes rindu, daudz kas atkarīgs no tā, kas tajā atrodas. Ja galvenes rindā tikai būs logotipa grafiks un virsraksts, tad, izmantojot virsraksta tagu ( Galvenes rindas HTML ietvert konteinera augšpusē un izskatās šādi: Tad, lai iestatītu stilu uz tā, sarkanā robeža tika pievienota apakšā, lai jūs varētu redzēt, kur tas beidzas, margas un polsterējums tika nulles, platums iestatīts uz 100% un augstums līdz 150 pikseļi: #container h1 { starpība: 0; polsterējums: 0; platums: 100%; augstums: 150 pikseļi; pludiņš: pa kreisi; border-bottom: # c00 solid 3px; } Neaizmirstiet peldēt šo elementu ar pludiņu: pa kreisi; īpašums. CSS izkārtojumu rakstīšanas atslēga ir visu peldēt - pat tādas lietas, kas ir tādā pašā platumā kā konteiners. Tādā veidā jūs vienmēr zināt, kur elementi atrodas lapā. CSS pēcnācējs selektors pielietoja stilus tikai tiem H1 elementiem, kas atrodas #container elementā. Ja veidojat trīs kolonnu izkārtojumu ar CSS, jums ir jāsadala izkārtojums divās grupās. Tātad šim trīs kolonnu izkārtojumam - vidējai un labajai kolonnai un grupēti un novietoti blakus kreisās kolonnas divu sleju izkārtojumam, kur kreisā kolonna ir 250 pikseļu platuma, bet labā sleja ir 610 pikseļu platums (katrai no abām kolonnām - 300 , plus 10 pikseļi notekām starp tām). HTML izskatās šādi: Ut aliquip ex ea commodo consequat. Velit esse cillum dolor ut enim ad minim veniam, lorem ipsum dolor sit amet. Reprehenderit in volupate quis nostrud exercice eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. Ņemot vērā minimālo līmeni, tas ir atkarīgs no darba laika. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Kolonnu vietā ievietoto teksta vietā tie kļūst redzamāki, veicot testēšanu. CSS izskatās šādi: #container # col1 { platums: 250 pikseļi; pludiņš: pa kreisi; } #container # col2outer { platums: 610 pikseļi; pludiņš: pa labi; starpība: 0; polsterējums: 0; } Kreisajā pusē esošā kolonna tiek peldēta pa kreisi, bet otra peldēta pa labi. Tā kā abu sleju kopējais platums ir 860 pikseļi, starp tiem ir 10 pikseļu teknes. Lai izveidotu trīs kolonnas, pievienojiet divus divus iekšpusē plašākajā otrajā slejā, tāpat kā pēdējā solī pievienojāt 2 divus konteinera kolonnā. HTML izskatās šādi: Ņemot vērā minimālo līmeni, tas ir atkarīgs no darba laika. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum HIC tenetur sapiente latīņu valodas mācību hrestomātija, sed ut perspiciatis unde omnis Tempora incidunt ut labore et dolore. Un CSS izskatās šādi: # col2outer # col2mid { platums: 300 pikseļi; pludiņš: pa kreisi; } # col2outer # col2side { platums: 300 pikseļi; pludiņš: pa labi; } Tā kā šīs divas 300 pikseļu platās kastes ir iekļautas 610 pikseļu platā lodziņā, starp tām atkal ir 10 pikseļu tekne. Tagad, kad pārējā lapa ir veidota, varat pievienot kājenē. Izmantojiet pēdējo div ar "footer" id un pievienojiet saturu, lai to varētu redzēt. Augšā varat pievienot robežu, lai jūs zināt, no kurienes tas sākas. HTML: CSS: #container #footer {
pludiņš: pa kreisi;
platums: 870 pikseļi;
border-top: # c00 solid 3px;
} 08 no 09 Tagad, kad esat pabeidzis izkārtojumu, varat sākt pievienot personīgos stilus un saturu. Atcerieties, ka virsraksti un kājenes ir pievienotas, lai parādītu izkārtojuma sadaļas, nevis dizainu. Šeit ir viss dokuments, HTML un CSS: Stilsiet konteineru
Izmantojiet virsraksta tagu virsrakstam
) ir vairāk jēgas nekā izmantot
Mana galvenes rinda
Lai iegūtu trīs kolonnas, sāciet veidot divas kolonnas
Pievienojiet divas kolonnas plāna otrajā slejā
Pievienojiet kājenei
Pievienot personīgajiem stiliem un saturu
Galīgais HTML / CSS
