Demo 3 - Taulukko
Tee demos kansion sisälle d3-kansio
Lisää luomaasi d3 kansioon index.html ja style.css -tiedostot sekä img kansio
Voit käyttää tiedostojen luomiseen Git Bash -komentoikkunaa:
touch index.html Enter
touch style.css Enter
code . Enter
Tarkista että git-kansiosi rakenne on seuraavanlainen:
html_css_basics
|
├── demos
│ ├── d1
│ ├── d2
│ └── d3
│ ├── index.html
│ ├── style.css
│ └── img
│ ├── kuva_1.jpg
│ └── kuva_2.jpg
|
├── exercises
│ ├── e1
│ ├── e2
│ ├── e3
│ └── ...
|
Asian pihvi:
- Tee 5 x 4 taulukko, jossa on yksi otsikkorivi ja 3 datariviä.
- Lisää otsikkorivin soluihin otsikot: Nimi, Hinta, Muutos %, Maa, Toiminto
- Tee datarivejä, joissa on Yhtiön nimi, osakkeen hinta, kurssin päivämuutos prosentteina, maan lippu ja painikkeet Osta/Myy
- Käytä w3schoolssia apuna w3schools HTML tables
CSS :nth-child() Selector
- Käytä CSS:n nth-child() ominaisuutta:
- Tasaa Hinta ja Muutos sarakkeet oikealle.
- Keskitä Maa- ja Toiminto sarakkeiden sisällöt.
- Nimi-solun sisältö on tasattu vasempaan.
Lataa maiden liput svg muodossa tästä
tai käytä alla olevia:
Nappi:
svg kuva:
Muuta jos jää aikaa:
- Lisää sivulle nav tagi jossa on tumma taustaväri
- Lisää naviin HepoStock svg logo ja tasaa se vasemmalle
- Lisää naviin avatar-ikoni ja käyttäjänimi teksti, jotka tasataan oikealle
- Alla kuvat svg:nä
Reverse-engineering (takaperin insinööreily?)
Kokeile komponentteja:
Cookie warning
Lisää alalaitaan mahdollisimman ärsyttävä keksivaroitus
Marquee banner
Lisää ylälaitaan rullaavat pörssikurssit