Scarica Ripasso per verifica di html e css e più Dispense in PDF di Sviluppo di Applicazioni Web solo su Docsity!
RIPASSO PER VERIFICA
RESPONSIVE 1
STRUTTURA BASE HTML 2
FLEXBOX 3
IMMAGINI PER IL WEB 5
RESPONSIVE
Il viewport è l'area visibile dell'utente di una pagina web.
La @media regola viene utilizzata nelle media query per applicare stili
diversi a diversi tipi di media/dispositivi. @media (max-width: 1200px) { ... } /* for desktops / @media (max-width: 991px) { ... } / for laptops / @media (min-width: 768px) and (max-width: 990px) { ... } / for large tablets / @media (max-width: 768px) { ... } / for smaller tablets / @media (max-width: 500px) { ... } / for cellphones */
STRUTTURA BASE HTML
Esercitazione
MENU
INTESTAZIONE
FONDO nav{ /* COLORE SFONDO / background-color: chartreuse; / ALTEZZA / height : 80px; } header{ / COLORE SFONDO / background-color: rgb(47, 68, 126); / 40% di altezza / height : 40vh; } .container{ / COLORE SFONDO / background-color: rgb(174, 182, 253); / ALTEZZA / height : auto; / larghezza / width : 960px; / margine / margin : 50px auto; / definisce un contenitore flessibile in CSS / display : flex; / posizionare gli elementi con spazio tra i box distribuito in modo uniforme */ justify-content: space-between;
.container .colonna2{ flex-grow: 1; background-color: rgb(103, 32, 200); } .container .colonna3{ flex-grow: 1; background-color: rgb(233, 170, 57); } .container2{ height : 500px; width : auto; display : flex; flex-direction: column; } /verticale/ .container2 .verticale1{ flex-grow: 1; background-color: rgb(255, 115, 18); } .container2 .verticale2{ flex-grow: 1; background-color: rgb(255, 11, 11); } .container2 .verticale3{ flex-grow: 1; background-color: rgb(139, 116, 175); } /* andare a capo */ .container3{ background-color: violet; height : 600px; width : 400px; display : flex; flex-wrap: wrap; } .container3 .capo1{ width: 200px; height: 200px; background-color:lightblue; }
.container3 .capo2{ width: 200px; height: 200px; background-color:coral; } .container3 .capo3{ width: 200px; height: 200px; background-color:khaki; } .container3 .capo4{ width: 200px; height: 200px; background-color:lightgrey; } .container3 .capo5{ width: 200px; height: 200px; background-color:lightgreen; } IMMAGINI PER IL WEB Si dovrebbero usare : ● avif ● webp
Descrizione
EREN YEAGER
display: flex; justify-content: center; align-items:center; } .container .colonna3 .colonna4{ height : 200px; width: 200px; background-color: rgb(8, 65, 48); background-image: url(../img/1.jpg); background-size: cover; } .container .colonna3 .colonna4>header{ color : blue; }
