CSS: SWOT

Harjoitusohjeet

Lataa ja pura harjoitusmalli paikalliseen hakemistoosi: * h3.html.zip ja ota käyttöön seuraavat tyylimäärittelyt:

1. Luo luokkamääritys css-tiedostoon nimeltä style.css. Tiedoston style.css:n on sijaittava samassa kansiossa kuin h3.html.

2. Muokkaa body-tagia ja asianmukaisia ​​luokkamääritelmiä siten, että div-elementit sijoittuvat kuvan mukaisesti.

3. Tässä harjoituksessa div-elementteille käytettävä reunamäärittely on: border: 1px solid blue;. Tätä määrittelyä käytetään myös automaattisissa testeissä. (Huomioi: reunan leveys lisätään oletusarvoisesti elementin leveyteen.)

4. Jokaisen div-elementin (A, B, C, D) tulee varata täsmälleen neljäsosa (=1/4) katselualueesta (viewport) (100vw, 100vh)

Leveyksien määrittämisessä tulee käyttää katselualueen arvoja:

vw Suhteessa 1 %:iin katselualueen leveydestä*
vh Suhteessa 1 %:iin katselualueen korkeudesta*

W3C:n määritelmä katselualueelle (viewport) on: Katselualue on käyttäjän selaimessa näkyvä alue verkkosivusta. Katselualue vaihtelee laitteen koon mukaan, eli se on pienempi matkapuhelimella kuin tietokoneen näytöllä. Lisätietoja saat tutustumalla W3C School -sivustoon.

Attention

• ÄLÄ muokkaa h3.html-tiedostoa

A+ esittää tässä kohdassa tehtävän palautuslomakkeen.

Palautusta lähetetään...