CSS: n ulkoasu edellyttää, että ajattelet sivustosi ulkoasua kokonaisuutena ja otat sitten palaset ja koota ne yhteen. Opi tekemään yksinkertainen 3-sarakkeen asettelu CSS: llä.
01/09Piirrä asettelusi
Voit piirtää asetteluasi paperille tai grafiikkaohjelmalle. Jos sinulla on jo lanka-runko tai vieläkin laajempi suunnittelu, yksinkertaista se peruskäyttöön, jotka muodostavat sivuston. Tässä artikkelissa mukana olevalla mallilla on kolme saraketta pääosan sisältöalueella sekä otsikko ja alatunniste. Jos tarkastelet tarkkaan, näet, että kolme saraketta ei ole yhtä leveä.
Kun olet asettanut ulkoasun, voit alkaa ajatella mittoja. Tässä esimerkkisuunnittelussa on seuraavat perusmitat:
- Enintään 900 pikseliä leveä
- 20 px kaidetta vasemmalla
- 10 px sarakkeiden ja rivien välillä
- Sarakkeet, jotka ovat 250px, 300px ja 300px leveä
- Ylin rivi on 150px pitkä
- Alarivi on 100px pitkä
Kirjoita perus HTML / CSS ja luo säiliöelementti
Koska tämä sivu on kelvollinen HTML-asiakirja, aloita tyhjällä HTML-konttorilla
Lisää peruskohtaisiin CSS-tyyppeihin nollataksesi sivumarginaalit, reunat ja tasaukset. Uusissa asiakirjoissa on myös muita CSS-tyylitekniikoita, mutta nämä tyylejä ovat vähimmäistarvot, jotka tarvitset puhtaaseen ulkoasuun. Lisää ne asiakirjan päähän:
Aloita asettelun rakentaminen asettamalla säiliöelementti. Silloin tapahtuu joskus, että voit päästä eroon säiliöstä myöhemmin, mutta useimmissa kiinteän leveyden asetteluissa säilön elementti helpottaa hallintaa eri verkkoselaimissa. Joten kehossa laittaa tämä: Ja CSS -tyylisivulla, laita: Säiliö määrittelee, kuinka laajaa verkkosivun sisältöä on, sekä mahdollisia marginaaleja ulkona ja pehmusteita sisältä. Tätä asiakirjaa varten säiliö on 870px leveä ja 20 pikselin kouru vasemmalla. Kouru on asetettu marginaalilla, mutta pehmuste säiliössä nollautuu, jotta kaikki elementit eivät ole yhtä leveitä kuin säiliö. #container { leveys: 870px; marginaali: 0 0 0 20px; / * ylhäällä oikealla alhaalla vasemmalla * / pehmuste: 0; } Jos tallennat asiakirjan nyt, kontin näkyminen on vaikeaa, koska siinä ei ole mitään. Jos lisäät paikkamerkkitekstiä, näet kontin elementti paremmin. Miten päätät muotoilla otsikkorivi riippuu paljon siitä, mitä siinä on. Jos otsikkorivillä on vain logo-grafiikka ja otsikko, käytä otsikkotunnistetta ( Otsikkorivin HTML menee kontin yläosaan ja näyttää tältä: Sitten sen tyylien asettamiseksi alhaalla lisättiin punaista reunaa, jotta voit nähdä, missä se päättyy, marginaalit ja pehmusteet nollataan, leveys on 100% ja korkeus 150px: #container h1 { marginaali: 0; pehmuste: 0; leveys: 100%; korkeus: 150px; float: vasen; raja-pohja: # c00 solid 3px; } Älä unohda kelltaa tätä elementtiä kellukkeella: vasemmalle; omaisuutta. CSS-ulkoasun kirjoittamisen avain on float kaiken - jopa asioita, jotka ovat samaa leveyttä kuin säiliö. Näin aina tiedät, mistä elementit ovat sivulla. CSS-jälkeläisvalitsin soveltaa tyylit vain H1-elementteihin, jotka ovat #container -elementin sisällä. Kun luot kolmiosainen sarake CSS: llä, sinun on jaettava asettasi kahteen ryhmään. Joten tämä kolmin sarakkeen ulkoasu, keskellä ja oikealla sarakkeella ja ryhmitellään ja sijoitetaan vasemman sarakkeen viereen kahden sarakkeen ulkoasuun, jossa vasen sarake on 250px leveä ja oikea pylväs on 610px leveä (300 kpl molemmille sarakkeille , plus 10px niiden välistä kourua). HTML näyttää tältä: Tällöin on hyödyllistä päästä eroon. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. Sellaisena kuin se on ilmaistuna, tässä ei ole mitään vaikutusta eu fugiat nulla paraatur. Tällöin kumpu on ullamko laboris nisi ut aliquip ex ea commodo consequat. Käytä vähimmäisvalmisteita, jotka eivät sido nykyistä työtä ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolor eu fugiat nulla pariatur. Paikkamerkkiteksti sarakkeissa tekee niistä näkyvämpää testatessa. CSS näyttää tältä: #container # col1 { leveys: 250px; float: vasen; } #container # col2outer { leveys: 610px; float: oikea; marginaali: 0; pehmuste: 0; } Vasemmanpuoleinen sarake kelluu vasemmalle ja toinen kelluu oikealle. Koska molempien sarakkeiden kokonaisleveys on 860px, niiden välillä on 10px-kouru. Luo kolme saraketta lisäämällä kaksi div-arvoa laajemman toisen sarakkeen sisään, aivan kuten olet lisännyt 2 div: ta sarjaportin sisällä viimeisessä vaiheessa. HTML näyttää tältä: Käytä vähimmäisvalmisteita, jotka eivät sido nykyistä työtä ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolor eu fugiat nulla pariatur. Nimettömät temporeet, jotka viittaavat aspernatur dicta sunt explicabo.Ullam corporis suscipit laboratorium, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. Ja CSS näyttää tältä: # col2outer # col2mid { leveys: 300px; float: vasen; } # col2outer # col2side { leveys: 300px; float: oikea; } Koska nämä kaksi 300px laajaa laatikkoa ovat 610px leveän kotelon sisällä, niiden välillä on jälleen 10px kouru. Nyt, kun loput sivusta on tyyliltään, voit lisätä alatunnisteeseen. Käytä viimeistä div-ohjelmaa "alatunnisteen" tunnuksella ja lisää sisältöä niin, että voit nähdä sen. Voit myös lisätä yläreunan reunan, jotta tiedät, mistä se alkaa. HTML: CSS: #container #footer {
float: vasen;
leveys: 870px;
raja-top: # c00 solid 3px;
} 08/09 Nyt kun olet asettanut valmiiksi, voit lisätä omia tyylit ja sisältösi. Muista, että ylätunnisteen ja alatunnisteen reunat lisättiin näyttämään layout-osioita, ei erityisesti suunnittelua varten. Tässä on koko asiakirja, HTML ja CSS: Suunnittele kontti
Käytä Header-otsikkoa otsikossa
) on järkevämpää kuin käyttää
Otsikkorivi
Saada kolme saraketta, Aloita rakentamalla kaksi saraketta
Lisää kaksi saraketta leveän toisen sarakkeen sisään
Lisää alatunnisteeseen
Lisää omia tyylejäsi ja sisältöäsi
Lopullinen HTML / CSS
