CSS izgled zahtijeva da razmišljate o svom izgledu web stranice u cjelini, a potom uzmite komade i stavite ih zajedno. Saznajte kako izraditi jednostavan izgled s 3 stupca s CSS-om.
01 od 09Izvuci svoj izgled
Možete nacrtati svoj izgled na papiru ili u grafičkom programu. Ako već imate na umu žičani okvir ili još opsežniji dizajn, pojednostavite ga u osnovnim okvirima koji čine web mjesto. Ovaj dizajn koji prati ovaj članak ima tri stupca u glavnom području sadržaja, kao i zaglavlje i podnožje. Ako pomno pogledate, možete vidjeti da tri stupca nisu jednaka širini.
Nakon što izvučete svoj izgled, možete početi razmišljati o dimenzijama. Ovaj primjer dizajna ima sljedeće osnovne dimenzije:
- Ne širi više od 900 piksela
- 20 px žlijeb na lijevoj strani
- 10 px između stupaca i redaka
- Stupci koji su široki 250px, 300px i 300px
- Najveći redak je 150 px visok
- Donji redak je 100 px visok
Napišite osnovne HTML / CSS i stvorite spremnik
Budući da će ova stranica biti važeći HTML dokument, započnite s praznim HTML spremnikom
Dodajte osnovne CSS stilove da biste izbrisali margine stranice, granice i paddings. Iako postoje drugi standardni CSS stilovi za nove dokumente, ti su stilovi minimalni koji trebate dobiti čist izgled. Dodajte ih na glavu dokumenta:
Da biste započeli s izgradnjom izgleda, stavite element spremnika. Ponekad se dogodi da se kasnije možete riješiti kontejnera, no za većinu izgleda s fiksnom širinom, element spremnika olakšava upravljanje različitim web-preglednicima. Tako je u tijelu ovo stavio: I na CSS stilu, stavite: Spremnik određuje koliko će biti širok sadržaj web stranice, kao i margine oko vanjske strane i padding iznutra. Za ovaj dokument spremnik je širok 870 piksela s lijevom žlijebom od 20 piksela. Žlijeb je postavljen stilom margina, ali je ispuna na spremniku nula s vanjske strane kako bi se spriječilo da bilo koji element bude širok poput spremnika. #container { širina: 870px; margina: 0 0 0 20px; / * gornji desni dno lijevo * / padding: 0; } Ako spremite dokument, bit će teško vidjeti spremnik jer nema ništa u njemu. Ako dodate tekst rezerviranog mjesta, jasnije ćete vidjeti element spremnika. Kako odlučite oblikovati redak zaglavlja ovisi puno o tome što je u njemu. Ako će redak zaglavlja imati logotip logotipa i naslov, a zatim pomoću oznake naslova ( HTML za zaglavlje zaglavlje ide na vrh spremnika i izgleda ovako: Zatim, da biste postavili stilove na njemu, na dnu je dodana crvena granica da biste vidjeli gdje završava, margine i padding su nulte ispisane, širina postavljena na 100% i visina do 150px: #container h1 { margina: 0; padding: 0; širina: 100%; visina: 150px; plutaju: lijevo; granični dno: # c00 solid 3px; } Ne zaboravite plutajte ovaj element s plovkom: lijevo; nekretnine. Ključ za pisanje CSS izgleda je da pluta sve - čak i stvari koje su iste širine kao kontejner. Na taj način, uvijek znate gdje će elementi ležati na stranici. Odabir selektora CSS primijenio se samo na elemente H1 koji su unutar #container elementa. Kada izradite izgled u tri stupca s CSS-om, morate podijeliti svoj izgled u dvije skupine. Dakle, za ovaj izgled u tri stupca, srednji i desni stupac i grupirani pored lijevog stupca u rasporedu s dva stupca gdje je lijevi stupac širok 250 px, a desni stupac širok 610 piksela (300 za dva stupca , plus 10 piksela za kanal između njih). HTML izgleda ovako: Potrošnja je isključena. Smanjite veličinu dojke, dodajte minimalnu veličinu, a zatim kliknite na gumb. U reprehenderit u voluptate quis nostrud vježba eu fugiat nulla pariatur. Veliko iskustvo je dovelo do ullamskog rada koji je bio vrlo koristan. Ut enim ad minim veniam, sed do neusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Veleposlanik je odgovorio na to da nema dovoljno sredstava. Tekst mjesta rezerviranja u stupcima čini ih vidljivijima tijekom testiranja. CSS izgleda ovako: #container # col1 { širina: 250px; plutaju: lijevo; } #container # col2outer { širina: 610px; plutajuće: pravo; margina: 0; padding: 0; } Kolona s lijeve strane plutaju se lijevo, dok je drugo plutao udesno. Budući da je ukupna širina oba stupca 860px, postoji između 10px žlijeba. Da biste izradili tri stupca, dodajte dva diva u širi drugi stupac, baš kao što ste dodali 2 diva unutar stupca spremnika u posljednjem koraku. HTML izgleda ovako: Ut enim ad minim veniam, sed do neusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Veleposlanik je odgovorio na to da nema dovoljno sredstava. Nam slobodno tempore, to je voluptas sit aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur sapiente delectus, sed perspiciatis unde omnis tempora incidunt ut labore et dolore. A CSS izgleda ovako: # col2outer # col2mid { širina: 300px; plutaju: lijevo; } # col2outer # col2side { širina: 300px; plutajuće: pravo; } Budući da se ta dva 300px široka okvira nalaze unutar širokog okvira od 610px, između njih će opet biti 10px kanal. Sada kada je ostatak stranice oblikovan, možete dodati podnožje. Koristite posljednji div s id "podnožje" i dodajte sadržaj kako biste ga mogli vidjeti. Na vrhu možete dodati i granicu, tako da ćete znati gdje počinje. HTML: CSS: #container #footer {
plutaju: lijevo;
širina: 870px;
granični vrh: # c00 solid 3px;
} 08 od 09 Sada kada ste dovršili izgled, možete početi dodavati svoje osobne stilove i sadržaj. Imajte na umu da su granice na zaglavlju i podnožju dodane za prikaz dijelova rasporeda, a ne posebno za dizajn. Evo cjelokupnog dokumenta, HTML-a i CSS-a: Uređaj kontejnera
Upotrijebite oznaku naslova za zaglavlje
) ima više smisla nego koristeći
Moj redak zaglavlja
Da biste dobili tri stupca, počnite graditi dva stupca
Dodajte dva stupca unutar širokog drugog stupca
Dodaj u Footer
Dodajte u svoje osobne stilove i sadržaj
Konačni HTML / CSS
