Postavitev CSS zahteva, da razmišljate o postavitvi vaše spletne strani kot celoti in nato vzamete kose in jih združite. Več o tem, kako zgraditi preprosto postavitev v 3 stolpcih s CSS.
01 od 09Nariši svoje postavitve
Svojo postavitev lahko narišete na papirju ali grafičnem programu. Če imate že v mislih žični okvir ali še bolj obsežen dizajn, ga poenostavite na osnovna polja, ki sestavljajo spletno mesto. Ta zasnova, ki spremlja ta članek, vsebuje tri stolpce na glavnem področju vsebine, pa tudi glavo in nogo. Če pogledate natančno, lahko vidite, da trije stolpci niso enaki širini.
Ko iztisnete svojo postavitev, lahko začnete razmišljati o dimenzijah. Ta zasnova modela bo imela naslednje osnovne dimenzije:
- Največ 900 slikovnih pik
- 20-žilni žleb na levi
- 10 pik med stolpci in vrsticami
- Stolpci, ki so široki 250px, 300px in 300px
- Zgornja vrstica je visoka 150 pik
- Spodnja vrstica je visok 100 slikovnih pik
Napišite osnovni HTML / CSS in ustvarite element vsebnika
Ker bo ta stran veljaven HTML dokument, začnite s praznim vsebnikom HTML
V osnovnih slogih CSS dodajte nič robov, meja in paddings. Čeprav obstajajo drugi standardni slogi CSS za nove dokumente, so ti slogi minimalni, kar potrebujete za čisto postavitev. Dodajte jih na glavo dokumenta:
Če želite zgraditi postavitev, vstavite element vsebnika. Včasih se zgodi, da se kasneje lahko znebite vsebnika, vendar je za večino postavitev s fiksno širino, saj ima element vsebnika lažje upravljanje med različnimi spletnimi brskalniki. Torej v telesu to postavite: V slogovnem listu CSS postavite: Vsebnik določa, kako širok bo vsebina spletne strani, kot tudi vse robove zunaj in notranjost. Za ta dokument je vsebnik širok 870px z 20-žilnim žlebom na levi strani. Žleb je nastavljen s slogom robov, vendar je vsebina na vsebniku nastavljena na ničlo, da se prepreči, da bi bili vsi elementi tako široki kot vsebnik. #container { širina: 870px; marža: 0 0 0 20px; / * zgoraj desno spodaj levo * / oblazinjenje: 0; } Če ste zdaj shranili dokument, bo težko videti posodo, ker nima ničesar. Če dodate besedilo o zadrževalniku, boste lahko videli jasnejši element vsebnika. Kako se odločite za oblikovanje glave vrstice je veliko odvisno od tega, kaj je v njej. Če ima glava v glavi grafično podobo in naslov, potem uporabite naslovno oznako ( HTML za naslovno vrstico se nahaja na vrhu vsebnika in izgleda takole: Potem, če želite nastaviti sloge na njej, je bila na dnu dodana rdeča obroba, tako da ste lahko videli, kje se konča, robovi in podloge so nastavljeni na ničlo, širina je nastavljena na 100% in višina na 150 slikovnih pik: #container h1 { marža: 0; oblazinjenje: 0; širina: 100%; višina: 150px; float: levo; border-bottom: # c00 solid 3px; } Ne pozabite plavati tega elementa s plovcem: levo; nepremičnine. Ključ za pisanje CSS postavitev je, da plavate vse - tudi stvari, ki so enake širine kot vsebnik. Na ta način vedno poznate, kje bodo elementi na strani. Selektor s potekom izbire CSS uporablja sloge samo za elemente H1, ki so znotraj elementa #container. Ko zgradite razporeditev s tremi stolpci s CSS, morate razdelitev razdeliti v skupine dveh. Torej, za to razporeditev v treh stolpcih, srednji in desni stolpec in združeni in postavljeni ob levem stolpcu v razporeditvi z dvema stolpcema, kjer je levi stolpec širok 250px, desni stolpec pa 610px širok (300 vsaka za dva stolpca , plus 10px za žleb med njimi). HTML je takšen: Ut aliquip ex ea commodo posledat. Veliko bistvo je v tem, da je na voljo v najkrajšem možnem času. Prizadevati si je, da bi se izkazalo, da je neuporabna eu fugiat nulla pariatur. Velit ese cillum dolore ullamco laboris ni všeč ali pa se zgodi, da je to storjeno. Vnesite časovno omejitev, vnesite eiusmod začasno incididunt ullamco laboris nisi. Užitek in dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Besedilo v stolpcih omogoča, da so med testiranjem vidnejši. CSS izgleda takole: #container # col1 { širina: 250px; float: levo; } #container # col2outer { širina: 610px; float: desno; marža: 0; oblazinjenje: 0; } Stolpec na levi se lebdi na levi, drugi pa lebdi v desno. Ker je skupna širina obeh stolpcev 860px, med njimi je 10px žleb. Če želite ustvariti tri stolpce, dodajte dva divja znotraj širšega drugega stolpca, tako kot ste v zadnjem koraku dodali 2 divs v stolpcu vsebnika. HTML je takšen: Vnesite časovno omejitev, vnesite eiusmod začasno incididunt ullamco laboris nisi. Užitek in dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Namesto tega smo se odločili za to, da ne bomo več razkrili.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Toaque earum rerum hic tenetur sapiente delectus, ne da bi se pri tem pojavil v vseh časih, ko je prišlo do težav. CSS izgleda takole: # col2outer # col2mid { širina: 300px; float: levo; } # col2outer # col2side { širina: 300px; float: desno; } Ker sta ti dve škatli širine 300px znotraj razpona širine 610 pik, bo med njimi spet 10-žilni žleb. Zdaj, ko je preostala stran styled, jo lahko dodate v nogo. Uporabite zadnji div z ID-ji »noge« in dodajte vsebino, da jo lahko vidite. Na vrhu lahko dodate tudi rob, tako da boste vedeli, kje se začne. HTML: CSS: #container #footer {
float: levo;
širina: 870px;
border-top: # c00 solid 3px;
} 08 od 09 Zdaj, ko imate postavitev dokončana, lahko začnete dodati svoje osebne sloge in vsebino. Ne pozabite, da so bile meje na glavi in nogi dodane, da bi prikazali postavitve postavk, ne pa posebej za oblikovanje. Tukaj je celoten dokument, HTML in CSS: Stil zabojnika
Uporabite oznako naslova za glavo
) je bolj smiselno kot uporaba
Moja glava glave
Če želite pridobiti tri stolpce, začnite z gradnjo dveh stolpcev
Dodajte dva stolpca znotraj širšega drugega stolpca
Dodaj v nogo
Dodaj v osebne sloge in vsebino
Končni HTML / CSS
