Web-näytön luominen CSS: n avulla

Cascading Style Sheets antaa Web-suunnittelijoille mahdollisuuden hallita kunkin sivuston sivun ulkoasua. Voit tallentaa kehitysajan yrityksesi tai asiakkaan projektiin käyttämällä yhtä ulkoista CSS-tiedostoa, jotta jokainen verkkosivujen sivu voidaan muotoilla. Useat CSS-tiedostot voivat antaa yksilöllisen ilmeen jokaiselle sivulle tai sivuryhmälle. CSS-ulkoasun salaisuus on HTML-koodin sisällä olevien huomaamattomien sivuelementtien määrittäminen ja niiden näyttöominaisuuksien ja sijaintien määrittäminen CSS-tiedostoon.

HTML

1.

Luo HTML-tiedosto. Laita linkki CSS-tiedostoon osiossa, jossa on lauseke:

Tämä tunniste kertoo selaimelle, mistä löydät tämän sivun muotoiluohjeet.

2.

Määritä div-elementti, jonka tunnus on "tärkein" heti avausmerkinnän jälkeen:

Tämä luo kontin, jota voidaan käyttää sivun yleisten ominaisuuksien hallintaan. Aseta tämän div-elementin sulkumerkki välittömästi sivun sulkevan rungon tunnisteen yläpuolelle.

3.

Avaa uusi div-tunniste, jonka tunnus on otsikko, otsikon alapuolella:

Sisältö menee täällä

Sulje jokainen div-elementti, lukuun ottamatta ”pää” -säiliötä, osion sisällön lopussa.

4.

Käytä samaa menetelmää luodaksesi kolme ylimääräistä div-tunnusta ja määritä heille "information1", "information2" ja "foot" tunnukset.

CSS

1.

Luo tiedosto nimeltä "my_style.css" samaan hakemistoon kuin edellinen HTML-tiedosto.

2.

Määritä sivun yleinen leveys ja taustaväri viittaamalla "pää" div-tunnisteeseen:

tärkeimmät {

leveys: 960px; taustaväri: sininen; }

Käytä # -merkkiä viittaamaan yksittäiseen elementtiin sen tunnuksella.

3.

Määritä otsikko- ja informaatio-osien näyttöominaisuudet lisäämällä nämä rivit:

header {

taustaväri: valkoinen; text-align: center; }

tiedot1 {

taustaväri: harmaa; leveys: 480px; korkeus: 200px; float: vasen; }

tiedot2 {

taustaväri: vihreä; leveys: 480px; korkeus: 200px; float: vasen; }

Käännä molemmat informaatio-osiot vasemmalle ja määritä ne samalle korkeudelle, kun haluat luoda kaksikolonnisen näytön.

4.

Aseta jalka-astia sivun alareunaan riveillä:

jalka{

taustaväri: musta; väri valkoinen; Tyhjennä molemmat; }

Käytä ”selkeää: molempia” -ominaisuutta asettaaksesi alatunnisteen kahden kelluvan sarakkeen alapuolelle.

Kärki

  • Käytä ainutlaatuisia taustavärejä kullekin osalle suunnitellessasi CSS-tiedostoasi, jotta saat yleiskuvan asettelustasi ennen sisällön lisäämistä. Paras tapa päästä CSS-suunnitteluun on kokeilla kunkin elementin käytettävissä olevia ominaisuuksia. Tämä esimerkki hyödyntää vain muutamia mahdollisia CSS: n mahdollisia muotoiluvaihtoehtoja.
 

Jätä Kommentti