Kuidas luua veebi ekraanid CSS-iga

Cascading Style Sheets annab veebidisaineritele kontrolli iga saidi lehekülje väljanägemise üle. Saate oma ettevõtte või kliendi projekti jaoks aega salvestada, kasutades ühte välist CSS-faili, et vormindada iga veebilehe lehekülg. Mitmed CSS-failid võivad anda igale leheküljele või lehekülgede rühmale ainulaadse ilme. CSS-i skeemi saladus on diskreetse leheküljeelemendi määratlemine HTML-koodi sees ja nende kuvamise omaduste ja positsioonide määramine CSS-failis.

HTML

1.

Looge HTML-fail. Asetage link sektsioonis olevale CSS-failile avaldusega:

See sild ütleb brauserile, kust leida selle lehe vormindamise juhiseid.

2.

Määrake div element, mille ID on peamine pärast avamismärgist:

See loob konteineri, mida saab kasutada lehe üldiste omaduste kontrollimiseks. Asetage selle div-elemendi sulgemismärk kohe lehe sulgemise kere märgendi kohal.

3.

Avage uus div-silt, millel on “päise” id otse “peamise” kirje all:

Sisu läheb siia

Sektsiooni sisu lõpus sulgege iga div-element, välja arvatud “peamine” konteiner.

4.

Kasutage sama meetodit kolme täiendava div-märgendi loomiseks ja andke neile “info1”, “info2” ja “jala” ID-d.

CSS

1.

Looge eelmises HTML-failis sama kataloogi sees fail nimega "my_style.css".

2.

Määrake lehe üldine laius ja taustavärv, viidates peamisele div-märgendile:

peamine {

laius: 960px; taustavärv: sinine; }

Kasutage tähist „#”, et viidata individuaalsele elemendile oma ID-ga.

3.

Määrake päise- ja infosektsioonide kuvamise omadused, lisades need read:

päis {

taustavärv: valge; teksti joondamine: keskus; }

teave1 {

taustavärv: hall; laius: 480px; kõrgus: 200 px; float: vasakule; }

teave2 {

taustavärv: roheline; laius: 480px; kõrgus: 200 px; float: vasakule; }

Lükake mõlemad infosektsioonid vasakule ja määrake need samale kõrgusele, et luua kahe veeru kuva.

4.

Asetage "jala" mahuti lehe allosas joontega:

suu {

taustavärv: must; värv: valge; selge: mõlemad; }

Kasutage "selge: mõlemad" omadust, et asetada jalus kahe ujuva veeru alla.

Vihje

  • Kasutage CSS-faili kujundamisel iga sektsiooni jaoks unikaalset taustavärvi, et saada enne sisu lisamist kiire ülevaade oma paigutusest. Parim viis CSS-disainiga rahul olla on iga elemendi omaduste katsetamine. See näide kasutab ära vaid vähesed paljud võimalikud CSS-i võimalikud vormindamisvalikud.
 

Jäta Oma Kommentaar